Autor Tema: Ejercicio resuelto tutorial HTML CU00727B: creación de portal básico cabecera  (Leído 2879 veces)

Pitu

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 8
    • Ver Perfil
Hola a todos!! Dejo mi ejercicio para corrección ;D

Citar
Define la estructura de un portal web que conste de:

a) Una cabecera con una imagen, un texto h1, y otra imagen que a su vez sea un link.

b) Un cuerpo con un menú que contenga 5 items, una imagen y dos párrafos.

c) Un pie que contenga una imagen, un copyright y un texto que sea a su vez un link.



Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head><meta charset="utf-8">

<title>EjercicioCU00727B</title>

</head>

<body>
<div id="header">
<div style="text-align:center"><a href="http://es.wikipedia.org/wiki/Dise%C3%B1o_gr%C3%A1fico" target="_blank"><img src="http://jewelsbranch.com/wp-content/uploads/images/courses/GraphicDesignBasicsBanner.png" alt="Wikipedia" width="41%" border="1"></a></div>
<h1 style="text-align:center">Fundamentos del diseño</h1>
<div style="text-align:center"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCPWyQQQG7ygkssxxr6TJO2HVwYSGwpxiZo_vYrwab5eH3kGQq" alt="Mar"><br/></div>

<br/>
</div>

<hr style="height:3px; color: purple; background-color: purple; border:1px solid; width:70%"/>

<div id="menu">
Elementos del diseño:
<ul sytle="list-style-type:circle">
<li><a href="http://mimente.com.mx/blog/conceptos-formales-o-elementos-del-diseno-visuales" target="_blank">Elementos básicos</a></li>
<li><a href="http://es.wikipedia.org/wiki/Teor%C3%ADa_del_color" target="_blank">La teoria del color</a></li>
<li><a href="http://www.paredro.com/7-pasos-para-el-proceso-de-un-buen-diseno/" target="_blank">Fases del proceso de diseño</a></li>
<li><a href="http://www.forodelwebmaster.com/389/10-herramientas-relevantes-para-un-disenador-grafico/" target="_blank">Herramientas de trabajo</a></li>

</ul>

<div style="text-align:center"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT9VdmQrMg9myDuz_O0Gpfw5QXkCCpf2qF1ayScUtV1CrxPaU6y" alt="Colores"></div>

<p align="justify">
El diseño se define como el proceso previo de configuración mental, "pre-figuración",
en la búsqueda de una solución en cualquier campo. Utilizado habitualmente en el contexto de la industria,
ingeniería, arquitectura, comunicación y otras disciplinas creativas.
<br/>
<br/>
Etimológicamente deriva del término italiano disegno dibujo, designio,
signare, signado "lo por venir", el porvenir visión representada gráficamente del futuro,
lo hecho es la obra, lo por hacer es el proyecto, el acto de diseñar como prefiguración es el proceso previo
en la búsqueda de una solución o conjunto de las mismas. Plasmar el pensamiento de la solución o las
alternativas mediante esbozos, dibujos, bocetos o esquemas trazados en cualquiera de los soportes,
durante o posteriores a un proceso de observación de alternativas o investigación. El acto intuitivo de
diseñar podría llamarse creatividad como acto de creación o innovación si el objeto no existe o se modifica
algo existente inspiración abstracción, síntesis, ordenación y transformación.
</p>
</div>

<hr style="height:3px; color: darkgreen; background-color: darkgreen; border:1px solid; width:70%"/>

<div id="footer">
<div style="text-align:center"><img src="http://www.zeixs.com/uploads_beispielbilder_slideshow/graphic_3_neu/sound_design_4.jpg" width="35%" alt="Diseño">
<br/>

<p align="justify">
Diseñar es una tarea compleja, dinámica e intrincada. Es la integración de requisitos técnicos, sociales y
económicos, necesidades biológicas, ergonomía con efectos psicológicos y materiales, forma, color, volumen y
espacio, todo ello pensado e interrelacionado con el medio ambiente que rodea a la humanidad. De esto último
se puede desprender la alta responsabilidad ética del diseño y los diseñadores a nivel mundial. Un buen punto
de partida para entender éste fenómeno es revisar la <a href="http://es.wikipedia.org/wiki/Psicolog%C3%ADa_de_la_Gestalt">Gestalt</a>
y como la <a href="http://es.wikipedia.org/wiki/Teor%C3%ADa_de_sistemas">teoría de sistemas</a> aporta una visión
amplia del tema.
</p>
<br/><br/>
<div style="text-align:left"><img src="http://www.case.edu/magazine/fallwinter2010/images/copyright.png" width="5%">Copyright 2006-2072 aprenderaprogramar.com
</div>
</body>
</html>

Gracias :-*
« Última modificación: 24 de Abril 2015, 21:51 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola Pitu, el ejercicio está bien resuelto, únicamente indicarte que <p align="justify"> no debe usarse. Esto se explica en http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=489:encabezados-html-h1-a-h6-parrafos-aplicar-estilos-y-etiqueta-pre-texto-preformateado-ejemplo-cu00715b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

Ahí tienes un ejemplo sobre cómo debe hacerse.

De resto todo bien!

Saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".