Utiliza Google desde este blog

Google En la WebEn el Blog
kostenlose uhren relojes web

martes, 31 de mayo de 2016

Taller 1 de HTML5


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 correcta, como se ha explicado continuamente, teniendo en cuenta que todo lo que necesite para este taller debe estar archivado en una misma carpeta. La carpeta debe contener, al final de este taller, tres (3) archivos (una imagen, una página web y una hoja de estilos).
 
Vamos a trabajar con el código del Taller 2 del primer período (el de Formatos de texto) para iniciar con un código ya existente y no empezar desde ceros. Este código lo vamos a ir modificando con lo publicado en esta actividad para actualizardo al estándar HTML5. Recordemos que este código debe mostrar la siguiente página si lo tiene perfectamente corregido:



Por lo tanto debe descargar el archivo de la página, al igual que la imagen de este taller. Estos dos archivos deben quedar en una carpeta llamada Taller 1 HTML5. no importa cómo se llamen los archivos, lo importante es que usted los tenga bien identificados (cuál es la página y cuál es la imagen) y que al decargarlos sigan funcionando, por lo tanto descárguelo, pruébelo y corrija antes de continuar.

Conversión de la página web en HTML básico a HTML5
Las indicaciones que aquí se hacen sirve para cualquier página web, no se explican exclusivamente para el taller que usted acaba de descargar (se explica de manera general para que sirva para cualquier página que usted ha realizado hasta el momento). Por lo tanto usted debe interpretar estas indicaciones para aplicarlas a la página web descargada. Recuerde tomar los apuntes necesarios. Manos a la obra...

Estas primeras modificaciones no le hacen un cambio visible a la página web como tal, simplemente preparan la página para que pueda comprender el código de la hoja de estilos que se desarrollará más adelante.

Abrimos el archivo de la página web con el bloc de notas y realizamos la primera modificación introduciendo la siguiente etiqueta de primeras en nuestro código (antes de la etiqueta <html>):

<!doctype html>

Esta etiqueta simplemente le indica al navegador que el código allí presentado cumplirá el estándar HTML 5.



Luego debemos insertarle un atributo a la etiqueta <html>. Nunca hemos utilizado atributos en esta etiqueta, pero ahora si. Este atributo le deja claro al navegador cual es el idioma de la página web que va a mostrar. La etiqueta <html> quedará así, de ahora en adelante:


<html lang="es">

También debemos modificar <head> que es la cabecera de la página, la cual siempre ha contenido solo la etiqueta <title>. De ahora en adelante debe tener una etiqueta <meta> para indicarle al navegador que 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 he nombrado varias veces. Por lo tanto 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 vamos a trabajar el cuerpo de la página para que podamos distribuirlo como una página web actual. Para ello observemos el siguiente esquema:

 
En el cuerpo de nuestro documento debemos agrupar las etiquetas que allí se presentan, de acuerdo con su función generar dentro de la página. Esto se realiza con otras etiquetas que sirven de contenedoras de las que ya conocemos. Hay etiquetas que serán de la cabecera de la página y vendrán encerradas entre <header>... </header>, otras que serán específicamente del pie de página y vendrán encerradas entre <footer>...</footer>, otras son exclusivas de los contenidos propios de las páginas e irán con <section>...</section> y otras serán para mostrar información que no es propiamente del contenido principal de la página, como publicidad o links a otros sitios web e iran entre <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 debe estar dentro de la etiqueta <article>…<article>, la cuales serán subsecciones de <section>, así:
 
<section>
   <article>
      <h2>Titulo del tema que se va a tratar<h2>
      <p>Primer párrafo del contenido del tema</p>
      <p>Segundo párrafo, etc. (además de imágenes, videos, etc.) todo lo que contiene este tema </p>
   </article>
</section>
 
Si no se tiene sino un solo tema debe ir como se mostró anteriormente. Si se tienen varios temas, se abrirá otro <article> para cada tema. Todos dentro del mismo <section> que solo debe haber uno.
 
Ahora vamos con algo nuevo, los espacios laterales, conocimos 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>. Como en nuestra página inicial 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>Actividades informáticas y tecnológicas - Lissyvancelis</p>
         <a href="http://tecnologiaeinformatica-lissyvancelis.blogspot.com.co/">http://tecnologiaeinformatica-lissyvancelis.blogspot.com.co/</a>
</aside>
 
Y se finaliza con el pie de página de nuestro sitio web, que debe contener los datos de contacto, direcciones teléfonos, 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 su hay otro estudiente</em></p>
   <p>Correo electrónico: correoB@xmail.com</p>
</footer>
 
Si vemos el documento completo que se acaba de explicar debería verse así aproximadamente:
 
<!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 tema que se va a tratar<h2>
         <p>Primer párrafo del contenido del tema</p>
         <p>Segundo párrafo, etc. (además de imágenes, videos, etc.) todo lo que contiene este tema </p>
      </article>
   </section>

   <aside>
      <h3>Páginas web recomendadas</h3>
      <p>Actividades informáticas y tecnológicas - Lissyvancelis</p>
      <a href="http://tecnologiaeinformatica-lissyvancelis.blogspot.com.co/">http://tecnologiaeinformatica-lissyvancelis.blogspot.com.co/</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 su hay otro estudiente</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 y disponible siempre que vaya a trabajar en otro código HTML como los de su proyecto.

Realizando estos cambios, el documento quedará listo para aceptar la hoja de estilos donde se trabajará el diseño estético de la página, el cual irá en otro documento aparte realizado también en Bloc de notas y el cual llamaremos como lo hayamos indicado en la línea <link href…> y debe guardarse con la extensión .css para indicar el tipo de documento que es. Esto lo haremos a continuación.

Creación de la hoja de estilos 

Abrimos un bloc de notas para crear esta primera hoja de estilos básica que se realizará el día de hoy, guardamos para indicar el nombre y la ruta de una vez de este documento. Este archivo debe guardarse en la carpeta que contiene el documento .html, deben quedar en la misma carpeta. Lo llamaremos directamente estilos.css.
 
Trabajaremos el tipo de fuente y el color del fondo de nuestra página con el siguiente código:
 
body {
   font-family: Georgia, serif;
   background-color: #CEF6F5;
}
 
Ctrl + G para guardar lo que se lleva de la hoja de estilos e ir a la página web y dar Ctrl + R o F5 para actualizar y observar los cambios.
 
Esta es la forma de indicar cómo se verá cada objeto, en este caso estamos modificando la etiqueta <body> del código HTML. En css no se escriben entre < y >, se escriben directamente y los atributos van dentro de una llaves y cada vez que se termina un atributo se debe colocar un punto y coma (;) para luego iniciar con el otro atributo si lo hay. En este caso se coloca un tipo de fuente para toda la página, pero si otro objeto se desea con otro tipo de letra se indica cuando se esté 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
 
Ahora vamos a justificar los párrafos. Si no tiene un párrafo lo suficientemente largo, copie algún tipo de texto de unos 5 renglones en el contenido del artículo, guarde el html y vuelva al css para insertar este código:
 
p {
   text-align: justify;
}
 
Guarde y actualice cambios en la página web.
 
Póngale 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. En clases pasadas les había explicado que buscando en Google con la frase Código de colores HTML salen muchas páginas que tratan de este tema, yo recomiendo la primera página que sale en esa búsqueda y que se llama: Códigos de colores HTML - Html Color Codes cuyo link es http://html-color-codes.info/codigos-de-colores-hexadecimales/.



No olvide tomar los apuntes respectivos. Guarde y entregue su trabajo para su evaluación.



No hay comentarios:

Publicar un comentario

Regístrate y realiza tu comentario