Diseño Web I
HTML: Conceptos Básicos y Etiquetas Fundamentales
¿Qué es HTML?
HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear
páginas web. No es un lenguaje de programación, sino un lenguaje de marcado que utiliza
etiquetas para estructurar y dar significado al contenido.
Estructura Básica de un Documento HTML
Todo documento HTML tiene una estructura fundamental:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Primera Página</title>
</head>
<body>
<!-- Aquí va el contenido visible -->
</body>
</html>
<!DOCTYPE html>: Declara que el documento es HTML5
<html>: Elemento raíz que contiene todo el documento
<head>: Contiene metadatos e información no visible
<body>: Contiene el contenido visible de la página
Etiquetas Básicas de Texto
Encabezados
Los encabezados van del <h1> al <h6>, donde h1 es el más importante:
<h1>Encabezado Principal</h1>
<h2>Encabezado Secundario</h2>
<h3>Encabezado Terciario</h3>
Párrafos
<p>Este es un párrafo de texto. HTML automáticamente añade espacio
antes y después del párrafo.</p>
Formato de Texto
<strong>Texto en negrita (importante)</strong>
<b>Texto en negrita (visual)</b>
<em>Texto en cursiva (énfasis)</em>
<i>Texto en cursiva (visual)</i>
<u>Texto subrayado</u>
<mark>Texto resaltado</mark>
Diseño Web I
Etiquetas de Listas
Lista No Ordenada
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ul>
Lista Ordenada
<ol>
<li>Primer paso</li>
<li>Segundo paso</li>
<li>Tercer paso</li>
</ol>
Enlaces e Imágenes
Enlaces
<a href="[Link] Ejemplo</a>
<a href="[Link]">Enlace interno</a>
<a href="[Link] correo</a>
Imágenes
<img src="[Link]" alt="Descripción de la imagen">
Etiquetas de Contenedor
Div y Span
<div>
<p>Un div es un contenedor de bloque</p>
</div>
<p>Texto con <span style="color: red;">parte resaltada</span> usando
span</p>
Tablas
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>25</td>
</tr>
<tr>
Diseño Web I
<td>María</td>
<td>30</td>
</tr>
</tbody>
</table>
Formularios
<form action="/enviar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Enviar</button>
</form>
Etiquetas Semánticas HTML5
HTML5 introdujo etiquetas semánticas que dan significado al contenido:
<header>Encabezado del sitio</header>
<nav>Menú de navegación</nav>
<main>Contenido principal</main>
<article>Artículo independiente</article>
<section>Sección de contenido</section>
<aside>Contenido lateral</aside>
<footer>Pie de página</footer>
Ejemplo Completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Blog Personal</title>
</head>
<body>
<header>
<h1>Mi Blog</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#articulos">Artículos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Primer Artículo</h2>
<p>Este es el contenido de mi primer artículo. Aquí puedo
escribir sobre <strong>temas importantes</strong>.</p>
<img src="[Link]" alt="Foto del artículo">
</article>
</main>
Diseño Web I
<footer>
<p>© 2024 Mi Blog. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Consejos Importantes
1. Cierre las etiquetas: La mayoría de etiquetas necesitan apertura y cierre
(<p></p>)
2. Indentación: Mantén tu código ordenado con sangría adecuada
3. Atributos: Muchas etiquetas aceptan atributos como class, id, style
4. Semántica: Usa las etiquetas apropiadas según el significado del contenido
5. Accesibilidad: Usa atributos como alt en imágenes y label en formularios