Indicaciones previas
HTML5 es un estándar que reune varias cosas: en primera instancia cuenta con una página web diseñada en lenguaje HTML que contendrá todo el material teórico, de imágenes, videos, enlaces, etc. que debe tener el sitio. Como segundo aspecto, cuenta con una hoja de estilos, que es un archivo aparte de código CSS que le indica a la página su apariencia física, distribución de la información, colores de texto, fondo, tamaños y tipos de fuente, entre otras muchas cosas todas relacionadas con el estilo que le queremos aplicar a la página web. Y de tercera instancia puede contener otro código aparte en JavaScript para trabajar la programación de la página y que ella responda a diferentes eventos, pero este no es material de este curso. Solo trabajaremos hasta el segundo aspecto.
Esta actividad es exclusivamente de comprensión lectora, por lo tanto debe leer detenidamente y "releer" si algo no le resulta claro. Obviamente, también debe tener ya claras las etiquetas de HTML básico, dominar la forma de corregir y actualizar su página web y obviamente guardar de forma organizada en una carpeta, como se ha explicado continuamente.
Se trabajará con el código final de la evaluación realizada hace una semana (el titulado SOBRE HTML) para iniciar con un código ya existente y no empezar desde cero. Este código se irá modificando con lo indicado en esta publicación para actualizardo un poco más al verdadero estándar HTML5. Por lo tanto, debe descargar la carpeta de la evaluación, con todo su contenido: archivo HTML e imágenes. Esta carpeta se renombrará como HTML5 y CSS 1. Ejecute o abra la página Web creada para verificar su funcionamiento.
Conversión de la página web en HTML básico a HTML5
Las indicaciones que aquí se hacen realmente sirven para cualquier página web, si por algún motivo no tiene la evaluación puede utilizar el archivo creado también sobre HTML con la imágen del mismo tema, ya que se explica de manera general para que sirva para cualquier página que usted haya realizado hasta el momento). Interprete estas indicaciones para aplicarlas a la página web descargada. Recuerde tomar los apuntes necesarios. Manos a la obra...
Las primeras modificaciones, no le hacen un cambio visible a la página web, simplemente preparan la página para que pueda comprender el código de la hoja de estilos que se creará más adelante.
Abrimos el archivo de la página web con el editor de código que se acostumbre utilizar y realizamos la primera aclaración que ya se debería saber... que la primera etiqueta que debemos encontrar el:
<!doctype html>
y que esta simplemente le indica al navegador que el código allí presentado cumplirá el estándar
HTML 5.
Luego, si no lo tiene, debemos insertarle un atributo a la siguiente etiqueta, que debe ser <html>. Este atributo le deja claro al navegador cual es el idioma de la página web que va a mostrar. La etiqueta <html> debe quedará así, de ahora en adelante:
<html lang="es">
También debemos modificar <head> que es la
cabecera de la página web, la cual en este momento contiene solo la etiqueta
<title>. De ahora en adelante debe tener una etiqueta <meta> para
indicarle al navegador qué tipo de codificación se va a utilizar, de
preferencia será la iso-8559-1 que acepta los acentos (tildes) y la ñ, siendo así
más compatible para nosotros, y además la etiqueta <link> que enlazará la
hoja de estilos que se creará más adelante. Teniendo en cuenta lo anterior, esa cabecera quedará así de ahora en adelante:
<head>
<title>Título de cabecera de la página</title>
<meta charset="iso-8559-1">
<link href="estilos.css" rel="stylesheet">
</head>
Ahora se trabajará el cuerpo de la página para poder distribuirlo como una página web actual. Para ello observemos el siguiente esquema:
En el cuerpo la página se encierra dentro de las etiquetas <body> y </body> como siempre se ha indicado, pero ahora se irá más alla, agrupando las etiquetas que se incluyen en el cuerpo, en subgrupos más pequeños, de acuerdo con su función dentro de la página. Esto se realiza con otras etiquetas que sirven de contenedoras de las que ya conocemos. Hay etiquetas que formarán parte de la parte superior del cuerpo de la página, zona que también se conoce como cabecera de página. Pero, esta "cabecera" es específica del cuerpo de la página, sólo por estar arriba y vendrán encerradas entre las etiquetas <header>... </header>.
Otro grupo de etiquetas que, por su funcionalidad o información, son ubicadas en la parte inferior de la página, zona que se denomina pie de página y vendrán agrupadas entre las etiquetas <footer>...</footer>.
Otras más, son etiquetas exclusivas de los contenidos propios de la página e irán agrupadas con las etiquetas <section>...</section>.
Y por último, otras etiquetas muestran información que no es propiamente del contenido principal de la página, como publicidad, gadgets o links a otros sitios web e iran agrupadas entre las etiquetas <aside>...</aside>.
Por lo tanto, debemos organizar las etiquetas que ya se tienen en estos grupos. Comencemos con el título principal de la página. Esta etiqueta <h1> debe estar contenida dentro de una etiqueta <header>…</header> indicándole al navegador que ésta es la cabecera de documento, así:
<body>
<header>
<h1>Título
principal del cuerpo de mi página web</h1>
</header>
El contenido de la página debe estar dentro de las etiquetas <section>…</section> y si la página es del estilo de noticias, o blog, que se van publicando artículos, cada uno de estos artículo o temas tratados debería estar dentro de las etiqueta <article>…</article>, las cuales serán subsecciones de <section>, así:
<section>
<article>
<h2>Título
del tema que se va a tratar<h2>
<p>Primer párrafo del contenido
del tema</p>
<p>Otros párrafos u otros elementos contenidos en este tema</p>
</article>
</section>
Si no se tiene sino un solo tema debe ir como se mostró antes (solo "section"). Si se tienen varios temas, se abrirá otro <article> para cada tema. Todos dentro del mismo <section> que solo debe haber uno. En nuestra evaluación habían tres temas, uno de tablas, otro de listas y otro con los links a las actividades, abriremos un grupo "article" con cada uno de ellos.
Ahora vamos con algo nuevo, los espacios laterales, conocidos como SIDEBAR o barras laterales, las cuales muestran contenido secundario para la página, sitios web recomendados, propaganda, etc. Este contenido se agrupa con la etiqueta <aside>. En la página que estamos trabajando de la evaluación, no tenemos nada de este estilo, entonces trabajaremos el siguiente código después de cerrar </section> y antes de lo que irá en <footer>:
<aside>
<h3>Páginas web recomendadas</h3>
<p>Blog de actividades sobre Tecnología e Informática</p>
<a href="http://tecnologiaeinformatica-lissyvancelis.blogspot.com.co/"> Actividades informáticas y tecnológicas - Lissyvancelis</a>
<p>Blog de actividades para los técnicos de Multimedia y Programación</p>
<a href="https://sistemas-lissyvancelis.blogspot.com/">Actividades Técnico Sistemas - Lissyvancelis</a>
</aside>
Y ahora se abordará el pie de página del sitio web, el cual debe contener los datos de contacto, direcciones teléfonos, redes sociales, etc.
<footer>
<p>Creado por:</p>
<p><em>Fulano de
tal</em></p>
<p>Correo electrónico:
correoA@xmail.com</p>
<p><em>Y el otro nombre si son dos estudiantes</em></p>
<p>Correo electrónico:
correoB@xmail.com</p>
</footer>
Si hacemos una mirada al código completo que se acaba de modificar debería verse así aproximadamente adicionando todas las etiquetas adicionales con que cuenta cada subgrupo creado:
<!DOCTYPE html>
<html>
<head>
<title>Título de cabecera de la página</title>
<meta charset="iso-8559-1">
<link href="estilos.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Título
principal del cuerpo de la página web</h1>
</header>
<section>
<article>
<h2>Titulo
del primer tema que se abordó<h2>
<p>Primer párrafo del contenido
del tema</p>
<p>Ejemplo </p>
</article>
<article>
<h2>Titulo
del segundo tema que se abordó<h2>
<p>Primer párrafo del contenido
del tema</p>
<p>Ejemplo </p>
</article>
<article>
<h2>Titulo
del tercer tema que se abordó<h2>
<p>Párrafos y links del contenido
del tema</p>
</article>
</section>
<aside>
<h3>Páginas web recomendadas</h3>
<p>Blog de actividades sobre Tecnología e Informática</p>
<a href="http://tecnologiaeinformatica-lissyvancelis.blogspot.com.co/"> Actividades informáticas y tecnológicas - Lissyvancelis</a>
<p>Blog de actividades para los técnicos de Multimedia y Programación</p>
<a href="https://sistemas-lissyvancelis.blogspot.com/">Actividades Técnico Sistemas - Lissyvancelis</a>
</aside>
<footer>
<p>Creado por:</p>
<p><em>Fulano de
tal</em></p>
<p>Correo electrónico:
correoA@xmail.com</p>
<p><em>Y el otro nombre si son dos estudiantes</em></p>
<p>Correo electrónico:
correoB@xmail.com</p>
</footer></body>
</html>
Este es el código guía que usted como estudiante debe tener claro siempre que vaya a trabajar en otros proyectos HTML5.
Verifique que la página siga mostrando la información correctamente como debería estar antes de estas modificaciones.
Realizando estos cambios, es cuando el documento está listo para aceptar lo indicado por la hoja de estilos que se crearía dando el diseño estético de la página, el cual irá en otro documento aparte realizado también en el mismo editos y el cual tendrá como nombre el que se haya indicado en la etiqueta <link href…>. Rcordar que debe llevar la extensión .css para indicar al navegador que esta es la hoja de estilos o código CSS. Esto archivo se trabajará a continuación...
Creación de la hoja de estilos
Abierto o creado el nuevo archivo que llevara el código CSS y que debe estar en la misma carpeta del código HTML para que se ejecute sin problemas. Se quiere aplicar el tipo de fuente Georgia y un color de fondo a toda la página con el siguiente código (no olvide eliminar el atribujo de color de fondo que asignó en el código HTML de la evaluación):
body {
font-family: Georgia, serif;
background-color: #CEF6F5;
}
Guardar lo que se lleva de la hoja de estilos e ir a la página web y dar F5 para actualizar y observar los cambios.
Esta es la forma de aplicar estilo a cada objeto. En este caso quisimos aplicarle estilo al objeto body que en HTML se escribe <body>, pero que en CSS no se utilizan < y >, sino que se escribe directamente body y entre llaves que abren y cierran, van los atributos que se quieren asignar, cada uno finalizado con un punto y coma (;). En este ejercicio, se está colocando un tipo de fuente para toda la página, pero si otro objeto se desea con otro tipo de letra, simplemente se indica cuando se estén dando las características de ese objeto, como lo vamos a hacer con el encabezado de la página, así:
header {
font-size: 3em;
font-family: "Comic Sans MS", cursive, sans-serif;
color: #610B21;
background-color: #8A2908;
text-align: center;
}
Observe como afectan cada uno de los atributos asignados. Debió haber cambiado el tipo de letra en el título principal. Si desea ver otros tipos de fuente puede consultar la página: CssWeb Safe Fonts dando clic en este enlace http://www.w3schools.com/cssref/css_websafe_fonts.asp No olvide anotar este sitio web en su cuaderno ya que lo puede necesitar en otra actividad.
Ahora vamos a justificar los párrafos. Para esto debe borrar el atributo insertado en la etiqueta <p> del código HTML y si no tiene un párrafo lo suficientemente largo para ver bien la aplicación de la alineación justificada, en el código HTML también, copie o complete bien sus párrafos para que tengan suficiente contenido, guarde ese html y vuelva al css para insertar el siguiente código:
p {
text-align: justify;
}
Guarde y actualice cambios en la página web.
Ahora, asigne un color de fondo a cada una de las secciones faltantes (section, aside y footer) de su página, así:
section {
background-color: #XXXXXX;
}
No se confunda :), en vez de las XXXXXX debe colocar el código del color que usted quiere. Busque en Google Código de
colores HTML. Aunque salen muchas páginas que tratan de este tema, yo recomiendo la que se llama: Códigos de colores HTML - Html Color Codes cuyo link es http://html-color-codes.info/codigos-de-colores-hexadecimales/.
Continúe con la asignación de color para las otras seccciones trabajadas o asignadas.
No olvide tomar los apuntes respectivos. Guarde y entregue
su trabajo para su evaluación.
