Introducción práctica HTML5

HTML en sus distintas versiones, de las cuales vamos a ver la última que corresponde a la versión 5, es el lenguaje con el que esta hecho el 90% del World Wide Web, por tanto no debemos pensar que HTML5 es un extraño, cada vez que navegamos por internet constantemente estamos leyendo HTML.

Lo que ocurre es que nuestros navegadores transforman el código HTML al formato que estamos acostumbrados a leer, pero una de las principales características de HTML es que es fácilmente comprensible por los humanos. Otras muchas características son:

  • Totalmente independiente del sistema operativo.
  • Se pueden crear páginas web con con cualquier editor de texto.
  • Los documento siempre tienen que estar perfectamente estructurados.
  • El tipo de lenguages como HTML (XML, XHTML, HTML.*,GML…) provienen todos de SML (simple markup language)

Características principales de un lenguaje de marcas

  • Todo va entre marcas perfectamente abiertas y cerradas.
    • <elemento>…..</elemento>
  • Si se anidan marcas, las marcas exteriores deben cerrarse después de las exteriores
    • <elemento1>..<elemento2>…..</elemento2>…</elemento1>
  • Se escribe en minúsculas
  • El valor de los atributos o parámetros siempre irá entrecomillado
    • <h1 align=“center”>Mi primera página en HTML5</h1>

Módulo de documento

Como ya hemos dicho HTML tiene que estar siempre perfectamente estructurado, el módulo de documento es el primer módulo de encargarse de esta estructuración, con el daremos formato a nuestra página en HTML  y aportaremos información muy importante acercar de la página (metainformación).

  • DOCTYPE, aquí se especifica el tipo de documento, HTML 5 hace uso de un modo reducido que nos permite declara el DOCTYPE fotma muy simple, no llegará con poner: <!DOCTYPE html>.
  • Comienzo del documento: <html>
  • Cabecera: <head>
    • <meta name=”description” content=”” />
    • <meta name=”keywords” content=””/>
    • <meta name=”author” content=”” />
    • <meta charset=”UTF-8″>
    • <title></title>
    • </head>
  • Cuerpo: <body>
  • Navegacion: <nav>…</nav>
    • Secciones y articulos:
      • <section>
        • <article></article>
        • <article></article>
      • </section>
    • </body>
  • Sidebar: <aside>….</aside>
  • Pie de página: <footer>….</footer>
  • </html>

Módulo estructural

Una vez definida la estructura del documento, tenemos que definir la estructura de la página en sí, para ello haremos uso de:

  • Títulos. No confundir con el título de la cabecera. Tenemos distintos niveles de títulos
    • Título 1: <h1>….</h1> afecta a toda la página, por tanto sólo se puede colocar uno e irá (recomendación) justo debajo de la etiqueta <body>.
    • Título 2: Es el título de cada una de los artículo, sólo uno por cada artículo.
    • Titulos 3,4,5. Se pondrán dentro de los artículos si fuesen necesarios y siempre correctamente colocados con cierto orden lógico: <h3></h3>, <h4></h4>….
  • Párrafos: Son párrafos de texto: <p></p>
  • blockcode: Es código de programa, sirve para presentar fragmentos de código.<blockcode>….</blockcode>
  • blockquote: Son citas: <blockquote>…</blockquote>
  • addres: Direcciones web (ver enlaces).

Módulo de listas

Veremos los dos tipos de listas más importantes ordenadas y sin ordenar:

  • Listas ordenadas: <ol><li></li></ol>
  • Listas no ordenadas: <ul><li></li></ul>

Enlaces

Sirve para hacer enlaces a otras páginas: <a href=”http://….”>Texto de anclaje</a>

Ejercicios I

En la siguiente imagen se muestra un ejemplo sencillo de página en HTML5

html5_1

Primera página HTML5

  1. Crea la página en HTML5.
  2. Abrela con un navegador.
  3. Los enlaces no están dentro de ninguna etiqueta addres, solucionarlo.
  4. Prueba las siguientes etiquetas, creando un articulo para cada prueba
    1. blockcode (Puedes poner una sentencia SQL)
    2. blockquote
  5. Pon enlaces reales en la barra de navegación. El primero irá al blog, el segundo irá a la categoría SQL del blog y el tercero irá a la categoría HTML5. No olvides poner un texto descriptivo en el anchor text o texto de ancla.
  6. Has que la barra de navegación sea una lista sin ordenar.
  7. Añade un sidebar con los mismos enlaces que la barra de navegación. Los enlaces deberán estar dentro de una lista ordenada, no sera necesario meterlos dentro de addres.

Ejercicio II La biografía

Para crear páginas web debemos tener un contenido, por tanto tendremos que hacerlo, para eso elegir un actor, cantante o cualquier persona medianamente famosa y buscar su biografía, con ese texto crearemos nuestra primera página web real. La página web deberá contener.

  • Una sección
  • Tres articulos si fuese una biografía podría ser:
    • Información del tipo: Fecha nacimiento, lugar nacimiento, padres, estudios….
    • Obra, obras que ha compuesto, actos en los que ha participado…
    • Si está muerto podemos poner datos acerca de su muerte. Si sigue vivo podremos poner información sobre sus próximas actuaciones.

Ejercicio III Las biografías

Juntaros en grupos de dos o tres alumnos y juntar vuestras biografía anteriores usando la barra de navegación

3 Responses to “ Introducción práctica HTML5 ”

  1. bcn3098 dice:

    Juan Luis,estoy instalando el gedit,me sale en blanco y negro ¿en qué fallo?,gracias.

Deja un comentario

Disculpa, debes iniciar sesión para escribir un comentario.