INTRODUCCIÓN A HTML5
Temario:
- Fundamentos de HTML5
- Que es HTML5
- Entremos en Materia
- Primera Página Web
- Editores de texto
- Pasos para Construir una Página Web
Fundamentos de HTML5
Haga el código lo más limpio posible:
Código HTML debe estar limpio y fácil de leer. No debe tener ningunas características innecesarias, y deben tener el formato de una manera que es fácil de seguir.
Estructura independiente de diseño:
Utilice HTML para la estructura y emplee CSS para el diseño. Evite etiquetas como <font> y <center> en su Código HTML, ya que son difíciles de cambiar con JavaScript.
Si utilizar CSS para el diseño, con JavaScript tendrá mucha más capacidad de cambiar el funcionamiento de la página.
Evitar el uso de tablas y marcos para el diseño. Estas técnicas fueron los mejores herramientas de los diseñadores web en un momento dado, sin embargo, el nuevo enfoque que proporciona CSS permite un código más limpio, el cual es más fácil de trabajar al dar una estructura visual.
Comience con código válido:
Muchas veces, una página se verá perfectamente bien, pero puede haber algún error oculto y al mostrar el trabajo al cliente nos encontramos con inconvenientes; por eso es mejor comenzar sus proyectos con HTML valido, también veremos como validar nuestros códigos para evitar estos contratiempos.
Posteriormente veremos como validar nuestro documento en la siguiente dirección (http://validator.w3.org)
Declaración del Documento <!DOCTYPE html>:
La definición del tipo de documento para HTML4 o XHTML fue realmente complicado. Incluso las personas que impartían clases y escribió libros sobre el tema nunca memorizan el tipo de documento, pero tenía que copiar y pegar cada vez. HTML 5 tiene una definición del documento sencillo y limpio, lo cual simplifica la escritura de páginas web de memoria.
Posteriormente veremos como validar nuestro documento en la siguiente dirección (http://validator.w3.org)
Declaración del Documento <!DOCTYPE html>:
La definición del tipo de documento para HTML4 o XHTML fue realmente complicado. Incluso las personas que impartían clases y escribió libros sobre el tema nunca memorizan el tipo de documento, pero tenía que copiar y pegar cada vez. HTML 5 tiene una definición del documento sencillo y limpio, lo cual simplifica la escritura de páginas web de memoria.
Qué es HTML5
¿Qué es HTML?
HTML es un lenguaje para describir las páginas web.
- HTML significa H yper T ext M arkup L enguaje
- HTML es un marcado lenguaje
- Un lenguaje de marcas es un sistema de marcado de etiquetas
- Las etiquetas describen el contenido del documento
- Documentos HTML contienen HTML etiquetas y sencillo texto
- Los documentos HTML son también llamados páginas web
Etiquetas HTML
- Etiquetas HTML son palabras clave (nombres de etiqueta) rodeadas por corchetes angulares como < y >
- Etiquetas HTML normalmente vienen en pares como < b>contenido</ b>
- La primera etiqueta es la de inicio, la segunda etiqueta es la etiqueta de cierre.
- La etiqueta final se escribe igual que la etiqueta inicial, con una barra diagonal antes del nombre de la etiqueta
- Etiquetas inicial y final son también llamados etiquetas de apertura y etiquetas de cierre</b>
Entremos en Materia
Una página básica de HTML5 es muy fácil de construir. Sólo tiene que abrir un editor de texto y agregue el siguiente código:
Primera Página Web
Primera Página Web
<!DOCTYPE html><html lang = "es"><head><!-- Esto es un Comentario --><title>Primera Página</title><meta charset = "utf-8"/></head><body><h1>Esto es un Título H1</h1><p>Esto es un Párrafo</p></body></html>
Para escribir una página web, solo basta tener un editor de texto, el cual puede ser desde un simple Bloc de Notas o un editor profesional como:
- Dreamweaver
- FontPage
- NotePad++
- SublimeText 2 (recomendado)
Le recomiendo que descargue el editor de texto SublimeText (el cual yo empleo), ya que es mucho mas fácil distinguir las partes de código.
De esta manera, podrá copiar los códigos vistos en estos cursos en su editor de texto y vera o siguiente:
Como podrá ver, el código se ilumina con diferentes colores, permitiendo identificar los elementos con mayor facilidad.
Una vez copiado el código en nuestro editor de texto, lo guardamos como - primeraPagina.html -
Lo que veremos en el navegador será:
Pasos para Construir una Página Web
- Comience con el tipo de documento.
- Las versiones modernas de HTML (XHTML y HTML5) tener un atributo especial llamado el tipo de documento, lo que indica la forma en la que sera tratado el documento HTML5 por los navegadores El tipo de documento para XHTML era muy confuso, y HTML 4 no tenía un DOCTYPE en absoluto.
- Ahora en HTML5 basa con colocar esta etiqueta: <DOCTYPE html>, la cual define el tipo de documento.
- La definición de tipo de documento debe estar en la primera linea de su sitio Web sin espacios o lineas que la precedan.
- Si deja esto,probablemente pueda utilizar las funciones de HTML5, pero validadores tendrán que adivinar qué forma de HTML que está utilizando.
- Añadir la etiqueta <html>.
- Esta etiqueta especial indica el comienzo de una Web.
- Lo mejor es indicar en qué idioma esta escrita la página con el atributo (lang="es") esto para el caso de español.
- Asegúrese de tener la etiqueta </ html> de cierre correspondiente en la parte inferior de la página.
- Una buena práctica es que cada vez que abramos una etiqueta la cerremos para evitar errores futuros (existen algunas excepciones de etiquetas nones o que no tienen par las cuales veremos posteriormente).
- Crear un área de <head>.
- La cabeza es algo así como el compartimiento del motor de un coche.
- La gente no suele ir allí, pero hay un montón de importantes funciones que ahi se realizan.
- La cabeza <head> está vacía en este simple ejemplo, pero se llenará con JavaScript y CSS pronto.
- Especifique el juego de caracteres.
- Si bien esto no es estrictamente necesario, se considera buena forma para que el navegador sepa qué tipo de caracteres se utilizarán al mostrar nuestra página.
- Páginas escritas en Inglés general y en nuestro caso Español, debe utilizar UTF-8, el cual se especifica con el siguiente código: <meta charset = "UTF-8" />.
- Tabule su codigo.
- A los navegadores no les importa si su código contiene sangrías, pero es un muy buen hábito para facilitar la lectura del codigo.
- Añadir comentarios.
- Los comentarios no son estrictamente necesarias, pero nos son de mucha utilidad para realizar pequeñas anotaciones que nos faciliten la lectura de nuestro código.
- Comentarios en HTML empiezan con <!-- y terminan con -->.
- Los comentarios pueden durar varias líneas.
- Poner en un título con <title> </ title>.
- Esta etiqueta permite especificar un título de su página.
- El título lo general aparece en la barra de título del navegador Web, y También suele aparecer en los resultados del motor de búsqueda para tu página.
- Incluya la mayor parte de la página en las etiquetas <body>.
- Si el área de la cabeza es la del compartimiento del motor, el cuerpo es el espacio para los pasajeros.
- El cuerpo tendera la parte visible de la página web.
- La etiqueta </ body> suele ser justo antes de la etiqueta </ html>, y después de la etiquetaa <head>
- Utilice etiquetas de encabezado para describir su esquema.
- La etiqueta <h1> es un ejemplo de un encabezado.
- Todas las etiquetas de título comienzan con h seguido de un número que indica su jerarquía.
- Los niveles de encabezado van desde el h1 hasta el h6.
- Coloque la mayor parte del texto en párrafos.
- Aunque HTML no requiere el uso de etiquetas de párrafo para colocar texto, siguen siendo una muy buena idea que coloque cada párrafo dentro de un <p> </ p> par.
- Guarde el archivo con la extensión html.
- Asegúrese de guardar el archivo con la extensión (.html)
No hay comentarios:
Publicar un comentario