Etiquetas para estructurar texto en HTML - 3 parte

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

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>

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

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>
<title>Mi primera página web</title>

</head>
<body>
<ol>
<li> Primera voz del menú
<li> Segunda voz del menú
<li> Tercera voz del menú
</ol>
</body>
</html>

Ordenación con letras mayúsculas:
<ol type=A>
</ol>
<!DOCTYPE html>
<html>
<head>
página -->
</head>
<body>
<ol type=A>
</ol>
</body>
</html>

Ordenación con letras minúsculas:
<ol type=a>
</ol>
<!DOCTYPE html>
<html>
<head>
página -->
</head>
<body>
<ol type=a>
</ol>
</body>
</html>

Ordenación con números romanos en mayúscula:
<ol TYPE=I>
</ol>
<!DOCTYPE html>
<html>
<head>
página -->
</head>
<body>
<ol type=I>
</ol>
</body>
</html>

Ordenación con números romanos en minúscula
(romanitos):
<ol TYPE=i>
</ol>
<!DOCTYPE html>
<html>
<head>
página -->
</head>
<body>
<ol type=i>
</ol>
</body>
</html>

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>
</ul>
<!DOCTYPE html>
<html>
<head>
página -->
</head>
<body>
<ul>
</ul>
</body>
</html>

Los círculos sólidos de la lista anterior se obtienen con disc:
<ul type=disc>
</ul>
<!DOCTYPE html>
<html>
<head>
página -->
</head>
<body>
<ul type=disc>
</ul>
</body>
</html>

El atributo circle imposta circunferencias:
<ul type=circle>
</ul>
<!DOCTYPE html>
<html>
<head>
página -->
</head>
<body>
<ul type=circle>
</ul>
</body>
</html>

El atributo square imposta listas definidas por cuadrados
sólidos:
<ul type=square>
</ul>
<!DOCTYPE html>
<html>
<head>
página -->
</head>
<body>
<ul type=square>
</ul>
</body>
</html>

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

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

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>

</head>
<body>
<img src="imagenes/imagen1.gif">
</body>
</html>
<img src="http://www.aprenderaprogramar.com/templates/apr02062010/images/logo.png">

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>
</head>
<body>
<img src="imagenes/imagen1.gif alt="La contaminacion">
</body>
</html>

Atributo title
<!DOCTYPE html>
<html>
<head>
</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.

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>
</head>
<body>
title="la contaminacion width="10%">
</body>
</html>

Atributo height (alto)
Al igual que el atributo width,
es opcional. Este atributo
indica el alto de la imagen.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
title="la contaminacion height="15%" width="10%">
</body>
</html>

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>
</head>
<body>
title="la contaminacion height="15%" width="10%"
border="10">
</body>
</html>

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>
</head>
<body>
<figure>
title="la contaminacion height="15%" width="10%"
border="10">
</figure>
</body>
</html>

Etiquetas para estructurar texto en HTML - 3 parte

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Etiquetas para estructurar texto en HTML - 3 parte

Más de Wendy Navia Chambi

Último

Etiquetas para estructurar texto en HTML - 3 parte