1.
Estructura de una Página HTML
Una página HTML tiene una estructura básica compuesta por etiquetas principales:
<!DOCTYPE html>
<html>
<head>
<!-- Contenido del título-->
</head>
<body>
<!-- Contenido de la página -->
</body>
</html>
● <!DOCTYPE html>: Define el tipo de documento.
● <html>: Elemento raíz de una página HTML.
● <head>: Contiene metadatos e información sobre el documento.
● <body>: Contiene el contenido visible para el usuario.
2. El Título de la Página
● La etiqueta <title> define el título de la página que aparece en la pestaña del
navegador y en resultados de búsqueda.
<title>Mi Página</title>
3. Metadatos de una Página
Los metadatos se definen en el <head> mediante etiquetas <meta>:
<meta charset="UTF-8">
<meta name="description" content="Ejemplo de HTML">
<meta name="author" content="Tu Nombre">
● charset: Especifica la codificación de caracteres.
● description: Proporciona una descripción breve de la página.
● author: Define el autor de la página.
4. La Codificación de Caracteres
Se define con <meta charset="UTF-8"> y permite incluir caracteres especiales como á, ñ,
o símbolos como €.
5. El Elemento DOCTYPE
<!DOCTYPE html> especifica la versión de HTML que estás utilizando. Para HTML5,
simplemente se usa:
<!DOCTYPE html>
6. Elementos Básicos del Cuerpo
<body>
<!-- Encabezados -->
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<!-- Párrafos -->
<p>Este es un párrafo de ejemplo.</p>
<!-- Saltos de línea -->
Primera línea.<br>Segunda línea.
</body>
¡Por supuesto! Aquí está el apartado actualizado con el nuevo punto 6.2 sobre saltos de línea.
7. Saltos de línea
Los saltos de línea se insertan con la etiqueta <br> y no añade espacio adicional entre líneas,
a diferencia de los párrafos (<p>).
<body>
<h1>Ejemplo de Saltos de Línea</h1>
<p>Esta es la primera línea de texto.<br>Y esta es la segunda línea, en la misma
sección.</p>
<!-- Combinando con otros elementos -->
<p>
Línea 1.<br>
Línea 2.<br>
Línea 3.
</p>
<!-- Saltos múltiples -->
Texto antes del salto.<br><br>
Texto después de dos saltos de línea.
</body>
8. Líneas Horizontales
Las líneas horizontales (<hr>) se utilizan para dividir secciones visualmente.
● Por defecto, se representan como líneas grises y delgadas.
● Se pueden personalizar con atributos como color, width o align (aunque es mejor
hacerlo con CSS).
<body>
<h1>Sección 1</h1>
<p>Contenido de la primera sección.</p>
<hr> <!-- Línea horizontal -->
<h1>Sección 2</h1>
<p>Contenido de la segunda sección.</p>
<!-- Línea horizontal personalizada con CSS -->
<hr style="border: 1px solid black; width: 80%;">
</body>
9. Añadir Comentarios
Los comentarios permiten dejar notas en el código que no se muestran en el navegador:
<!-- Esto es un comentario -->
<p>Texto visible para el usuario.</p>
10. Formatos Básicos de Texto
En HTML, algunos caracteres tienen un significado especial (como <, > o &). Para incluirlos
como texto en el documento, se deben usar entidades HTML.
Caracter Entidad HTML Descripción
< < Menor que (<)
> > Mayor que (>)
& & Ampersand (&)
" " Comillas dobles (")
' ' Comillas simples (')
<body>
<h1>Ejemplo de Caracteres Reservados</h1>
<!-- Mostrar los caracteres <, >, & como texto -->
<p>Este es un ejemplo con <b>HTML</b>.</p>
<p>Uso del símbolo de ampersand: &</p>
<!-- Mostrar comillas dentro de una cadena -->
<p>Esto está entre comillas dobles: "Hola".</p>
<p>Esto está entre comillas simples: 'Hola'.</p>
</body>
11. Añadir Etiquetas Center
Para centrar texto:
<center>Texto centrado</center>
12. Formatos Básicos de Texto
a. Negrita, Cursiva, Tachado
● Negrita: <b>Texto en negrita</b> o <strong>Texto importante</strong>.
● Cursiva: <i>Texto en cursiva</i> o <em>Énfasis</em>.
● Tachado: <s>Texto tachado</s>.
b. Subíndice y Superíndice
● Subíndice: <sub>Subíndice</sub>.
● Superíndice: <sup>Superíndice</sup>.
c. Subrayado
<u>Texto subrayado</u>
d. Cambiar el Tamaño del Texto
● Aumentar: <big>Texto más grande</big>.
● Disminuir: <small>Texto más pequeño</small>.
13. Propiedades de Texto
a. Color de Fondo y Texto
Se puede cambiar el color del fondo y del texto de la página con el atributo style en la
etiqueta <body>:
<body style="background-color: lightblue; color: black;">
<p>Este texto es negro sobre fondo azul claro.</p>
</body>
b. Cambiar el Tamaño del Texto
Usando la etiqueta <font> (obsoleta):
html
Copiar código
<font size="4">Texto con tamaño 4</font>
Usando encabezados (<h1> a <h6>): Los encabezados tienen tamaños predeterminados
más grandes:
<h1>Texto grande</h1>
<h2>Texto un poco más pequeño</h2>
<h6>Texto más pequeño</h6>
Usando etiquetas <big> y <small>:
<p>Texto <big>más grande</big> y <small>más pequeño</small> dentro del
mismo párrafo.</p>
14. Listas
a. Listas no ordenadas
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
b. Listas ordenadas
<ol>
<li>Primero</li>
<li>Segundo</li>
</ol>
c. Listas de definición
<dl>
<dt>Término</dt>
<dd>Definición</dd>
</dl>
15. Imágenes
a. Insertar Imágenes
<img src="imagen.jpg" alt="Descripción" width="300" height="200">
b. Alineación y Espaciado
<img src="imagen.jpg" align="left" hspace="10" vspace="10">
16. Enlaces
a. Enlaces Internos y Externos
● Interno: <a href="pagina.html">Página Interna</a>.
● Externo: <a href="https://www.ejemplo.com">Ejemplo</a>.
b. Abrir en Ventanas Específicas
<a href="https://www.ejemplo.com" target="_blank">Abrir en nueva pestaña</a>
17. Colores de Enlaces
Los enlaces pueden personalizarse con CSS:
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
18. Tablas
a. Crear Tablas
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</table>
b. Bordes
<table border="1">
c. Título de Tabla
<caption>Título de la Tabla</caption>
d. Alineación, Fondo y Bordes
<td align="center" bgcolor="lightgrey" style="border: 1px solid black;">
e. Celdas que Abarcan Varias Filas/Columnas
<td rowspan="2">Abarca 2 filas</td>
<td colspan="2">Abarca 2 columnas</td>
19. Formularios
● Cajas de texto:
<input type="text" name="nombre">
● Cajas de texto para claves:
<input type="password" name="clave">
● Botones de opción (radio):
<input type="radio" name="genero" value="M">Masculino
<input type="radio" name="genero" value="F">Femenino
● Casillas de verificación (checkbox):
<input type="checkbox" name="intereses" value="musica">Música
● Botones de formulario:
<input type="submit" value="Enviar">
● Campos ocultos:
<input type="hidden" name="token" value="12345">
● Área de texto:
<textarea name="mensaje"></textarea>
● Listas desplegables:
<select>
<option value="op1">Opción 1</option>
<option value="op2">Opción 2</option>
</select>
