Como sabéis, estamos en pleno tema 3 viendo cómo hacer páginas Web usando el lenguaje HTML y en clase hemos visto y usado muchas etiquetas diferentes.
Como se que podéis liaros un poco con todas ellas, os dejo aquí un resumen de todas las que hemos visto para que lo tengáis a mano o incluso lo imprimáis. Os puede venir muy bien para repasar o como guía rápida a la hora de hacer los ejercicios.
Para imprimirlo solo tenéis que copiar todo el contenido de este artículo en el Word y después imprimís pulsando el botón correspondiente.
Esqueleto o estructura de toda página web:
<html>
<head>
<title> Titulo de la página </title>
</head>
<body>
Contenido de la página
</body>
</html>
Etiquetas y atributos:
<body bgcolor=»red«> Fondo de toda la página de color rojo
<body background=»URL imagen«> El fondo de toda la página será la imagen indicada.
<br/> Salto de línea
<hr color=»red» size=»1«/> Línea horizontal de colo rojo y 1 punto de grosor
<p> …. </p> Define un párrafo. Puede tener un atributo:
- align=»left», «center», «right», «justify» (configuramos la alineación del texto de este párrafo)
<blockquote> …. </blockquote> Etiqueta para sangrar un párrafo.
<b> …. </b> Negrita
También puedes usar: <strong> …. </strong>
<i> …. </i> Cursiva
<u> …. </u> Subrayado
<s> …. </s> Tachado
<center> …. </center> Centrado
<marquee> …. </marquee> Mueve el texto. Puede tener dos atributos:
- direction=»right» , «left» (hacia donde se moverá el texto)
- bgcolor=»red» (color de fondo del texto)
- scrollamount=»10″ (define la velocidad del texto)
<h1> …. </h1> Para hacer cabeceras de diferentes tamaños
<h2> …. </h2> el h1 es el mas grande y el h6 el mas pequeño
<h3> …. </h3>
<h4> …. </h4>
<h5> …. </h5>
<h6> …. </h6>
<font> …. </font> Indicamos el tipo de letra, el tamaño y el color del texto con tres atributos distintos:
- face=»Comic Sans MS» (tipo de letra)
- size=»12″ (tamaño de la letra)
- color=»red» (color de la letra)
<sub> …. </sub> subíndices
<sup> …. </sup> superíndices
<img/> Para colocar una imagen. Tiene muchos atributos con los que configuramos la imagen:
- src=»nombre de la imagen» (indicamos el nombre del archivo que contiene la imagen)
- align=»left», «middle», «right» (indicamos el lugar en el que aparecerá la imagen con respecto al texto de alrededor)
- border=»1″ (número que indica el grosor del borde que tendrá la imagen)
- width=»200″ (ancho en píxeles de la imagen)
- height=»300″ (alto en píxeles de la imagen)
- hspace=»15″ (espacio que la imagen dejará por la derecha y por la izquierda con el texto que tenga alrededor)
- vspace=»15″ (espacio que la imagen dejará por arriba y por abajo con el texto que tenga alrededor)
<a> …. </a> Sirve para colocar un enlace en la página. Contiene en su interior el nombre con el que el enlace aparecerá. Tiene un atributo:
- href=»http://www.google.es» (dirección de destino del enlace)
<ul> …. </ul> Lista desordenada. Puede tener 1 atributo:
- type=»circle» , «disk» ó «square» (define el tipo de viñeta: círculo, disco o cuadrado)
<ol> …. </ol> Lista ordenada. Puede tener 2 atributos:
- type=»a» , «A», «1», «I» ó «i» (define el tipo de numeración)
- start=»1″ (define el comienzo de la numeración)
<li> …. </li> Elemento de la lista