Introducción a HTML
Curso de introducción al desarrollo web
Creado por Jorge García para twitch.tv/jorchg 
Documentos
Todos los documentos HTML tienen que empezar por su declaración DOCTYPE
Elementos básicos
Headings (encabezados)
Definidos desde h1 hasta h6
Elementos básicos
Paragraphs (párrafos)
Elementos básicos
Links (enlaces)
El destino se especifica con el atributo href
Elementos básicos
Images (imágenes)
Atributos:
- src: Source de la imagen
- alt: Texto alternativo de la imagen
- width y height: Ancho y alto de la imagen
Código fuente
¿Cómo verlo?
Código fuente
Chrome developer tools
- CMD + SHIFT + I (Mac)
- CTRL + SHIFT + I (Linux/Windows)
- Click derecho + Inspeccionar
Elementos de HTML
Un elemento de HTML se define con el tag inicial, el tag final y el contenido entre ellos
Elementos de HTML
Empty elements (elementos vacíos)
Algunos elementos no tienen contenido, como por ejemplo el elemento br
Elementos de HTML
Nested elements (anidados)
La mayoría de elementos de HTML pueden contener otros elementos dentro
Atributos de HTML
- Todos los elementos de HTML pueden tener atributos
- Los atributos se utilizan para añadir información extra del elemento
- Siempre se declaran en la etiqueta de apertura
- Normalmente se declaran como pares de nombre=valor
Atributos de HTML
Atributos de HTML
src
Identifica la ruta del recurso (ruta absoluta o relativa)
Atributos de HTML
alt
Especifica un texto alternativo en una imagen, que aparecerá en caso de que no se pueda cargar o si el usuario utiliza un lector de pantalla (screen reader)
Atributos de HTML
href
Especifica el destino del hipervínculo en un enlace
Atributos de HTML
width y height
Especifica, en el caso de una imagen, su ancho y alto en píxeles
Atributos de HTML
style
Sirve para añadir estilos en línea en el HTML
Atributos de HTML
class
Especifica las clases que se utilizarán para darle estilo mediante CSS
Atributos de HTML
Listado de atributos:
Headings (encabezados)
Los encabezados (h1-h6) son muy importantes porque dan semántica la página, e indica el nivel de importancia de cada uno de los apartados.
No deben usarse para hacer el texto más grande o como si fuera negrita
Además los headings deben de ir siempre en orden secuencial. Es decir, no debería haber un h3 si no existe un h2, por ejemplo.
Headings (encabezados)
Además, son también muy importantes porque los utilizan los buscadores para indexar mejor el contenido y dotar de semántica a la página.
Es decir, un h1 siempre es más importante que un h2, que a su vez es más importante que un h3 y así hasta el h6, que es el que menos importancia tiene.
Paragraphs (párrafos)
Un párrafo se define con el elemento <p></p>
Un párrafo siempre empieza en una nueva línea, ya que es un elemento de tipo block (bloque)
El navegador ignorará saltos de línea dentro de un párrafo
Paragraphs (párrafos)
El problema del "poema"
¿Qué hacemos si queremos, por ejemplo, mostrar un texto en verso?
Utilizar el elemento <pre></pre> (pre-formatted text)
Horizontal Rules
Se utiliza el elemento <hr> para separar contenido temático en una página
Es un elemento vacío, igual que el <br> (line break)
Estilos
Los estilos en una web son muy importantes, para ofrecer una buena experiencia y para poder tener una página web "única"
Podemos estilar mediante hojas de estilos CSS, o directamente en línea en nuestros elementos
Utilizamos el atributo style para añadir estilos en línea
Estilos
- background-color
- color
- font-family
- font-size
- text-align