Etiquetas para estructurar texto en HTML - 3 parte
1. Etiquetas para estructurar texto
Lic. Wendy Navia Ch.
ADSIB
Agencia para el Desarrollo de la Sociedad de la Información en Bolivia
Email: ncwi0509@gmail.com
http://www.adsib.gob.bo
3 PARTE
2. Necesitamos tener nuestra estructura base
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"/>
<title>Título de la Página
</title>
</head>
<body>
Aquí va el contenido de la página
</body>
</html>
3. LISTAS
Las listas representan uno de los instrumentos más
difundidos para organizar la información dentro de los
sitios web. Una de sus características principales es la
de proporcionar un cuadro claro y sintético del tema
tratado.
HTML pone a disposición distintos tipos de listas. A
continuación, analizaremos cada uno de ellos.
● Listas ordenadas
● Listas desordenadas
4. Listas ordenadas
Etiqueta <ol> </ol>
Las listas ordenadas constan de una sola marca de
apertura y cierre <OL></OL> y tantas marcas de
lista como hay en el menú <LI>. La sintaxis correcta
para elaborar listas ordenadas es:
<OL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la
página -->
</head>
<body>
<ol>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ol>
</body>
</html>
5. Ordenación con letras mayúsculas:
<ol type=A>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la
página -->
</head>
<body>
<ol type=A>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ol>
</body>
</html>
6. Ordenación con letras minúsculas:
<ol type=a>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la
página -->
</head>
<body>
<ol type=a>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ol>
</body>
</html>
7. Ordenación con números romanos en mayúscula:
<ol TYPE=I>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la
página -->
</head>
<body>
<ol type=I>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ol>
</body>
</html>
8. Ordenación con números romanos en minúscula
(romanitos):
<ol TYPE=i>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la
página -->
</head>
<body>
<ol type=i>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ol>
</body>
</html>
9. Listas desordenadas
Etiqueta <ul> </ul>
Las listas desordenadas constan de una sola marca de
apertura y cierre <UL></UL> y tantas marcas de lista como
voces hay que ordenar <LI>. La sintaxis correcta para
definir una lista desordenada es:
<ul>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la
página -->
</head>
<body>
<ul>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ul>
</body>
</html>
10. Los círculos sólidos de la lista anterior se obtienen con disc:
<ul type=disc>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la
página -->
</head>
<body>
<ul type=disc>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ul>
</body>
</html>
11. El atributo circle imposta circunferencias:
<ul type=circle>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la
página -->
</head>
<body>
<ul type=circle>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ul>
</body>
</html>
12. El atributo square imposta listas definidas por cuadrados
sólidos:
<ul type=square>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la
página -->
</head>
<body>
<ul type=square>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ul>
</body>
</html>
13. IMAGENES
Hasta ahora hemos introducido en nuestra pagina web
solamente texto. Pero una pagina web hoy en día además de
texto tiene que tener e imágenes Un sitio web con imágenes
es mas bonito y además atractivo.
.jpg .gif .png
14. Etiqueta <img>
La etiqueta img dispone de estos atributos,
algunos obligatorios, otros opcionales y
algunos que ya no se recomienda usar
ATRIBUTO USO
src Este atributo es obligatorio
alt Este atributo requerido.
width Este atributo es opcional
height Al igual que el atributo width, es opcional.
border Este atributo es opcional
15. Atributo src
Este atributo es obligatorio e indica el nombre del
archivo de imagen (entre comillas) o la URL desde
la que se va a obtener la imagen.
Obligatorio. Si no se incluye no se mostrará
imagen alguna.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la página -->
</head>
<body>
<img src="imagenes/imagen1.gif">
</body>
</html>
<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png">
16. Atributo alt
Entre comillas podremos escribir un texto que se mostrará si
la imagen no llega a cargar, mientras se carga o, cuando
visualizando ya la imagen, pasamos el ratón por encima.
Atributo requerido, se recomienda incluirlo aunque si no se
hace la imagen se mostrará.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la página -->
</head>
<body>
<img src="imagenes/imagen1.gif alt="La contaminacion">
</body>
</html>
17. Atributo title
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la página -->
</head>
<body>
<img src="imagenes/imagen1.gif alt="La contaminacion"
title="la contaminacion">
</body>
</html>
Entre comillas podremos escribir un texto que se mostrará
cuando pasemos el puntero del mouse por la imagen.
18. Atributo width (ancho)
Este atributo es opcional pero podemos ponerlo para
especificar al navegador que muestre la imagen con un
tamaño específico. Significa “ancho de la imagen” que
vamos a representar. Si no se escribe, se carga la imagen
con el tamaño original.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la página -->
</head>
<body>
<img src="imagenes/imagen1.gif alt="La contaminacion"
title="la contaminacion width="10%">
</body>
</html>
19. Atributo height (alto)
Al igual que el atributo width,
es opcional. Este atributo
indica el alto de la imagen.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la página -->
</head>
<body>
<img src="imagenes/imagen1.gif alt="La contaminacion"
title="la contaminacion height="15%" width="10%">
</body>
</html>
20. Atributo border
Con border especificamos el ancho del
borde que rodea la imagen. Si se indica
0 equivale a “sin borde”.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la página -->
</head>
<body>
<img src="imagenes/imagen1.gif alt="La contaminacion"
title="la contaminacion height="15%" width="10%"
border="10">
</body>
</html>
21. Etiqueta figure
Se utiliza para ilustraciones fotos (sería
perfecto, por ejemplo, para pedazos de
código en blogs de programación.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la página -->
</head>
<body>
<figure>
<img src="imagenes/imagen1.gif alt="La contaminacion"
title="la contaminacion height="15%" width="10%"
border="10">
</figure>
</body>
</html>
22. Etiqueta figure
Se utiliza para ilustraciones fotos (sería
perfecto, por ejemplo, para pedazos de
código en blogs de programación.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Mi primera página web</title>
<!-- título de la cabecera de la página -->
</head>
<body>
<figure>
<img src="imagenes/imagen1.gif alt="La contaminacion"
title="la contaminacion height="15%" width="10%"
border="10">
</figure>
</body>
</html>