HTML5
@danischiari
Estrucutra de directorios
Estructura básica de una página
HTML
Creación de
La creación de encabezados y párrafos es una
parte fundamental Encabezados
en la estructuración y
presentación de contenido en una página web.
Los encabezados jerarquizan la información y los
párrafos brindan contexto y detalles.
Creación de encabezados
Creación de párrafos
Uso de etiquetas de
En HTML, las etiquetas de formato <strong>,
formato
<em> y <u> se utilizan para aplicar énfasis,
importancia y subrayado a diferentes partes del
texto en una página web.
Etiqueta <strong>
Etiqueta <em>
Listas ordenadas y no
Las listas son una forma efectiva de organizar y
ordenadas
presentar información en forma de elementos
con viñetas o números.
Listas no ordenadas (<ul>)
Listas ordenadas (<ol>)
Listas anidadas (<ol>)
Enlaces internos y
Permite a los usuarios navegar entre diferentes
páginas y recursos en línea externos
Enlaces internos
Enlaces externos
Enlaces con texto ancla
Atributo target para abrir en
nueva ventana
Inserción de imágenes
La etiqueta <img> en HTML se utiliza para
insertar imágenes en una página web. Esta
etiqueta te permite mostrar gráficos,
ilustraciones, fotos u otros tipos de imágenes en
tu contenido.
Uso básico de la etiqueta <img>
Atributo width y height para
dimensiones
Uso de etiquetas
En HTML5, las etiquetas semánticas son
semánticas
elementos que brindan un significado y
estructura más clara al contenido de una página
web. Estas etiquetas ayudan a los motores de
búsqueda, navegadores y desarrolladores a
comprender mejor la organización y la jerarquía
del contenido.
Etiqueta <div>
Etiqueta <header>
Etiqueta <nav>
Etiqueta <main> y etiqueta
<article>
Etiqueta <section>
Etiqueta <footer>
Multimedia y Video
En HTML5, podemos mostrar iconos en la barra
de navegación, así como también la
reproducción de audios y videos.
Icono de la página
1. Crear el ícono (o descargarlo)
2. Guardar el ícono
3. Insertar el Código HTML para visualizarlo
Icono de la página
Etiqueta <audio>
Etiqueta <video>
Tablas
Las tablas en HTML permiten organizar datos en
filas y columnas. Las tablas son útiles para
presentar información de manera estructurada,
como listas de precios, horarios, resultados de
encuestas, etc.
Etiquetas
Etiqueta <table>: se utiliza para crear una
tabla en HTML
Etiqueta <tr>: se utiliza para definir una
fila en una tabla
Etiqueta <td>: se utiliza para definir una
celda en una fila de la tabla
Tablas
Formularios HTML
Son una parte fundamental de la interacción
entre los usuarios y los sitios web. Permiten a los
usuarios enviar datos al servidor para su
procesamiento y respuesta.
Etiqueta <label > y <input>
Etiqueta <textarea>
Etiquetas <select> y <option>
Tipos de Entrada
Admiten varios tipos de entrada, que definen el tipo de datos
que el usuario puede proporcionar.
text: Para ingresar texto corto o largo.
password: Para contraseñas, oculta los caracteres ingresados.
radio: Permite seleccionar opciones de tipo radio button.
checkbox: Permite seleccionar opciones de tipo Casillas de verificación.
hidden: Campos ocultos
file: Permite seleccionar archivos
Tipos de Entrada HTML5
url: formato de direcciones web
email: formato de correo
date: formato de fecha
time: formato de hora de entrada
month: formato de mes de entrada
week: formato de semana de entrada
number: formato numérico
search: ayuda a realizar búsquedas
color: selector de colores
Atributos de entrada
name: Define el nombre del campo que se enviará al
HTML
servidor cuando se envíe el formulario.
id: Define un identificador único para el campo, que a
menudo se usa en etiquetas <label> para mejorar la
accesibilidad.
placeholder: Proporciona un texto de ejemplo en el campo
que desaparece cuando se hace clic en él.
required: Indica que el campo debe completarse antes de
enviar el formulario.
min y max: utilizan en campos de tipo number, date, y otros
tipos relacionados para establecer un valor mínimo y
máximo permitido.
Atributos de entrada
HTML
name: Define el nombre del campo que se enviará al
servidor cuando se envíe el formulario.
id: Define un identificador único para el campo, que a
menudo se usa en etiquetas <label> para mejorar la
accesibilidad.
placeholder: Proporciona un texto de ejemplo en el campo
que desaparece cuando se hace clic en él.
required: Indica que el campo debe completarse antes de
enviar el formulario.
