Scribd
Cargar
17 vistas13 páginas

Guía HTML

Hola

Cargado por

andres miquilarena
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
17 vistas13 páginas

Guía HTML

Hola

Cargado por

andres miquilarena
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 13

CAPÍTULO I

Introducción a HTML5

- ¿Qué es HTML5?
HTML5 es el lenguaje de marcado utilizado para crear y estructurar contenido en la
web. Permite definir la estructura y el significado del contenido, así como especificar
su apariencia y comportamiento.

- Características y ventajas de HTML5


HTML5 ofrece numerosas características y ventajas, como:
- Nuevas etiquetas semánticas: HTML5 introduce etiquetas como `<header>`,
`<nav>`, `<section>`, `<article>`, `<aside>`, y `<footer>`, que proporcionan una
estructura semántica más clara y significativa para el contenido.

● Soporte multimedia integrado: HTML5 incluye la etiqueta `<video>` para


reproducir contenido multimedia sin necesidad de complementos adicionales
como Flash.

● Mejor compatibilidad y rendimiento: HTML5 está diseñado para ofrecer


una mayor compatibilidad entre diferentes navegadores y dispositivos,
proporcionando una experiencia web más consistente.

● API y capacidades avanzadas: HTML5 incluye API para geolocalización,


almacenamiento local, arrastrar y soltar, notificaciones y comunicación en
tiempo real a través de WebSockets, entre otras.

● Extensión e index: Una extensión es una parte adicional que agrega


funciones a un programa o archivo por ejemplo: .png, .jpg, .txt, etc. En el
caso de los documentos HTML, la extensión ".html" se usa para guardar una
página web. El archivo "index" es el nombre comúnmente utilizado para el
archivo principal de un sitio web.

● Estructura básica de un documento HTML5:


Un documento HTML5 sigue una estructura básica que consta de las siguientes
etiquetas:

1. `<!DOCTYPE html>`: Declaración del tipo de documento HTML5.

1
2. `<html>`: Elemento raíz del documento HTML.

3. `<head>`: Contiene metadatos y enlaces a hojas de estilo y scripts.

4. `<title>`: Define el título del documento que se muestra en la pestaña del


navegador.

5. `<body>`: Contiene el contenido visible del documento.

● meta tags:
Los meta tags en HTML son elementos especiales que se utilizan para proporcionar
información adicional sobre una página web. Estos tags no se muestran
directamente en la página, pero ofrecen datos importantes para los motores de
búsqueda, redes sociales y otros servicios web. Aquí tienes algunos de los meta
tags más importantes junto con su definición escritos como comandos:

1. `<meta charset="utf-8">`: Define la codificación de caracteres utilizada en la


página (generalmente UTF-8).

2. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`:


Especifica cómo se debe ajustar y escalar la página en diferentes dispositivos.

3. `<meta name="description" content="Descripción de la página">`:


Proporciona una breve descripción de la página para los motores de búsqueda y
redes sociales.

4. `<meta name="keywords" content="palabra clave1, palabra clave2, palabra


clave3">`: Enumera las palabras clave relevantes para la página.

5. `<meta name="author" content="Nombre del autor">`: Indica el nombre del


autor de la página.

7. `<meta property="og:title" content="Título del contenido compartido">`:


Define el título del contenido cuando se comparte en redes sociales.

8. `<meta property="og:image" content="URL de la imagen">`: Especifica la


imagen que se mostrará cuando se comparta la página en redes sociales.

9. `<meta property="og:description" content="Descripción del contenido


compartido">`: Proporciona una descripción del contenido cuando se comparte en
redes sociales.

2
3
CAPÍTULO II
Etiquetas y elementos básicos

HTML5 incluye una variedad de etiquetas y elementos básicos para estructurar y


presentar contenido web:

- `<h1>` a `<h6>`: Etiquetas de encabezado para títulos y subtítulos.

- `<p>`: Etiqueta para párrafos de texto.

- `<a>`: Etiqueta para enlaces a otras páginas web.

- `<img>`: Etiqueta para insertar imágenes en el documento.

- `<ul>` y `<li>`: Etiquetas para crear listas no ordenadas.

- `<ol>` y `<li>`: Etiquetas para crear listas ordenadas.

- `<br>`: Etiquetas para crear un break en la página.

- `<div>`: Etiqueta de división utilizada para agrupar y organizar contenido.

- `<span>`: Etiqueta utilizada para aplicar estilos o manipular partes específicas de


un texto.
- <video src = " ">: se utiliza para insertar videos dentro de la página

- `<table>`, `<tr>`, `<th>`, `<td>`: Etiquetas para crear tablas y definir filas,
encabezados y celdas de datos.

- Nota: la mayoría de las etiquetas necesitan ser cerradas explícitamente para


indicar dónde termina su contenido. El cierre de una etiqueta se representa con el
símbolo "</" seguido del nombre de la etiqueta. Por ejemplo, el cierre de la etiqueta
para un párrafo es "</p>". Algunos ejemplos:

- `<h1>Título</h1>`: Apertura y cierre de la etiqueta de encabezado.

- `<a href="https://www.ejemplo.com">Enlace</a>`: Apertura y cierre de la


etiqueta de enlace.

4
- `<img src="imagen.jpg" alt="Descripción de la imagen">`: La etiqueta de
imagen no requiere cierre.
- Texto:
El texto dentro de las etiquetas HTML se coloca entre la apertura y el cierre de la
etiqueta. El contenido que deseas mostrar en la página web se escribe dentro de
estas etiquetas. Por ejemplo, si usamos la etiqueta de encabezado `<h1>`, el título
que queremos mostrar se coloca entre las etiquetas de inicio y de cierre de esta
manera: `<h1>Título</h1>`. De manera similar, si queremos escribir un párrafo,
utilizamos la etiqueta `<p>` y el texto se coloca entre las etiquetas de apertura y
cierre, como en `<p>Este es un párrafo de ejemplo.</p>`.

Es importante recordar que el texto debe estar dentro de las etiquetas


correspondientes para que se muestre correctamente en el navegador web.
Además, asegúrate de cerrar adecuadamente las etiquetas que lo requieren,
utilizando el símbolo "</" seguido del nombre de la etiqueta. De esta forma, se
garantiza la estructura adecuada y la interpretación correcta del contenido en la
página web.

- Enlaces:

El enlace de imagen se logra utilizando la etiqueta `<img>`. Para mostrar una


imagen, necesitas especificar la ubicación de la imagen en el atributo "src" y,
opcionalmente, proporcionar una descripción de la imagen en el atributo "alt". Por
ejemplo: `<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen">`.

Por otro lado, el enlace de URL se crea utilizando la etiqueta `<a>`. Para enlazar a
una URL específica, debes establecer el atributo "href" con la dirección URL a la
que deseas dirigir. Por ejemplo: `<a href="https://www.ejemplo.com">Texto del
enlace</a>`.

Las etiquetas de enlace `<a>` requieren un cierre explícito `</a>`.

Al utilizar estos elementos en HTML, puedes crear enlaces a otras páginas web
mediante la etiqueta `<a>` y mostrar imágenes con la etiqueta `<img>`, lo que
permite una navegación interactiva y visualmente atractiva para los usuarios en tu
página web.

5
CAPÍTULO III
Estructura semántica en HTML5

HTML5 introduce nuevas etiquetas semánticas que ayudan a estructurar el


contenido de manera más significativa:

- `<header>`: Encabezado del documento o sección.

- `<nav>`: Navegación del sitio web.

- `<main>`: Contenido principal del documento.

- `<section>`: Secciones de contenido relacionado.

- `<article>`: Contenido independiente y autónomo.

- `<aside>`: Contenido relacionado pero no esencial.

- `<footer>`: Pie de página del documento o sección.

- Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>
<header>
<h1>Encabezado de la página</h1>
<nav>
<ul>
<li><a href="URL">Inicio</a></li>
<li><a href="URL">Acerca de</a></li>
<li><a href="URL">Contacto</a></li>
</ul>
</nav>
</header>

6
<main>
<section>
<h2>Sección 1</h2>
<p>Contenido de la sección 1</p>
</section>

<section>
<h2>Sección 2</h2>
<p>Contenido de la sección 2</p>
</section>
</main>

<footer>
<p>Derechos de autor &copy; año</p>
</footer>
</body>
</html>

En este ejemplo, se sigue la estructura semántica recomendada de HTML5. Se


utiliza la etiqueta `<header>` para el encabezado de la página, que contiene un
título principal `<h1>` y una sección de navegación `<nav>`. El contenido principal
se encuentra dentro de la etiqueta `<main>`, que contiene varias secciones
`<section>`, cada una con un título `<h2>` y un párrafo `<p>`. Finalmente, el pie de
página se representa con la etiqueta `<footer>`, que contiene información adicional,
como los derechos de autor.

7
CAPÍTULO IV
Formularios en HTML5

- Introducción a los formularios


Los formularios en HTML5 permiten recopilar información del usuario, como
nombres, direcciones de correo electrónico, contraseñas, etc. Se utilizan para
interactuar con los usuarios y enviar datos al servidor.

- Elementos de formulario básicos


HTML5 ofrece una variedad de elementos de formulario, como:

- `<form>`: Apertura de todo formulario.

- `<input>`: Permite al usuario ingresar datos, como texto, números, fechas, etc.

- `<textarea>`: Permite al usuario ingresar texto largo o comentarios.

- `<select>` y `<option>`: Crean listas desplegables para seleccionar una opción.

- `<checkbox>`: Permite al usuario seleccionar una o varias opciones de una lista.

- `<radio>`: Permite al usuario seleccionar una opción única de una lista.

- `<button>`: Crea botones interactivos para enviar el formulario.

- Validación de formularios en HTML5


HTML5 proporciona atributos y tipos de entrada para validar formularios sin
necesidad de JavaScript. Estos incluyen:

- Atributos `required` y `pattern` para requerir y validar campos obligatorios.


- Tipos de entrada específicos, como `email`, `number`, `date`, etc.

- Tipos de inputs:

● `<input type="text">`: Campo de texto para ingresar texto o caracteres


alfanuméricos.

● `<input type="password">`: Campo de contraseña para ingresar


contraseñas ocultas.

8
● `<input type="email">`: Campo de correo electrónico para ingresar
direcciones de correo electrónico válidas.

● `<input type="number">`: Campo numérico para ingresar valores


numéricos.

● `<input type="date">`: Campo de fecha para seleccionar una fecha.

● `<input type="checkbox">`: Casilla de verificación para seleccionar una o


varias
opciones.

● `<input type="radio">`: Botón de opción para seleccionar una única opción


de un conjunto.

● `<input type="file">`: Campo de carga de archivo para seleccionar y cargar


archivos.

● `<input type="submit">`: Botón de envío para enviar un formulario.

● `<input type="reset">`: Botón de reinicio para restablecer los valores de un


formulario a sus valores originales.

● `<input type="hidden">`: Campo oculto que no se muestra en el formulario,


pero se envía con el envío del formulario.

● `<input type="color">`: Selector de color para seleccionar un color.

● `<input type="range">`: Control deslizante para seleccionar un valor dentro


de un rango específico.

● `<input type="url">`: Campo de URL para ingresar direcciones URL válidas.

- Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de Contacto</title>
</head>
<body>

9
<h1>Formulario de Contacto</h1>

<form action="submit.php" method="POST">


<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" required></textarea>

<input type="submit" value="Enviar">


</form>
</body>
</html>

10
EJERCICIOS

1. Crear una página web básica: Crea una página HTML simple con un
encabezado, un párrafo y una lista de elementos.

2. Agregar imágenes: Aprende a insertar imágenes en una página web utilizando la


etiqueta `<img>`.

3. Crear enlaces: Practica creando enlaces a otras páginas web y también enlaces
internos dentro de la misma página.

4. Crear una tabla: Crea una tabla con filas y columnas para organizar datos.

5. Utilizar listas: Practica el uso de listas ordenadas y no ordenadas para


estructurar contenido, debes realizar una lista ordenada con 20 articulos y una
desordenada con 10 articulos.

6. Crear formularios: crear formularios HTML con campos de entrada ( inputs )


de texto, fecha, textarea, color, uno de su elección y boton de envío.

7. Utilizar etiquetas semánticas: Practica el uso de etiquetas semánticas como


`<header>`, `<nav>`, `<article>` y `<footer>` para estructurar correctamente el
contenido de tu página.

8. utiliza etiquetas de encabezado: crea una página que incluya varios sections
con parrafos y encabezados de diferentes tamaños cada uno.

9. crea una pàgina de contacto: crea una página simple que incluya un
encabezado, un parrafo y un formulario de HTML de su elección, el formulario debe
contener un mínimo de 4 entradas ( inputs ).

10. crear una pàgina de hipervínculos: debes crear una página que incorpore una
imagen de una persona, el nombre de la misma y las redes sociales de la persona
creando varios links que lleven a cada una de sus redes sociales.

Comandos Visual Studio Code

- Crear nuevo doc ( CTRL + N ).

- Guardar archivo ( CTRL + S ).

11
- Activar guardado automático ( Tres rayas en la zona superior, luego archivos
o files auto save ).

- Visual Studio code tiene una inteligencia artificial que escribe el comando
entero por ti, por ejemplo en lugar de utilizar el “<” para escribir la etiqueta,
solo debes escribir la palabra clave. Por ejemplo: si queremos hacer una
etiqueta de imagen, solo debemos poner “img” luego enter y así.

12
NORMATIVA

- queda prohibido hablar en clase deben prestar mucha atención a


la clase,

- Para trabajar es de carácter obligatorio crear una carpeta específica para


programación.

- Todos los trabajos en clases deben ser entregados a tiempo, si se entregan


fuera de plazo no serán corregidos, por ende no se tomará su asistencia en
la clase, y sería una inasistencia no justificada, lo que ameritará un strike
directo.

- 2 strikes = no hay puntos de lapso.

- 3 strikes = expulsado del grupo por un año.

13

También podría gustarte