etiquetas para estructurar texto en html - 3 parte

Etiquetas para estructurar texto

Lic. Wendy Navia Ch.

ADSIBAgencia para el Desarrollo de la Sociedad de la Información en Bolivia

Email: [email protected]://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 ordenadasEtiqueta <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></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>

<li> Primera voz del menú

<li> Segunda voz del menú

<li> Tercera voz del menú

</ol>




<ol type=A><li> Primera voz del menú<li> Segunda voz del menú<li> Tercera voz del menú

</ol></body></html>

Ordenación con letras minúsculas:

<ol type=a>




</ol>




<ol type=a><li> Primera voz del menú<li> Segunda voz del menú<li> Tercera voz del menú

</ol></body></html>

Ordenación con números romanos en mayúscula:

<ol TYPE=I>




</ol>




<ol type=I><li> Primera voz del menú<li> Segunda voz del menú<li> Tercera voz del menú

</ol></body></html>

Ordenación con números romanos en minúscula (romanitos):

<ol TYPE=i>




</ol>




<ol type=i><li> Primera voz del menú<li> Segunda voz del menú<li> Tercera voz del menú

</ol></body></html>

Listas desordenadasEtiqueta <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>




<ul><li> Primera voz del menú<li> Segunda voz del menú<li> Tercera voz del menú

</ul></body></html>

Los círculos sólidos de la lista anterior se obtienen con disc:

<ul type=disc>




</ul>




<ul type=disc><li> Primera voz del menú<li> Segunda voz del menú<li> Tercera voz del menú

</ul></body></html>

El atributo circle imposta circunferencias:

<ul type=circle>




</ul>




<ul type=circle><li> Primera voz del menú<li> Segunda voz del menú<li> Tercera voz del menú

</ul></body></html>

El atributo square imposta listas definidas por cuadrados sólidos:

<ul type=square>




</ul>




<ul type=square><li> Primera voz del menú<li> Segunda voz del menú<li> Tercera voz del menú

</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.


<meta charset="UTF-8"/><title>Mi primera página web</title>

</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á.



</head><body>

<img src="imagenes/imagen1.gif alt="La contaminacion">

</body></html>

Atributo title



</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.



</head><body>

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



</head><body>

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



</head><body>

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



</head><body>

<figure><img src="imagenes/imagen1.gif alt="La contaminacion"

title="la contaminacion height="15%" width="10%" border="10">

</figure></body></html>

etiquetas para estructurar texto en html - 3 parte

Technology