Etiquetas HTML (todos los cursos)

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:


<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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: