DISEÑO

WEB CON
HTML5 Y
CSS
HTML 5

Danis Chiari
Índice

2 HTML 5.......................................................................................................................................................................... 3
2.1 Estructura de un sitio web .................................................................................................................................... 3
2.1.1 Creación de Carpetas .................................................................................................................................... 3
2.2 Introducción a HTML5 y Estructura Básica ............................................................................................................ 3
2.2.1 ¿Qué es HTML5 y su importancia? ................................................................................................................ 3
2.2.2 Estructura básica de una página HTML ......................................................................................................... 4
2.3 Etiquetas de Texto y Listas..................................................................................................................................... 5
2.3.1 Creación de encabezados y párrafos ............................................................................................................. 5
2.3.2 Uso de etiquetas de formato: `<strong>`, `<em>`, `<mark>` ......................................................................... 6
2.3.3 Creación de listas ordenadas y no ordenadas ............................................................................................... 8
2.4 Enlaces e Imágenes ............................................................................................................................................. 10
2.4.1 Creación de enlaces internos y externos ..................................................................................................... 10
2.4.2 Inserción de imágenes en una página con la etiqueta `<img>` .................................................................... 12
2.5 Estructura Avanzada y Semántica ....................................................................................................................... 14
2.5.1 Uso de etiquetas semánticas: `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>` .............. 14
2.6 Multimedia y Video ............................................................................................................................................. 17
2.6.1 Icono de la pagina ....................................................................................................................................... 17
2.6.2 Incorporación de contenido multimedia con la etiqueta `<audio>` y `<video>` .......................................... 18
2.7 tablas .................................................................................................................................................................. 19
2.7.1 Etiqueta <table> .......................................................................................................................................... 20
2.7.2 Etiqueta <tr> ............................................................................................................................................... 20
2.7.3 Etiqueta <td> ............................................................................................................................................... 20
2 HTML 5
2.1 ESTRUCTURA DE UN SITIO WEB
2.1.1 Creación de Carpetas
La estructuración de las carpetas en un sitio web es una parte crucial del proceso de desarrollo, ya que puede afectar la
organización, la facilidad de mantenimiento y la escalabilidad del proyecto. Aquí te presento una recomendación general
sobre cómo estructurar las carpetas en un sitio web:

1. Carpeta raíz: En el nivel superior, la carpeta raíz del sitio web suele contener los archivos y carpetas principales del
proyecto. Puede nombrarse según el dominio del sitio o el nombre del proyecto.

2. Carpeta "assets" o "recursos": Esta carpeta contiene todos los archivos estáticos utilizados en el sitio web, como
imágenes, hojas de estilo (CSS), archivos JavaScript, fuentes, archivos de iconos y otros recursos multimedia.

3. Carpeta "css" y "js": Estas carpetas almacenan los archivos de hojas de estilo y scripts JavaScript, respectivamente.
Puedes subdividirlas aún más según la necesidad del proyecto.

4. Carpeta "images": Aquí es donde se guardan todas las imágenes utilizadas en el sitio, organizadas en subcarpetas
según categorías si es necesario.

5. Carpeta "fonts": Si el sitio utiliza fuentes personalizadas, esta carpeta es donde se almacenan los archivos de fuente.

6. Carpeta "icons": Si usas iconos personalizados, esta carpeta es ideal para almacenar los archivos de iconos en
formatos como SVG.

7. Archivo "index.html" y demás páginas Este archivo suele ser la página principal del sitio y se carga
automáticamente cuando se accede a la carpeta raíz del dominio.

2.2 INTRODUCCIÓN A HTML5 Y ESTRUCTURA BÁSICA

2.2.1 ¿Qué es HTML5 y su importancia?
HTML5, que significa Hypertext Markup Language 5, es la última versión del lenguaje de marcado estándar utilizado para
crear y estructurar contenido en la web. Fue desarrollado por el World Wide Web Consortium (W3C) con el objetivo de
mejorar y modernizar la forma en que se crea y se presenta contenido en línea. HTML5 ofrece una serie de características
y mejoras significativas en comparación con sus predecesores, lo que lo convierte en una tecnología clave en el desarrollo
web actual. A continuación, se explora con más detalle qué es HTML5 y por qué es importante:

Definición de HTML5: HTML5 es un lenguaje de marcado que se utiliza para describir la estructura y el contenido de las
páginas web. A través de una serie de etiquetas y elementos, los desarrolladores web pueden definir cómo se deben
mostrar los diferentes tipos de contenido, como texto, imágenes, enlaces, videos y otros medios. A medida que la
tecnología web ha evolucionado, HTML5 ha incorporado nuevas características para hacer frente a las demandas
cambiantes de la web moderna.
2.2.1.1 Importancia de HTML5:
• Multimedia enriquecido: Una de las características más notables de HTML5 es su capacidad para incorporar
contenido multimedia directamente en las páginas web sin la necesidad de plugins adicionales, como Flash. Esto
ha llevado a una mayor integración de audio y video en el contenido web, mejorando la experiencia del usuario.
• Compatibilidad con dispositivos móviles: HTML5 ha sido diseñado teniendo en cuenta la creciente
demanda de sitios web y aplicaciones que funcionen en una variedad de dispositivos, desde computadoras de
escritorio hasta teléfonos móviles y tabletas. Esto ha permitido el desarrollo de sitios web y aplicaciones
responsivas, que se adaptan automáticamente al tamaño de pantalla y a la orientación del dispositivo.
• Semántica mejorada: HTML5 introduce una serie de elementos semánticos que describen mejor la estructura
y el contenido de una página. Esto no solo facilita la comprensión del contenido por parte de los motores de
búsqueda, sino que también ayuda a los desarrolladores a crear sitios web más accesibles y comprensibles para
los usuarios.
• Interactividad y animaciones: HTML5 proporciona herramientas y APIs para crear efectos interactivos y
animaciones directamente en el navegador, utilizando tecnologías como el elemento <canvas> y CSS3. Esto ha
permitido la creación de aplicaciones web más dinámicas y atractivas.
• Almacenamiento local: HTML5 introduce mecanismos de almacenamiento local, como el almacenamiento en
el lado del cliente y la API Web Storage, que permiten a las aplicaciones web almacenar datos en el navegador del
usuario. Esto es útil para crear aplicaciones que funcionen sin conexión a Internet o que necesiten almacenar datos
temporalmente.
• Nuevas formas de entrada: HTML5 incluye elementos y atributos que facilitan la entrada de datos, como el
elemento <input> con tipos específicos para direcciones de correo electrónico, números y fechas. Esto mejora la
usabilidad y ayuda a los navegadores a validar la entrada del usuario.

2.2.2 Estructura básica de una página HTML

La estructura básica de un documento HTML5 incluye los siguientes elementos:

• <!DOCTYPE html>: Define el tipo de documento como HTML5.

• <html>: El elemento raíz que contiene todo el contenido de la página.
• <head>: Contiene metadatos y enlaces a recursos externos.
• <meta charset="UTF-8">: Define la codificación de caracteres del documento.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura la vista en
dispositivos móviles.
• <title>: Define el título de la página que se muestra en la pestaña del navegador.
• <body>: Contiene el contenido visible de la página.
2.3 ETIQUETAS DE TEXTO Y LISTAS
2.3.1 Creación de encabezados y párrafos
La creación de encabezados y párrafos es una parte fundamental 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.

2.3.1.1 Creación de encabezados:

Los encabezados se utilizan para estructurar la información y destacar títulos y subtítulos. HTML proporciona seis
niveles de encabezados, desde <h1> hasta <h6>, donde <h1> es el más alto en jerarquía y <h6> es el más bajo.
2.3.1.2 Creación de párrafos:
Los párrafos son utilizados para mostrar texto normal y proporcionar información detallada. Se crean utilizando
la etiqueta <p>.

2.3.2 Uso de etiquetas de formato: `<strong>`, `<em>`, `<mark>`

En HTML, las etiquetas de formato <strong>, <em> y <u> se utilizan para aplicar énfasis, importancia y subrayado a
diferentes partes del texto en una página web. Cada etiqueta tiene un propósito específico y puede afectar tanto el aspecto
visual como el significado semántico del contenido. A continuación, se detallan estas etiquetas y cómo se utilizan:

2.3.2.1 Etiqueta <strong>:

La etiqueta <strong> se utiliza para marcar un fragmento de texto como importante o de mayor relevancia. Por
defecto, este texto se muestra en negrita. Además de proporcionar un cambio visual en la presentación del texto,
<strong> también comunica que el contenido entre las etiquetas tiene un significado semántico importante.
2.3.2.2 Etiqueta <em>:
La etiqueta <em> se utiliza para enfatizar un fragmento de texto. Por lo general, esto se traduce en que el texto
se muestra en cursiva. Al igual que <strong> , <em> no solo afecta la apariencia, sino que también indica que el
contenido tiene un significado especial en el contexto.
2.3.2.3 Etiqueta <mark>
La etiqueta <mark> es utilizada en HTML para resaltar o marcar partes específicas de un texto en una página web. Cuando
se aplica esta etiqueta a un fragmento de texto, el navegador suele destacarlo de alguna manera, como con un fondo de
color amarillo por defecto. La etiqueta <mark> es útil cuando deseas llamar la atención del lector hacia ciertas palabras o
frases en el contenido, pero sin atribuirles un significado semántico especial como lo hacen las etiquetas <strong> o <em>.

2.3.3 Creación de listas ordenadas y no ordenadas

En HTML, las listas son una forma efectiva de organizar y presentar información en forma de elementos con viñetas o
números. Hay dos tipos principales de listas: listas ordenadas y listas no ordenadas. En este punto, te explicaré cómo crear
ambos tipos de listas en HTML.

2.3.3.1 Listas no ordenadas (<ul>)

Las listas no ordenadas se crean utilizando la etiqueta <ul>. Cada elemento de la lista se define dentro de un elemento
<li> (elemento de lista).
2.3.3.2 Listas ordenadas (<ol>)
Las listas ordenadas se crean utilizando la etiqueta <ol>. Cada elemento de la lista se define dentro de un
elemento <li>.

2.3.3.3 Listas anidadas:

Puedes anidar listas dentro de otras listas para crear estructuras más complejas.
2.4 ENLACES E IMÁGENES
2.4.1 Creación de enlaces internos y externos
La creación de enlaces es una parte esencial del desarrollo web, ya que permite a los usuarios navegar entre diferentes
páginas y recursos en línea. En HTML, puedes crear enlaces tanto a páginas dentro de tu sitio (enlaces internos) como a
páginas o recursos fuera de tu sitio (enlaces externos).

2.4.1.1 Enlaces internos:

Los enlaces internos se utilizan para vincular diferentes páginas dentro de tu sitio web. Para crear un enlace interno,
necesitas la URL relativa de la página a la que deseas vincularte. La URL relativa es la ruta desde el archivo actual hasta el
archivo destino.

2.4.1.2 Enlaces externos:

Los enlaces externos se utilizan para vincular a páginas o recursos fuera de tu sitio web. Para crear un enlace externo,
necesitas la URL completa del recurso.
2.4.1.3 Enlaces con texto ancla:
Puedes crear enlaces que te lleven a una parte específica de una página utilizando los anclajes. Agrega un id al elemento
destino y utiliza # seguido del id en el enlace.
2.4.1.4 Atributo target para abrir en nueva ventana o pestaña:
El atributo target se utiliza para controlar dónde se abrirá la página vinculada. Si lo estableces como _blank, la
página se abrirá en una nueva ventana o pestaña del navegador.

2.4.2 Inserción de imágenes en una página con la etiqueta `<img>`

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. A continuación, se detallará cómo utilizar la etiqueta <img>
para insertar imágenes en una página.

2.4.2.1 Uso básico de la etiqueta <img>:

La etiqueta <img> tiene un atributo obligatorio: src , que especifica la ruta de la imagen que deseas mostrar. La
ruta puede ser una URL completa o una URL relativa a la imagen.
2.4.2.2 Atributo alt para descripción de la imagen:
El atributo alt proporciona una descripción textual de la imagen. Esta descripción es útil para la accesibilidad y
para mostrar un texto en caso de que la imagen no se pueda cargar.

2.4.2.3 Atributo width y height para dimensiones:

Puedes utilizar los atributos width y height para especificar las dimensiones de la imagen en píxeles. Esto puede
ser útil para controlar el espacio que ocupa la imagen en la página.
2.5 ESTRUCTURA AVANZADA Y SEMÁNTICA
2.5.1 Uso de etiquetas semánticas: `<div>` `<header>`, `<nav>`, `<main>`, `<article>`,
`<section>`, `<footer>`
En HTML5, las etiquetas semánticas son 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. Aquí te detallaré cómo usar cada una de las etiquetas semánticas clave:

2.5.1.1 Etiqueta <div>

La etiqueta <div> en HTML se utiliza para crear un contenedor genérico que no tiene ningún significado semántico propio.
Se utiliza principalmente para agrupar y estructurar elementos dentro de una página web, permitiendo aplicar estilos y
manipular el diseño de manera más organizada. Aquí tienes un ejemplo de cómo se ve la etiqueta <div> en HTML:

2.5.1.2 Etiqueta <header>

La etiqueta <header> se utiliza para definir la sección superior de una página o sección. Por lo general, contiene
elementos como el título del sitio, logotipo, encabezado de página, o elementos de navegación.
2.5.1.3 Etiqueta <nav>
La etiqueta <nav> se utiliza para definir una sección de navegación, como menús, enlaces a otras páginas o
secciones relevantes.

2.5.1.4 Etiqueta <main>

La etiqueta <main> se utiliza para definir el contenido principal de la página. Debería contener el contenido
principal que el usuario busca, excluyendo encabezados, pies de página o elementos de navegación repetitivos.

2.5.1.5 Etiqueta <article>

La etiqueta <article> se utiliza para envolver contenido autónomo e independiente, como entradas de blog,
noticias o publicaciones en redes sociales.
2.5.1.6 Etiqueta <section>
La etiqueta <section> se utiliza para dividir el contenido en secciones temáticas o agrupaciones lógicas.

2.5.1.7 Etiqueta <footer>

La etiqueta <footer> se utiliza para definir el pie de página de la página o sección. Generalmente contiene
información de contacto, enlaces a redes sociales, derechos de autor y otros detalles relevantes.
2.6 MULTIMEDIA Y VIDEO
2.6.1 Icono de la pagina
El icono de la página, comúnmente conocido como "favicon" (abreviatura de "favorite icon"), es una pequeña imagen que
se muestra en la pestaña del navegador, en la barra de direcciones y en los marcadores cuando los usuarios visitan tu sitio
web. Los favicons ayudan a identificar fácilmente un sitio web y brindan una apariencia más profesional y coherente en la
interfaz del navegador.

Para agregar un favicon a tu sitio web, sigue estos pasos:

1. Crear el icono: Crea un icono para tu sitio web en un formato de imagen como PNG, JPEG o GIF. El favicon típico
tiene dimensiones pequeñas, como 16x16 píxeles o 32x32 píxeles. También puedes considerar crear versiones más
grandes para pantallas de alta resolución, como 64x64 píxeles.
2. Guardar el icono: Guarda la imagen en una ubicación accesible dentro de tu sitio web. Por ejemplo, puedes
colocarla en la raíz del directorio del sitio web o en una carpeta específica para recursos estáticos.
3. Agregar el enlace en el HTML: Agrega la siguiente línea de código dentro de la etiqueta <head> de tus páginas
HTML. Cambia la ruta del atributo href para apuntar a la ubicación del icono que has creado.
2.6.2 Incorporación de contenido multimedia con la etiqueta `<audio>` y `<video>`
HTML5 introduce las etiquetas <audio> y <video> que permiten incorporar y reproducir contenido multimedia, como
audio y video, directamente en una página web sin depender de plugins externos. Aquí te detallaré cómo usar estas
etiquetas para agregar contenido multimedia a tu sitio:

2.6.2.1 Etiqueta <audio>:

La etiqueta <audio> se utiliza para insertar contenido de audio en una página web. Se puede usar con o sin controles de
reproducción, y puedes especificar diferentes formatos de audio para asegurarte de que el navegador compatible pueda
reproducir el archivo.
2.6.2.2 Etiqueta <video>:
La etiqueta <video> se utiliza para insertar contenido de video en una página web. Al igual que con <audio>,
puedes usar controles de reproducción y proporcionar múltiples formatos de video para una mejor
compatibilidad con diferentes navegadores.

2.6.2.3 Atributo controls:

El atributo controls agrega controles de reproducción (como reproducción, pausa, volumen, etc.) al reproductor
de audio o video, lo que permite a los usuarios interactuar con el contenido multimedia.

2.6.2.4 Uso de formatos de video y audio compatibles

Es importante proporcionar múltiples formatos de archivo (por ejemplo, MP3, OGG para audio; MP4, WebM para
video) utilizando las etiquetas <source> . Esto asegura que el navegador pueda elegir el formato adecuado en
función de su compatibilidad.

2.7 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. Aquí detallaré cómo usar las
etiquetas relacionadas con las tablas:
2.7.1 Etiqueta <table>
La etiqueta <table> se utiliza para crear una tabla en HTML. Dentro de la etiqueta <table>, se deben colocar las filas de
la tabla utilizando la etiqueta <tr> y dentro de cada fila, las celdas utilizando la etiqueta <td>.

2.7.2 Etiqueta <tr>

La etiqueta <tr> se utiliza para definir una fila en una tabla. Cada fila contiene una o más celdas definidas por la etiqueta
<td> . Dentro de la etiqueta <tr> , se deben colocar las celdas de la fila.

2.7.3 Etiqueta <td>

La etiqueta <td> se utiliza para definir una celda en una fila de la tabla. Contiene el contenido de la celda, que puede ser
texto, imágenes, enlaces u otros elementos HTML.

2.8 FORMULARIOS HTML

Los 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. Los formularios constan de diversos elementos y
atributos que permiten definir la estructura y el comportamiento del formulario, así como los tipos de datos que pueden
ser enviados. En esta sección, exploraremos los elementos, tipos de entrada y atributos más comunes utilizados en los
formularios HTML.
2.8.1 Elementos de formularios HTML
En HTML, los formularios se crean utilizando la etiqueta <form>, que contiene una variedad de elementos para recopilar
diferentes tipos de datos. Aquí hay algunos elementos clave:

2.8.1.1 <input>
El elemento <input> es uno de los más utilizados en los formularios HTML y permite a los usuarios ingresar
diferentes tipos de datos, como texto, contraseñas, números, etc.

2.8.1.2 <textarea>
El elemento <textarea> se utiliza para recopilar texto más largo, como comentarios o mensajes.
2.8.1.3 <select> y <option>
Estos elementos se utilizan para crear menús desplegables (selectores) que permiten a los usuarios elegir una
opción de una lista.
2.8.2 Tipos de entrada HTML
Los formularios HTML admiten varios tipos de entrada, que definen el tipo de datos que el usuario puede proporcionar.
Algunos tipos comunes son:

2.8.2.1 text
Para ingresar texto corto o largo.

2.8.2.2 password
Para contraseñas, oculta los caracteres ingresados.

2.8.2.3 radio
Permite seleccionar opciones de tipo radio button

2.8.2.4 checkbox
Permite seleccionar opciones de tipo Casilla de verificación
2.8.2.5 hidden
Muestra un campo oculto

2.8.2.6 file
Permite seleccionar un archivo local para enviarlo al servidor

2.8.3 Tipos de Entrada HTML5

2.8.3.1 url
Solicita un formato de URL de Entrada

2.8.3.2 email
Solicita un formato de correo

2.8.3.3 date
Solicita una fecha de entrada

2.8.3.4 time
Solicita una hora de entrada

2.8.3.5 month
Solicita un mes de entrada

2.8.3.6 week
Solicita una semana de Entrada

2.8.3.7 number
Solicita un numero de entrada

2.8.3.8 search
Se utiliza para realizar búsquedas

2.8.3.9 color
Solicita un color de entrada

2.8.4 Atributos de entrada HTML

Los elementos de entrada en los formularios HTML pueden tener atributos que definen su comportamiento y apariencia.
Algunos atributos comunes son:

2.8.4.1 name
Define el nombre del campo que se enviará al servidor cuando se envíe el formulario.

2.8.4.2 id
Define un identificador único para el campo, que a menudo se usa en etiquetas <label> para mejorar la accesibilidad.

2.8.4.3 placeholder
Proporciona un texto de ejemplo en el campo que desaparece cuando se hace clic en él.

2.8.4.4 required
Indica que el campo debe completarse antes de enviar el formulario.
2.8.4.5 Min y max
Estos atributos se utilizan en campos de tipo number, date, y otros tipos relacionados para establecer un valor mínimo y
máximo permitido.