Scribd
Cargar
5 vistas6 páginas

Curso Práctico de HTML

Curso Práctico de HTML

Cargado por

Alberto Triana
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
5 vistas6 páginas

Curso Práctico de HTML

Curso Práctico de HTML

Cargado por

Alberto Triana
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

Curso Práctico de HTML

Introducción

HTML (HyperText Markup Language) es el lenguaje base para crear páginas web. Este curso está
diseñado para aprender HTML desde cero, con ejemplos y actividades prácticas.

Lección 1: Estructura Básica de HTML

Código Base:

<!DOCTYPE html>

<html>

<head>

<title>Mi primera página</title>

</head>

<body>

<h1>¡Hola, mundo!</h1>

</body>

</html>

Actividad:

1. Crea un archivo llamado index.html.

2. Escribe el código anterior y ábrelo en tu navegador.

Lección 2: Encabezados y Párrafos

Ejemplo:

<h1>Encabezado 1</h1>

<h2>Encabezado 2</h2>

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

<p>Otro párrafo más.</p>

Actividad:

1. Agrega diferentes niveles de encabezados (<h1> a <h6>).

2. Escribe al menos tres párrafos de texto sobre un tema que te interese.


Lección 3: Enlaces e Imágenes

Ejemplo:

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

<img src="https://via.placeholder.com/150" alt="Imagen de ejemplo">

Actividad:

1. Crea un enlace a tu sitio web favorito.

2. Agrega una imagen usando una URL.

Lección 4: Listas

Ejemplo:

Lista Desordenada:

<ul>

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

</ul>

Lista Ordenada:

<ol>

<li>Primer paso</li>

<li>Segundo paso</li>

<li>Tercer paso</li>

</ol>

Actividad:

1. Crea una lista desordenada con tus hobbies.

2. Haz una lista ordenada con los pasos para preparar una receta.

Lección 5: Tablas

Ejemplo:
<table border="1">

<tr>

<th>Nombre</th>

<th>Edad</th>

</tr>

<tr>

<td>Juan</td>

<td>25</td>

</tr>

<tr>

<td>María</td>

<td>30</td>

</tr>

</table>

Actividad:

1. Crea una tabla con información de tres amigos (nombre, edad, y ciudad).

Lección 6: Formularios

Ejemplo:

<form action="/submit" method="post">

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

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

<label for="email">Correo:</label>

<input type="email" id="email" name="email">

<button type="submit">Enviar</button>

</form>

Actividad:
1. Crea un formulario con campos para nombre, correo y un botón de envío.

Lección 7: Proyecto Final

Desafío:

1. Crea una página web con:

o Un título principal.

o Un párrafo explicando el propósito de la página.

o Una lista desordenada y una ordenada.

o Una tabla con datos ficticios.

o Un formulario de contacto.

2. Dale estilo básico con atributos style en las etiquetas.

Ejemplo Final:

<!DOCTYPE html>

<html>

<head>

<title>Mi Proyecto Final</title>

</head>

<body>

<h1>Bienvenido a mi página</h1>

<p>Esta página es un ejemplo práctico de lo que aprendí en el curso de HTML.</p>

<h2>Mis Hobbies</h2>

<ul>

<li>Leer</li>

<li>Programar</li>

<li>Viajar</li>

</ul>

<h2>Receta Favorita</h2>
<ol>

<li>Precalentar el horno.</li>

<li>Mezclar los ingredientes.</li>

<li>Hornear por 30 minutos.</li>

</ol>

<h2>Tabla de Contactos</h2>

<table border="1">

<tr>

<th>Nombre</th>

<th>Teléfono</th>

</tr>

<tr>

<td>Juan</td>

<td>123456789</td>

</tr>

<tr>

<td>María</td>

<td>987654321</td>

</tr>

</table>

<h2>Formulario de Contacto</h2>

<form action="/submit" method="post">

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

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

<label for="email">Correo:</label>

<input type="email" id="email" name="email">


<button type="submit">Enviar</button>

</form>

</body>

</html>

También podría gustarte