Practica Dirigida
Con los conceptos expuestos en las sesiones anteriores, desarrollaremos paso a
paso una página web con las siguientes características:
- El tema debe ser la biografía de Leonardo Da Vinci.
- Debe contener un título explicativo (el documento y la biografía).
- La codificación debe aceptar caracteres latinos.
- Debe tener la posibilidad de ser encontrada por buscadores con la siguiente frase clave “Leo Da Vinci”.
- El fondo debe ser de color oliva.
- El texto debe ser de color azul.
- El código HTML debe estar comentado.
El primer paso en la creación de una página web es tener un diseño de lo que se quiere hacer, como en este caso el tema es bastante sencillo, el diseño también lo es.
Utilizaremos algunas etiquetas de formato de texto que nos permitirán un mejor acabado de la página:
Una vez definido el diseño a tomar, debemos encontrar la información a mostrar.
Una biografía sencilla de Leonardo Da Vinci se puede encontrar en:
http://www.biografiasyvidas.com/monografia/leonardo/Al ser un ejemplo, no utilizaremos toda la biografía, sino pequeñas porciones de
ella.
Entonces, empezaremos definiendo un documento HTML con la estructura
básica, pero sin contenido alguno:
¿Y qué es ese símbolo extraño?
Pues bien, la palabra “Biografía” lleva una letra tildada que pertenece a la codificación de caracteres latinos. Dado que no pusimos ninguna instrucción en nuestro código HTML al respecto en la codificación de caracteres, esta es tomada de la PC y, para el caso del ejemplo, esta no acepta caracteres latinos,
por eso la aparición de este símbolo extraño.
Para asegurarnos de que nuestro texto en español se vea siempre correctamente, debemos indicarle al documento qué codificación utilizar, para esto se utiliza la etiqueta META. De esa manera
agregamos la siguiente etiqueta al documento:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=ISO-8859-1">
Aprovechando que estamos definiendo etiquetas META, debes recordar que estas también pueden ser usadas para optimizar su encuentro mediante buscadores, así que, siguiendo las instrucciones del ejercicio, agregaremos una etiqueta META más:
Ahora llegó el momento de escribir el contenido. Veamos. Este texto simple necesita al menos lo siguiente:
- Título
- Subtítulos
- Párrafos
Los títulos se deben diferenciar del resto, para ello tenemos las etiquetas de encabezado. Probemos usando la etiqueta <H1>:
- <H1>Biografía de Leonardo Da Vinci en web</H1>
Ahora debemos colocar un párrafo, para ello tenemos las etiquetas que definen párrafo <P>:
- <P>Nació en 1452 en …</P>
La idea detrás de los párrafos es que no tengamos que preocuparnos por los cambios de línea, y agrupemos bloques de texto.
También necesitamos agregar subtítulos, para ello podríamos usar otro tipo de encabezado, o simplemente negritas. En este caso, usaremos negritas:
<B>Juventud y descubrimientos técnicos</B>
Veamos cómo va quedando nuestro documento:
Vista Previa de la página:
Finalmente, debemos colocar los colores solicitados, lo cual se logra manipulando los atributos de la etiqueta BODY, como vimos durante el desarrollo del capítulo:
<BODY bgcolor="olive" text="blue" >
******************************************************
EL RESULTADO FINAL
