etiquetas para estructurar texto en html - 3 parte
Post on 13-Apr-2017
525 Views
Preview:
TRANSCRIPT
Etiquetas para estructurar texto
Lic. Wendy Navia Ch.
ADSIBAgencia para el Desarrollo de la Sociedad de la Información en Bolivia
Email: ncwi0509@gmail.comhttp://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><!-- 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>
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>
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>
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>
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>
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>
<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>
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>
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>
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>
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>
<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">
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>
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.
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>
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>
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>
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>
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>
top related