Ofimática
Centro de Bachillerato Tecnológico Agropecuario No. 093
HTML
Es un lenguaje de marcado, lo que significa que usa etiquetas para definir
diferentes partes del contenido de una página. Con HTML podemos estructurar un
sitio web en secciones, encabezados, párrafos, imágenes y enlaces. Cada uno de
estos elementos permite que el navegador muestre la página correctamente y se
usable por todos. En otras palabras, sin HTML, no existiría internet tal y como lo
conocemos.
Para aprender HTML no necesitas conocimientos avanzados; solo un editor de
texto y algo de práctica. Si no tienes uno, puedes explorar nuestra guía de editores
HTML gratuitos para elegir el que más te convenga.
Estructura HTML Básica
Todo archivo HTML tiene una estructura básica, similar a la de una carta o
documento, donde cada parte tiene un propósito claro. Veamos un ejemplo simple
de la estructura principal de un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página</title>
</head>
<body>
<h1>¡Bienvenido a mi página web!</h1>
<p>Este es un ejemplo de un párrafo en HTML.</p>
</body>
</html>
1
Ofimática
En este ejemplo:
<!DOCTYPE html> indica al navegador que el documento es HTML5.
<html> es la etiqueta que contiene todo el código HTML.
<head> incluye metadatos y configuraciones, como el título (<title>) de la
página.
<body> contiene el contenido visible para los visitantes, como textos, imágenes
y enlaces.
Las 10 etiquetas HTML básicas para principiantes
Estas son las etiquetas más comunes en HTML que puedes comenzar a usar de
inmediato y que debes conocer.
1. Encabezados (<h1> a <h6>)
Los encabezados organizan el contenido en secciones. En HTML hay seis niveles
de encabezados (<h1> a <h6>), siendo <h1> el más importante.
<h1>Encabezado Principal</h1>
<h2>Subencabezado</h2>
2. Párrafos (<p>)
Se utiliza para crear bloques de texto. Es ideal para formatear el contenido textual
en secciones de lectura.
<p>Este es un párrafo en HTML.</p>
3. Enlaces (<a>)
Permiten enlazar otras páginas o documentos. Aquí un ejemplo:
<a href="[Link] de Hosting</a>
4. Imágenes (<img>)
Las imágenes añaden atractivo visual. Para incluirlas, usa <img> con el
atributo src que indica el archivo de la imagen.
<img src="[Link]" alt="Descripción de la imagen">
2
Ofimática
5. Listas (<ul>, <ol>, <li>)
Las listas permiten organizar la información de manera clara. Pueden ser
ordenadas (<ol>) o desordenadas (<ul>).
<ul>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
</ul>
6. Divisiones (<div>)
<div> se usa para agrupar contenido y es clave para crear secciones en el diseño
de la página.
<div>
<h2>Sección de contenido</h2>
<p>Contenido de la sección.</p>
</div>
7. Meta (<meta>)
Esta etiqueta proporciona información sobre la página a los motores de búsqueda
y navegadores. Es clave para optimizar el SEO de tu sitio.
<meta charset="UTF-8">
<meta name="description" content="Descripción de la página">
8. Span (<span>)
<span> es útil para aplicar estilos a pequeñas partes de texto dentro de otras
etiquetas, sin que interrumpa el flujo del contenido.
<p>Este es un <span style="color:red;">texto resaltado</span> en HTML.</p>
3
Ofimática
9. Input (<input>)
<input> es una etiqueta versátil para crear campos de entrada en formularios,
como casillas de texto o botones.
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<input type="submit" value="Enviar">
</form>
10. Nav (<nav>)
<nav> agrupa enlaces de navegación, ideal para crear menús o barras de
navegación.<nav>
<a href=»#inicio»>Inicio</a> |
<a href=»#servicios»>Servicios</a> |
<a href=»#contacto»>Contacto</a>
</nav>
Ejemplos de Uso de los Códigos HTML Básicos
Para poner en práctica los códigos HTML básicos, aquí tienes varios ejemplos
detallados con explicaciones para cada elemento. Estos ejemplos son útiles para
aprender a estructurar formularios, tablas, enlaces, y mucho más en tu sitio web.
Ejemplo 1: Formulario de Contacto Completo
Este formulario simple permite al usuario enviar su nombre y correo electrónico.
<form action="/enviar">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<br>
4
Ofimática
<label for="correo">Correo:</label>
<input type="email" id="correo" name="correo">
<br>
<input type="submit" value="Enviar">
</form>
<form action="/enviar">: Define un formulario y especifica la URL donde se
enviarán los datos al hacer clic en «Enviar».
<label for="nombre">: Crea una etiqueta para el campo de entrada
«nombre», mejorando la accesibilidad.
<input type="text" id="nombre" name="nombre">: Crea un campo de texto
donde el usuario puede escribir su nombre.
<input type="email" id="correo" name="correo">: Añade un campo donde el
usuario puede ingresar su correo electrónico; se valida automáticamente
para formatos de email.
<input type="submit" value="Enviar">: Crea el botón para enviar los datos
del formulario.
Ejemplo 2: Tabla de Productos
Esta tabla muestra una lista de productos con sus respectivos precios.
<table>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Producto 1</td>
<td>€10</td>
5
Ofimática
</tr>
<tr>
<td>Producto 2</td>
<td>€15</td>
</tr>
</table>
<table>: Inicia la tabla.
<tr>: Define una fila de la tabla.
<th>: Indica el encabezado de una columna; en este caso, «Producto» y
«Precio».
<td>: Define una celda de datos en cada fila, donde se muestra el nombre
del producto y su precio.
Ejemplo 3: Enlace con Descripción y Estilos
Este ejemplo muestra cómo crear un enlace con un título descriptivo y agregar
estilo básico.
<a href="[Link] title="Ir a Loading" style="color:blue; text-
decoration:none;">Visita Loading</a>
<a href="[Link] Crea un enlace hacia el sitio
especificado.
title="Ir a Loading": Al pasar el ratón sobre el enlace, muestra un mensaje
emergente con esta descripción.
style="color:blue; text-decoration:none;": Aplica un estilo al enlace,
cambiando el color del texto y eliminando el subrayado.
Ejemplo 4: Lista Ordenada y Desordenada
Estas listas organizan la información en formato de lista numerada (ordenada) y
de lista de puntos (desordenada).
<ol>
<li>Paso 1: Abrir el editor</li>
<li>Paso 2: Escribir código HTML</li>
6
Ofimática
<li>Paso 3: Guardar el archivo</li>
</ol>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol> y <ul>: Inician listas ordenadas y desordenadas, respectivamente.
<li>: Cada ítem de la lista; en la ordenada se muestra con números y en la
desordenada con puntos.
Ejemplo 5: Navegación con la Etiqueta <nav>
Este ejemplo muestra un menú de navegación que agrupa varios enlaces internos.
<nav>
<a href="#inicio">Inicio</a> |
<a href="#servicios">Servicios</a> |
<a href="#contacto">Contacto</a>
</nav>
<nav>: Define una sección de navegación que puede contener enlaces
internos o externos.
<a href="#inicio">: Cada enlace dentro del <nav> lleva al usuario a una
sección específica dentro de la página (anclajes internos).
Ejemplo 6: Uso de <span> para Resaltar Texto
7
Ofimática
Este ejemplo muestra cómo resaltar una parte específica de texto dentro de un
párrafo usando <span>.
<p>Este es un ejemplo de <span style="color: red;">texto destacado</span> en
HTML.</p>
<p>: Inicia un párrafo.
<span style="color: red;">: Utiliza <span> para aplicar un estilo al texto
«texto destacado», cambiando su color a rojo.
Ejemplo 7: Meta Descripción para SEO
Este fragmento de código muestra cómo agregar una descripción para los motores
de búsqueda.
<head>
<meta name="description" content="Esta es una página de ejemplo para aprender
HTML básico.">
</head>
<meta name="description">: Proporciona una descripción breve de la
página, ayudando a los motores de búsqueda a comprender el contenido y
mejorar su SEO.
Cómo usar HTML para mejorar la experiencia del usuario
La simplicidad de HTML permite que los usuarios naveguen e interactúen con tu
sitio web de manera intuitiva. Incorporar códigos HTML básicos bien
estructurados facilita la carga de la página y mejora la accesibilidad.
También es importante recordar que, para optimizar tu sitio, es necesario que esté
alojado en un hosting web que te ofrezca todo lo que necesitas para que tu
proyecto web funcione correctamente.
En Loading te ofrecemos un servicio de alojamiento web con un soporte 24/7,
con SSL gratis, y copias de seguridad incluidas y siempre al mejor precio
posible.
Consejos para empezar a crear tu propio código HTML
8
Ofimática
Practica regularmente: La mejor forma de aprender HTML es
experimentando con diferentes etiquetas y estructuras.
Usa un editor adecuado: Herramientas como Visual Studio
Code o Notepad++ pueden ayudarte a escribir y organizar tu código de
forma más eficiente.
Consulta tutoriales y guías: Existen numerosos tutoriales y recursos en
línea, como nuestra guía para principiantes de HTML.
Comprueba el diseño en diferentes dispositivos:
Usa etiquetas HTML para adaptar el contenido y hacerlo visible
correctamente en ordenadores y móviles.
Optimiza el SEO:
Etiquetas como <title>, <meta>, y <header> ayudan a los motores de
búsqueda a entender el contenido de tu sitio y mejorar tu posicionamiento.
Conclusión
Conocer los códigos HTML básicos es muy útil, aunque no te vayas a dedicar
expresamente al desarrollo web. Si vas a crear sitios con algún CMS o
simplemente vas a realizar envíos de email marketing, es muy probable que
tengas que lidiar con código HTML en algún momento.
Así que conocer las etiquetas HTML básicas te ayudará muchísimo en muchas
ocasiones y si lo que quieres es crear una página web ya es algo obligado para
tener una buena base.
9
Ofimática
10