ÍNDICE
1 Introducción a HTML ..........................................................................................1
2 Estructura básica de una página web .................................................................1
3 Etiquetas básicas ...............................................................................................1
4 Atributos ...........................................................................................................2
5 Creación de listas ...............................................................................................4
6 Listas ordenadas con etiquetas DL ......................................................................6
7 Formularios .......................................................................................................7
8 Explicación tablas ..............................................................................................9
9 CSS: Usos básicos .............................................................................................13
9.1 CSS en hoja externa ............................................................................................ 13
9.2 CSS para toda una página (interno) ...................................................................... 14
9.3 CSS sólo para un elemento (in-line) ..................................................................... 15
9.4 Opciones básicas para mejorar la presentación de la página con CSS: ................... 15
1 Introducción a HTML
HTML es un lenguaje de marcado de hipertexto que se utiliza para crear páginas web. HTML no
es un lenguaje de programación en sí mismo, sino que define la estructura y el contenido de
un documento web. HTML utiliza etiquetas para marcar diferentes elementos en una página
web, como encabezados, párrafos y enlaces, para que los navegadores web puedan
interpretarlos y mostrarlos correctamente.
Para crear una página web en HTML, lo primero que debemos hacer es abrir un editor de texto
y crear un nuevo archivo con la extensión .html. Dentro de este archivo, debemos escribir la
estructura básica de una página web en HTML, que consiste en las siguientes etiquetas:
• <!DOCTYPE html> indica al navegador que se está usando el lenguaje HTML5.
• <html> indica el inicio del documento HTML y contiene todo el contenido de la página.
• <head> contiene información acerca del documento, como el título, los enlaces a hojas de
estilo CSS y scripts de JavaScript, entre otros, pero no es visible al usuario.
• <title> especifica el título de la página, que se muestra en la pestaña del navegador.
• <body> contiene todo el contenido visible de la página, como texto, imágenes y enlaces.
• <h1> indica un encabezado principal de la página.
• <p> indica un párrafo de texto.
2 Estructura básica de una página web
Por ejemplo, una página web básica en HTML podría tener la siguiente estructura:
3 Etiquetas básicas
<a> Se utiliza para crear enlaces a otras páginas web o a recursos externos. Por ejemplo:
<a href="https://es.wikipedia.org/wiki/HTML">HTML en Wikipedia</a>
<a href="https://www.google.es">Visita google</a>
<img> Se utiliza para insertar imágenes en una página web. Por ejemplo:
<img src="https://via.placeholder.com/150x150" alt="Ejemplo de imagen">
<img src="mi-imagen.jpg" alt="Mi imagen" width="200" height="100">
1
<!-- La etiqueta <img> es utilizada para mostrar una imagen en la página, en este caso se está
utilizando la imagen "mi-imagen.jpg" con un ancho de 200px y un alto de 100px -->
<img src="imagen.jpg" alt="Imagen de ejemplo">
<!-- La etiqueta img indica una imagen en la página, con el atributo src se indica la dirección de
la imagen y el atributo alt se utiliza para describir la imagen en caso de que no se pueda cargar
-->
<br> indica un salto de línea.
<h1>: se utiliza para definir títulos de nivel 1. (Existe hasta h6)
<p>: se utiliza para definir párrafos de texto.
<div>: se utiliza como contenedor genérico para agrupar otros elementos.
4 Atributos
Una vez que tenemos la estructura básica de nuestra página web, podemos ir añadiendo
nuevos elementos y dándoles formato mediante el uso de diferentes etiquetas HTML.
Por ejemplo, para dar formato a un texto, podemos utilizar etiquetas como:
<b> (para texto en negrita)
<i> (para texto en cursiva)
<u> (para texto subrayado)
<sup> (para texto en superíndice)
<sub> (para texto en subíndice).
2
A continuación, se expone un ejemplo de cómo aplicar los atributos de diversas formas.
<!DOCTYPE html>
<html>
<head>
<title>Mi página web</title>
</head>
<body>
<h1>Título H1</h1>
<h2> Título H2</h2>
<h3> Título H3</h3>
<h4> Título H4</h4>
<h5> Título H5</h5>
<h6> Título H6</h6>
<p><b>Párrafo en negrita </b></p>
<p><i>Párrafo en cursiva </i></p>
<p><u>Párrafo subrayado </u></p>
<p><b>Párrafo</b> con <i>atributos</i> aplicados a palabras <u>concretas</u>. </p>
<p>Este es un párrafo <br> con varias líneas<br>que se separan con la etiqueta br.</p>
</body>
</html>
Este es el resultado
3
5 Creación de listas
Para crear listas tanto ordenadas como desordenadas se pueden utilizar las etiquetas <ol> y
<ul>, respectivamente. Dentro de estas etiquetas se deben agregar elementos de lista
utilizando la etiqueta <li>.
<!-- La etiqueta <ul> es utilizada para crear una lista <b>desordenada</b>,, mientras que la
etiqueta <li> es utilizada para crear un elemento de la lista -->
<!-- La etiqueta <ol> es utilizada para crear una lista <b>ordenada</b>, mientras que la
etiqueta <li> es utilizada para crear un elemento de la lista -->
Ejemplos:
<ul>
<li>Este es un elemento de una lista no numerada (lista de viñetas) </li>
<li>Este es otro ítem</li>
<li>Y este es el último ítem de la lista</li>
</ul>
<ol>
<li>Elemento de una lista numerada </li>
<li>Este es otro ítem</li>
<li>Y este es el último ítem de la lista</li>
</ol>
RESULTADO
4
Otro ejemplo:
<h2>Etiqueta <b>li</b> </h2>
<p>La etiqueta <b>li</b>se utiliza dentro de una lista ordenada para especificar cada
uno de los elementos de la lista. También puede incluir atributos para especificar el tipo de
numeración o el orden de los elementos.</p>
<p>Ejemplo:</p>
<ol>
<li>Verduras
<ol>
<li>Zanahoria</li>
<li>Espinaca</li>
<li>Repollo</li>
</ol>
</li>
<li>Frutas
<ol>
<li>Manzana</li>
<li>Pera</li>
<li>Uva</li>
</ol>
</li>
<li>Cereales
<ol>
<li>Avena</li>
<li>Trigo</li>
<li>Maíz</li>
</ol>
</li>
</ol>
RESULTADO
5
6 Listas ordenadas con etiquetas DL
<!DOCTYPE html>
<html>
<head>
<title>Listas Ordenadas con Etiqueta DL</title>
</head>
<body>
<h1>Listas Ordenadas con Etiqueta DL</h1>
<p>La etiqueta DL (definiciones de lista) se utiliza para crear listas ordenadas con términos y su
definición correspondiente. A continuación se explican las etiquetas más utilizadas para crear
listas ordenadas con la etiqueta DL:</p>
<dl>
<dt>DT:</dt>
<dd>La etiqueta DT (término de la lista) se utiliza para agregar el término de la
lista.</dd>
<dt>DD:</dt>
<dd>La etiqueta DD (descripción de término) se utiliza para agregar la
definición correspondiente al término de la lista.</dd>
</dl>
<p>Ejemplo de uso de la etiqueta DL:</p>
6
<dl>
<dt>Perro:</dt>
<dd>Mamífero doméstico perteneciente a la familia de los cánidos.</dd>
<dt>Gato:</dt>
<dd>Mamífero doméstico perteneciente a la familia de los felinos.</dd>
<dt>Ave:</dt>
<dd>Animal vertebrado que posee plumas y puede volar.</dd>
</dl>
</body>
</html>
RESULTADO
7 Formularios
Para crear un formulario en HTML, necesitarás utilizar la etiqueta <form>. Dentro de esta
etiqueta, puedes añadir diferentes elementos de formulario, como campos de texto, botones,
casillas de verificación y menús desplegables.
A continuación, te muestro algunos ejemplos de cómo se pueden añadir diferentes elementos
a un formulario en HTML:
7
Campo de texto: para crear un campo de texto en el que el usuario pueda escribir, puedes
utilizar la etiqueta <input type="text">. Por ejemplo:
Botón de envío: para crear un botón que permita al usuario enviar el formulario, puedes
utilizar la etiqueta <button type="submit">. Por ejemplo:
Casilla de verificación: para crear una casilla de verificación que permita al usuario seleccionar
una opción, puedes utilizar la etiqueta <input type="checkbox">. Por ejemplo:
Menú desplegable: para crear un menú desplegable que permita al usuario elegir una opción
de una lista, puedes utilizar la etiqueta <select>. Por ejemplo:
8
8 Explicación tablas
Las tablas en HTML se utilizan para mostrar datos en forma de grilla, compuesta por filas y
columnas. Son muy útiles para representar información de manera organizada y legible. La
estructura de una tabla en HTML se construye usando varias etiquetas específicas, cada una
con un propósito distinto.
Estructura Básica de una Tabla
Etiqueta <table>: Esta etiqueta es el contenedor principal y define el inicio y el fin de la tabla.
Todo el contenido de la tabla debe estar dentro de esta etiqueta.
<table>
<!-- Contenido de la tabla aquí -->
</table>
Etiqueta <tr> (Table Row): Representa una fila en la tabla. Se utiliza dentro de la etiqueta
<table> para agrupar un conjunto de celdas que se mostrarán en la misma fila.
<tr>
<!-- Celdas de la fila aquí -->
</tr>
Etiqueta <th> (Table Header): Se utiliza para definir una celda de encabezado en la tabla. Las
celdas de encabezado suelen contener texto en negrita y estar centradas para destacar que
son títulos de columnas o filas.
<th>Encabezado</th>
Etiqueta <td> (Table Data): Define una celda de datos estándar en la tabla. Cada <td>
corresponde a una celda en la que se pueden insertar datos como texto, imágenes, listas, etc.
<td>Dato</td>
Ejemplo de una Tabla Simple
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
9
<td>Dato 2</td>
</tr>
<tr>
<td>Dato 3</td>
<td>Dato 4</td>
</tr>
</table>
Ejemplos:
Ejemplo de cómo crear una tabla simple con dos filas y dos columnas:
Esto crearía una tabla con dos columnas de encabezado, "Nombre" y "Apellido", y dos filas con
dos celdas de datos cada una. El resultado se vería así:
10
Puedes usar atributos como border y style para dar formato a la tabla y a sus celdas. Por
ejemplo, para agregar un borde a la tabla y centrar el texto de las celdas, podrías usar algo
como esto:
A continuación, se muestra un ejemplo de código HTML que utiliza estas etiquetas para crear
una tabla con dos filas y dos columnas:
<table>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Pantalla</td>
<td>$100</td>
</tr>
<tr>
<td>Teclado</td>
11
<td>$25</td>
</tr>
</table>
Esto produciría una tabla que se vería así:
Es importante tener en cuenta que este es solo un ejemplo básico de cómo utilizar estas
etiquetas para crear una tabla. Existen muchas otras etiquetas y atributos que se pueden
utilizar para personalizar la apariencia y el comportamiento de las tablas en HTML.
Otro ejemplo
<!-- Por ejemplo, para crear una tabla con tres filas y dos columnas, se utilizaría el siguiente
código: -->
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
<tr>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
12
9 CSS: Usos básicos
Las hojas de estilos en cascada (CSS en inglés) permiten mejorar el aspecto de las páginas web
de una más potente que lo que permite HTML5, con mejores efectos y con la posibilidad de
generalizar todos los elementos que se quieren.
Por ejemplo, que todos los párrafos sean con un mismo tipo de letra y tamaño, que cambie el
color de una celda de una tabla cuando se pasa el ratón por encima, cambiar colores de
enlaces, etc…
Hay tres maneras de utilizar CSS:
9.1 CSS en hoja externa
Se hace todo en un archivo aparte fuera de la página web. La extensión, .CSS.
Debemos quedarnos con el nombre del archivo, por ejemplo, estilo.css.
Los códigos se ponen de esta manera:
● No hace falta ni <body> ni <head>
body {
background-color: lightblue;
h1 {
color: navy;
margin-left: 20px;
Este ejemplo pondrá el color de fondo de la página (body) en azul claro. Además, los
encabezados más grandes (h1) los pone con color azul marino y con un margen a la izquierda
de 20 píxeles.
Para poderlo usar en todas las páginas, sólo tenemos que incluir esta línea en las
páginas que queramos:
13
<link rel="stylesheet" type="text/css" href="estilo.css">
Debe estar dentro de <head> y </head>, se suele poner justo detrás del título <title>
</title>. Ejemplo de cómo se incluye en una página (ejemplo de w3c):
<!DOCTYPE html>
<html>
<head>
<title>Mi título</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
9.2 CSS para toda una página (interno)
Si no queremos usar un estilo general, o queremos mejorar un estilo general con uno más
particular en la página que estamos, podemos poner un estilo CSS sólo para la página.
En el encabezado (<head>) incluimos algo así:
<!DOCTYPE html>
<html>
<head>
<style> ← Esto es el estilo CSS interno
body {
background-color: linen;
h1 {
color: maroon;
margin-left: 40px;
14
</style> ← Aquí se acaba el CSS interno
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
En caso de que haya dos estilos (externo e interno) el interno prevalece.
9.3 CSS sólo para un elemento (in-line)
Se puede personalizar un solo elemento (una imagen o una celda concreta de una tabla, por
ejemplo) poniendo un estilo propio a ese elemento.
Se hace parecido a lo anterior, pero todos los códigos dentro de la etiqueta (por ejemplo, img
si es una imagen).
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Ojito con los puntos y comas que separan cada código…. y cuando sólo hay uno, ponerlos de
todas formas.
Es el más fuerte de las tres opciones y tiene prevalencia sobre los otros dos tipos de CSS.
La forma correcta de trabajar es empleando una hoja externa para ahorrar trabajo, y luego
recurrir a otras opciones de manera puntual.
9.4 Opciones básicas para mejorar la presentación de la página con CSS:
Ejemplo de distribución de página (Layout) de w3c
En este ejemplo podemos ver cómo repartir apartados en zonas de la página y ajustar sus
contenidos, etc… ENLACE
15
Otras opciones
Estas opciones sólo se usarían para modificar casos aislados, es mejor utilizar otras opciones
de CSS generales (CSS externo o para toda la página).
Si queremos poner un color sólido (mejor opción que la anterior):
Sería de color en código RGB (#RRGGBB, donde RR es la cantidad en rojo en hexadecimal, GG
la de verde y BB la de azul).
<body style="background-color:#E6E6FA">
Se recomienda poner un color que no destaque demasiado e impida la lectura del texto.
Además, es mejor utilizar tonos más suaves para no producir el rechazo del visitante ante
colores agresivos (fucsia, rojo, naranja, amarillo chillón…).
Colores del texto:
Para modificar los colores del texto, tendremos que incluir estas etiquetas entre <head> y
</head>
Para el color del texto en general:
<style>body{color:green}</style>
Para el color de los enlaces:
Si aún no lo hemos visitado:
<style>a:link {color: #FF0000}</style>
Si ya lo hemos visitado:
<style>a:visited {color: #FF0000}</style>
Para crear la sensación de clic, podemos modificar el color del enlace mientras estamos
haciendo clic sobre él. Se puede poner un color un poco más claro que el del enlace y quedaría
un efecto más sutil. Recibe el nombre de “link activo”.
<style>a:active {color: #0000FF}</style>
16
