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