Scribd
Cargar
10 vistas

Guía HTML

Este documento explica los conceptos básicos de HTML y proporciona ejemplos de etiquetas comunes como encabezados, párrafos, enlaces, imágenes y tablas. También cubre la estructura básica de un documento HTML y una estructura más avanzada utilizando etiquetas semánticas.

Cargado por

Herlindo Benitez
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
10 vistas

Guía HTML

Este documento explica los conceptos básicos de HTML y proporciona ejemplos de etiquetas comunes como encabezados, párrafos, enlaces, imágenes y tablas. También cubre la estructura básica de un documento HTML y una estructura más avanzada utilizando etiquetas semánticas.

Cargado por

Herlindo Benitez
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/ 6

# Guía Básica de HTML

HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear
páginas web. Esta guía básica te ayudará a comprender los conceptos fundamentales de
HTML y te permitirá crear tu primera página web simple.

## Estructura Básica de un Documento HTML

Todo documento HTML comienza con la declaración del tipo de documento, seguida por las
etiquetas HTML básicas que estructuran el contenido de la página.

```html

<!DOCTYPE html>

<html>

<head>

<title>Título de la Página</title>

</head>

<body>

<h1>Encabezado Principal</h1>

<p>Este es un párrafo de ejemplo.</p>

</body>

</html>

```

### Explicación de las etiquetas:

1. `<!DOCTYPE html>`: Declara el tipo de documento y la versión de HTML (en este caso,
HTML5).

2. `<html>`: Etiqueta raíz que engloba todo el contenido del documento.

3. `<head>`: Contiene metadatos sobre el documento, como el título y enlaces a archivos


CSS.
4. `<title>`: Define el título de la página que aparece en la pestaña del navegador.

5. `<body>`: Contiene el contenido visible de la página web.

6. `<h1>`: Representa un encabezado de nivel 1.

7. `<p>`: Define un párrafo de texto.

## Etiquetas Comunes de HTML

### Encabezados

HTML proporciona seis niveles de encabezados, desde `<h1>` (más importante) hasta
`<h6>` (menos importante).

```html

<h1>Encabezado 1</h1>

<h2>Encabezado 2</h2>

<h3>Encabezado 3</h3>

<h4>Encabezado 4</h4>

<h5>Encabezado 5</h5>

<h6>Encabezado 6</h6>

```

### Párrafos y Texto

```html

<p>Este es un párrafo de ejemplo.</p>

<p><strong>Texto en negrita</strong></p>

<p><em>Texto en cursiva</em></p>

```
### Enlaces

Para crear enlaces a otras páginas o sitios web, se utiliza la etiqueta `<a>` con el atributo
`href`.

```html

<a href="https://www.example.com">Visita Example.com</a>

```

### Imágenes

Para insertar imágenes, se utiliza la etiqueta `<img>` con los atributos `src` y `alt`.

```html

<img src="ruta/de/la/imagen.jpg" alt="Descripción de la imagen">

```

### Listas

#### Listas no ordenadas (bulleted)

```html

<ul>

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

</ul>

```
#### Listas ordenadas (numeradas)

```html

<ol>

<li>Primer elemento</li>

<li>Segundo elemento</li>

<li>Tercer elemento</li>

</ol>

```

### Tablas

```html

<table>

<tr>

<th>Encabezado 1</th>

<th>Encabezado 2</th>

</tr>

<tr>

<td>Celda 1</td>

<td>Celda 2</td>

</tr>

<tr>

<td>Celda 3</td>

<td>Celda 4</td>

</tr>

</table>

```
### Formularios

```html

<form action="/enviar-datos" method="post">

<label for="nombre">Nombre:</label>

<input type="text" id="nombre" name="nombre">

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

</form>

```

## Estructura Avanzada

Para estructurar mejor el contenido, HTML5 introduce etiquetas semánticas como


`<header>`, `<footer>`, `<section>`, `<article>`, y `<nav>`.

```html

<!DOCTYPE html>

<html>

<head>

<title>Mi Página Web</title>

</head>

<body>

<header>

<h1>Bienvenido a Mi Página Web</h1>

</header>

<nav>

<ul>

<li><a href="#inicio">Inicio</a></li>

<li><a href="#acerca">Acerca</a></li>
<li><a href="#contacto">Contacto</a></li>

</ul>

</nav>

<section>

<article>

<h2>Artículo 1</h2>

<p>Contenido del artículo 1.</p>

</article>

<article>

<h2>Artículo 2</h2>

<p>Contenido del artículo 2.</p>

</article>

</section>

<footer>

<p>Derechos reservados &copy; 2024</p>

</footer>

</body>

</html>

```

## Conclusión

Esta guía cubre los aspectos básicos de HTML. Con esta base, puedes comenzar a crear tus
propias páginas web y explorar más características avanzadas y técnicas de HTML. Recuerda
que la práctica es clave para mejorar tus habilidades en desarrollo web. ¡Buena suerte!

También podría gustarte