listado de etiquetas para utilizar como referencia en html
DESCRIPTION
Listado de etiquetas para utilizar como referencia en HTMLTRANSCRIPT
Listado de etiquetas para utilizar como referencia en HTML
Etiquetas básicas
<html></html> Crea un documento HTML.<head></head> Muestra el título y otro tipo de información que no se muestra en la propia página Web.<body></body> Muestra la parte visible del documento.
Etiquetas del encabezado
<title></title> Sitúa el nombre del documento en la barra de título.
Atributos del cuerpo del texto
<body bgcolor=”?”> Determina el color del fondo, utilizando un nombre o un valor hexadecimal.Por ejemplo:<body bgcolor=”#FFFF99”><body background> Sirve para indicar la colocación de una imagen como fondo de la página. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la página. <body text=”color”> Determina el color del texto, mediante un nombre o un valor hexadecimal.<body link=”color”> Determina el color de los enlaces, mediante un nombre o un valor hexadecimal.<body vlink=”color”> Determina el color de los enlaces visitados, mediante un nombre o un códigohexadecimal.<body alink=”color”> Determina el color de los enlaces activos.
Etiquetas de texto
<FONT></FONT>Los atributos básicos de la etiqueta FONT son tres:- SIZE: determina el tamaño de la fuente, de 1 a 7.- FACE: indica la fuente que se desea utilizar. Puede escoger cualquier tipo de fuente que desee que aparezca en su página.- COLOR: determina el color de la fuente, mediante un nombre o un código hexadecimal.Por ejemplo:<font size= “2” face= “Arial, Helvetica, sans-serif” color=“#663399”><b></b> Crea un texto en negrita.<i></i> Crea un texto en cursiva.<h1></h1> Crea encabezados. Hay seis niveles de encabezados, de H1 (el más grande) a H6 (el más pequeño).Subrayado El HTML nos propone también para el subrayado el par de etiquetas: <u> y </u> (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaución dado
que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al lector y apartarlo del verdadero interés de nuestro texto. Subíndices y supraíndices Este tipo de formato resulta de extremada utilidad para textos científicos. Las etiquetas empleadas son: <sup> y </sup> para los supraíndices<sub> y </sub> para los subíndices Por ejemplo: La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alérgeno enriquecido El resultado: La 13CC3H4ClNOS es un heterociclo alérgeno enriquecido
Formato
<p></p> Crea un nuevo párrafo.Existen distintas posibilidades para alinear el texto en un párrafo:- JUSTIFY (justificado)- LEFT (a la derecha)- RIGHT (a la izquierda)- CENTER (centrado)Por ejemplo:<p align=”justify”>…</p><br> Inserta un salto de línea. No hace falta cerrar la etiqueta.<BLOCKQUOTE> </BLOCKQUOTE> Indenta el texto por ambos lados, siguiendo la norma habitual para la escritura de citas.
Enlaces
<a href="URL"></a> Crea un hipervínculo.Por ejemplo:<ahref=http://www.un.org/chinese/av/radio/latenews.htm>Chino</a><a href="mailto:EMAIL"></a> Crea un enlace mailto.Por ejemplo:<A HREF="mailto:[email protected]">Envíe un mensaje</A>
Enlaces específicos
Mismo sitio, misma página:
<a href="#NAME"></a> Enlaza con el destino deseado desde cualquier otro punto del documento.<a name="NAME"></a> Crea un punto de destino dentro de un mismo documento.Por ejemplo:<a href= “#norte”>Desde el norte</a><I><a name=”norte”></a>Desde el norte:</I>
Mismo sitio, distinta página:
<a href="FILENAME.htm#NAME"></a> Enlaza con el punto de destino desde un punto cualquiera de un documento distinto.<a name="NAME"></a> Crea un punto de destino dentro de un mismo documento.Por ejemplo:<a href="guide.htm#scholarships" >BECAS</a><font color="#FF0000"><a name="scholarships"></a> Becas</font>
Listas
<ol></ol> Crea una lista numerada (ordenada).<ul></ul> Crea una lista con símbolos (simple o no ordenada).<li></li> Precede a cada elemento de la lista y añade un número.Por ejemplo:Lista numerada<OL><LI>Elemento1 </li><LI>Elemento2 </li><LI>Elemento3 </li></OL>Lista con símbolos<UL><LI>Elemento1 </li><LI>Elemento2 </li><LI>Elemento3 </li></UL><dl></dl> Crea una lista de definiciones.<dt> Precede a cada elemento de la definición.<dd> Precede a cada definición.
Por ejemplo:Lista de definiciones<DL><DT> LEÓN <DD> Gran mamífero carnívoro de la familia delos Félidos, de pelaje entre amarillo y rojo. Tiene lacabeza grande, los dientes y las uñas muy fuertes y la colalarga y terminada en un fleco de cerdas. El macho sedistingue por una larga melena.<DT> LEOPARDO <DD> Mamífero carnicero de metro y mediode largo desde el hocico hasta el arranque de la cola, y deunos siete decímetros de alto. El aspecto general es el deun gato grande, de pelaje blanco en el pecho y el vientre,y rojizo con manchas negras, redondas y regularmentedistribuidas en todo el resto del cuerpo. Vive en losbosques de Asia y África, y a pesar de su magnitud trepacon facilidad a los árboles en persecución de los monos yde otros animales.<DT> GALLINA <DD>Hembra del gallo, de menor tamaño queeste, cresta pequeña o rudimentaria, cola sin cobijas
prolongadas y tarsos sin espolones. <DD> Persona cobarde,pusilánime y tímida.</DL>
Elementos gráficos
<img src="filename.extension"> Inserta una imagen.Atributos de la imagen:- WIDTH (ancho)- HEIGHT (alto)- ALT (texto alternativo)La alineación de la imagen puede producirse de las siguientes maneras:- LEFT (izquierda)- RIGHT (derecha)- CENTER (centro)- BOTTOM (inferior)- TOP (superior)- MIDDLE (media)Por ejemplo:<img src="images/goose.gif" width="158" height="36" align="top” alt="En esta imagen se muestra un ganso”><img src="name" border=”?”> Determina el tamaño del borde alrededor de una imagen.Por ejemplo:<img src="images/language%20rollovers/radnewsweb.gif" width="81"height="69" border="0"><hr> Inserta una barra horizontalLa etiqueta tiene dos atributos básicos:- SIZE: determina el tamaño (alto) de la barra.- WIDTH: determina el ancho de la barra, a modo de porcentaje de un valor absoluto.Por ejemplo:<HR SIZE="5" WIDTH="75"><HR SIZE="2" WIDTH="25%"><hr noshade> Crea una barra sin sombreado.
Tablas
<table></table> Crea una tabla.<tr></tr> Determina las filas de una tabla.<td></td> Determina las celdas de una fila.<th></th> Determina el encabezado de una tabla (una celda normal con texto centrado y en negrita).Atributos de la tabla:- BORDER: determina la anchura del borde alrededor de las celdas de una tabla.- CELLSPACING: determina la cantidad de espacio entre las celdas.- CELLPADDING: determina la cantidad de espacio entre el borde de una celda y los contenidosde la misma.- WIDTH: determina el ancho de una tabla (en píxeles o como porcentaje del ancho del texto).Por ejemplo:
<table width="85%" border="1">Atributos de celda:- ALIGN : determina el tipo de alineación para la(s) celda(s) (izquierda, centrada o derecha).- VALIGN: determina la alineación vertical para la(s) celda(s) (superior, centrada, inferior).Por ejemplo:<tr align=”center” valign=”top”>Atributos de columna:- COLSPAN: determina el número de columnas que se extenderá una celda.- ROWSPAN: determina el número de filas que se extenderá una celda (valor por defecto=1)- NOWRAP: evita que las líneas de una celda se rompan en su proceso de ajuste.Por ejemplo:<td colspan=”2”><td rowspan=”2”><td nowrap>Ejemplo de una tabla completa:<TABLE BORDER="5" CELLSPACING="10" CELLPADDING="15" WIDTH="75%"ALIGN="CENTER"><TR ALIGN="RIGHT"><TD COLSPAN="2">1</TD><TD>2</TD></TR><TR ALIGN="CENTER"><TD ROWSPAN="2">4</TD><TD>5</TD><TD>6</TD></TR><TR ALIGN="LEFT"><TD>7</TD><TD>8</TD></TR></TABLE>
Colores por nombre: