HTML5 - Curso básico de HTML 5 y CSS (I)

HTML5 – Curso básico de HTML 5 y CSS (I)

32 Flares Twitter 24 Facebook 0 Google+ 8 Pin It Share 0 Email -- 32 Flares ×

En esta guía vamos a detallar los pasos para maquetar y desarrollar una página web desde cero en el lenguaje HTML5. La guía está enfocada para personas que desconocen en su totalidad el lenguaje de programación; si tienes algún conocimiento en HTML estos primeros pasos te parecerán muy básicos. Una de las grandes diferencias de HTML5 con sus versiones anteriores, es que resume la forma de trabajar en los estándares.

Para trabajar en HTML5, lo podemos hacer con la versión CSS6 de Dreamweaver o Komodo Edit,  entre otras opciones.

En esta guía vamos a usar Dreamweaver y mostraremos las etiquetas tanto en texto como en imágenes. Te recomendamos que insertes el código desde el teclado para ir obteniendo práctica, pero si vas a copia y pegar, tendrás que copiar  todo lo que está entre comillas.

Al abrir una hoja en HTML, lo primero que tenemos que determinar es el tipo de documento “<!DOCTYPE html>"

Ahora creamos las etiquetas de entrada y salida de html: “<html>” comienza el código y en “</html>” termina el código.

Luego insertamos las etiquetas head, tanto de entrada como de salida;  aquí va el contenido adicional (es una llamada al navegador para que tome el código pero no lo muestre). Abrimos etiqueta “<head>” y cerramos etiqueta “</head>”.

Con las etiquetas body, estamos dándole forma al cuerpo de la hoja;  abrimos y cerramos etiquetas “<body>”, “</body>”.

Entre las etiquetas body insertaremos el juego de caracteres para que luego cualquier navegador lea las “ñ” y otros símbolos de nuestro idioma,  “<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />” (etiqueta simple).

En este punto insertamos una etiqueta de entrada y salida para colocar el título a la página;, “<title>”, “</title>”.

Ahora vamos a insertar contenido en el cuerpo de la hoja, pero no lo realizaremos con las etiquetas <div>, porque en HTML5 ponemos directamente la posición;  insertamos el encabezado “<header></header>”, los artículos “<article></article>”, un menú lateral “<aside></aside>” y un píe de página “<footer></footer>.

También podemos insertar más etiquetas dentro de cada etiqueta, como por ejemplo una sección dentro de artículos,  “<section></section>”

Ahora vamos a colocar el texto entre cada etiqueta para ir dándole forma a la página.

Ya podemos ver una vista previa de cómo está quedando estructurada la página (pincha en “Vista previa”).

En este momento guardamos el proyecto en una carpeta y le ponemos el nombre de “index” a la hoja (es la página de inicio).

Este es el punto de partida para la creación de la página web. En las siguientes entregas manipularemos el CSS para darle forma y estilo al diseño de cada página;  también seguiremos desarrollando los conocimientos en HTML5.


  • Ignorencio

    Interesante articulo, en futuras entregas me gustaria que explicaras como funciona el aside y video principalmente.

  • Steven

    Muchas Gracias Edgardo, esta muy bueno, esperare el sgte

  • Geo

    Muchas gracias por el curso, espero las próximas entregas

  • Lord_Sprit

    al insertar el charset tienes una errata que pone que se inserte en body.

    Por otra parte me parece importante explicar el
    ya que se definen las reglas que el navegador va a tener en cuenta al interpretar el documento.

    Deseante de saber mas de html5

  • Lord_Sprit

    <----el DOCTYPE no se porque no salio

  • Matias

    El doctype esta mal, aunque no es imprescindible sirve para que el navegador aplique una regla u otra.

  • jaun

    Por qué usar un doctype de XHTML en vez del simple de html5?

  • elboru

    Curso de HTML5 y empezamos sin el doctype de html5?
    http://www.w3.org/html/wg/drafts/html/master/syntax.html#the-doctype

  • Comodoro

    tu dominio de html5 es muy pobre… primero aprendelo bien y despues lo compartes con toda la comunidad de neoteo…

  • xander

    interesante pero me gustaría donde hay cursos en linea que puede llevar cursos avanzados. (jquery, php, zend, etc)

    • Triskelion

      #10 codecademy es el lugar que buscas!!!!!

  • Juan

    Los comentarios de arriba están en lo cierto. Si estamos hablando de un curso sobre HTML5, declarar el documento en la primer línea como XHTML 1.0 (y encima Transitional) es completamente errado. El doctype válido es simplemente !DOCTYPE html (con los símbolos de menor y mayor). En la segunda línea ya podrías abrir la etiqueta html sin atributos extra. Saludos.

  • lissandro mamardo

    y que mierda significa cada pendejada que toca copiar y pegar? este articulo es excelente para imprimirlo y limpiarme el culo

  • !!

    El Dreamweaver es porqueria…

  • Molusco

    Edgardo Fernández, yo sinceramente reconsideraría o cambiar el título (Adaptarlo a tu nivel de conocmiento y simplemente poner ‘Curso básico de HTML’ -sin el cinco-) o realmente ya ni intentarlo.

    Un artículo de sobra. No es un simple hate, los de Sony Vegas me resultaron interesantes.

  • Anti Troll Sabelotodo

    Pero Trolles, que no leyeron el titulo y la introduccion???? Dice BASICO por DIOS!!! XD

  • adordth

    ¿HTML es un lenguaje de programación?

    • elboru

      No, HTML no es un lenguaje de programación, es un lenguaje de marcado, en un lenguaje de programación creas algoritmos, resuelves problemas, un lenguaje de marcado estructuras texto en secciones lógicas.#16

  • Lan

    "La guía está enfocada para personas que desconocen en su totalidad el lenguaje de programación"

    Desde ahí empezamos mal. Ni HTML ni CSS son lenguajes de programación.

    " "
    Tal vez si el tutoríal fuera de HTML4/XHTML, pero en HTML5 mejor hacerlo así.
    " "

    «un menú lateral “ ”»

    Ese es un error muy común en quienes creen que pueden aprender HTML5 sólo por ver como se llaman las etiquetas. LoL
    No, no es para poner cosas "a un lado". Si vas a crear un menú usas la etiqueta . La etiqueta es para hacer una separación de contenidos. Vamos para indicar en plan "aquí estamos hablando de otra cosa".

  • José Luis

    Creo que nadie más se dio cuenta del tag :)

  • nagel

    Esta bueno t explica bastante.