INTRODUCCIÓN A HTML

HTML - HyperText Markup Language

1. Es un lenguaje de marcado
2. No es un lenguaje de programación
3. Se utiliza para estructurar páginas web
4. Está conformado por elementos, conocidos como “etiquetas” que
encierran diferentes tipos de contenido, ya sea texto, imágenes,
videos, entre otros.
5. La última actualización de HTML es HTML5, lanzada en 2014.
 NOVEDADES DE HTML5
● Semántica: Nuevas etiquetas que dan significado al contenido.

● Multimedia: Soporte nativo para audio y video.

● Gráficos y efectos 2D/3D: Facilidad en el manejo de gráficos.

● Rendimiento e Integración: Optimización de la velocidad y mejor uso del

hardware.

● Acceso al dispositivo: Integración con componentes de los dispositivos

móviles, como cámara, GPS, eventos táctiles, entre otros.

● CSS3: Diseños más complejos y diversos.

 ESTRUCTURA DE UN ELEMENTO HTML

1. Etiqueta de apertura: Consiste en el nombre del elemento (en este caso, p), encerrado
entre paréntesis angulares (<p>).
2. Contenido del elemento: Es el contenido que deseamos que el usuario visualice.
3. Etiqueta de cierre: Es lo mismo que la etiqueta de apertura, excepto que incluye una barra
diagonal antes del nombre del elemento (</p>).
 ESTRUCTURA DE UN ELEMENTO HTML

1. Etiqueta de apertura: Consiste en el nombre del elemento (en este caso, p), encerrado
entre paréntesis angulares (<p>).
2. Contenido del elemento: Es el contenido que deseamos que el usuario visualice.
3. Etiqueta de cierre: Es lo mismo que la etiqueta de apertura, excepto que incluye una barra
diagonal antes del nombre del elemento (</p>).
TIPOS DE ELEMENTOS HTML
 ELEMENTOS DE BLOQUE
● Ocupan todo el ancho de la pantalla o del bloque que los aloja
● Forman un bloque visible en la página
● Se muestran con un salto de línea antes y después del elemento
● Pueden anidarse dentro de otros elementos de bloque
● No pueden anidarse dentro de elementos en línea o elementos vacíos.
EJEMPLOS DE ELEMENTOS DE BLOQUE
ENCABEZADOS <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

PÁRRAFOS <p>
 ELEMENTOS EN LÍNEA
● Ocupan sólo el ancho de su propio contenido
● No comienzan con una nueva línea
● Pueden anidarse dentro de elementos de bloque y dentro de otros elementos
en línea.
EJEMPLOS DE ELEMENTOS EN LÍNEA

ENLACES <a>
 ELEMENTOS VACÍOS
● Constan únicamente de la etiqueta de apertura y de uno o varios atributos
● No poseen contenido
● No comienzan con una nueva línea
● Pueden anidarse dentro de elementos de bloque y dentro de elementos en
línea
EJEMPLOS DE ELEMENTOS VACÍOS

IMÁGENES <img>