You are on page 1of 8

Principales

Un ejemplo de código HTML con coloreado de sintaxis.

1. <meta name="google-site-verification"
content="HoFrmBmLyZQVVyyvR4a93ONQu1BrSmB_EB8wKCppWtM" />
2. head : cabecera del documento HTML
3. title : define el título de la página (va dentro de head, pero es obligatoria)
4. body : cuerpo del documento HTML

Etiquetas que van dentro de "head"[editar]


 link : vínculo a hojas de estilo CSS
 style : estilo de la página incrustado
 u : texto subrayado (desaprobada)
 script : script o guion

Etiquetas que van dentro de "body"[editar]


 form : inicio de un formulario
Encabezados[editar]

1. h1 : encabezado de primer nivel


2. h2 : encabezado de segundo nivel
3. h3 : encabezado de tercer nivel
4. h4 : encabezado de cuarto nivel
5. h5 : encabezado de quinto nivel
6. h6 : encabezado de sexto nivel
Utilización de los encabezados[editar]
La etiqueta de mayor valor es la cabecera h1 , esta debe contener la frase principal de la que
trata la entrada. Su localización debe ser la más cercana a la parte superior izquierda de la
web, ya que el buscador siempre lee los datos de esta forma. Se recomienda que solo
hagamos uso una sola vez de esta etiqueta. La cabecera h2 se utiliza para definir una frase
secundaria dentro de nuestro artículo conteniendo las palabras clave. Su uso de debe de ser
continuo y se recomiendo un máximo de 4 a 6.
La cabecera h3 es de menor valor que la etiqueta h2 , esta sirve para definir las secciones
interiores de nuestro artículo. Las cabeceras h4 , h5 , h6 son las menos utilizadas, y de las
que se desconoce más sobre su utilización. 1
Tablas[editar]

 table : define una tabla


 tr : fila de una tabla
 td : celda de datos de una tabla
 th : celda de cabecera de una tabla
Listas[editar]

 li : elemento de lista
 ol : lista ordenada
 ul : lista desordenada
Formatos[editar]

 b : estilo de texto negrita (desaprobada)


 i : estilo de texto cursiva (desaprobada)
 s : estilo de texto tachado (desaprobada)
 u : estilo de texto subrayado
Otros[editar]

 a : enlace
 div : capa de la página
 img : para insertar imágenes
<HTML> … </HTML>

Delimita y engloba toda la página web, que consta de cabecera y cuerpo.

<HEAD> … </HEAD>

Delimita y engloba la cabecera de una página, que contiene un conjunto de


informaciones que no se muestran en la ventana, entre ellas el título de la página,
pero que pueden ayudar a los navegadores y a los buscadores para interpretar o a
encontrar correctamente la página.

<TITLE> … </TITLE>

Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del


título de la ventana del navegador.

Metadatos

La cabecera admite otras muchas etiquetas (ver apuente 6 y 6.1.)

<BODY> … </BODY>

Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones


(texto e imágenes) que se muestran en la página, así como las indicaciones de
cómo deben mostrarse.
Admite atributos (ver jac 8 y apuente 5.3 y 14.3).

Formatos de párrafo
El texto de la página se puede estructurar en encabezamientos de los diferentes
apartados de la página, que pueden tener distintos niveles de 1 a 6 (siendo 1 el
más importante) y párrafos normales.

<H1> ... </H1> o <H2> ... </H2> (hasta 6)


Párrafos que son encabezamientos (con distintos niveles).

<P>... </P>

Párrafos normales.

<P align="center">... </P>

El atributo align permite alinear el texto del párrafo. Se puede aplicar igual a las
etiquetas <H1>, <H2>, etc ...

<BR>

Permite partir un párrafo empezando una línea nueva pero sin dejar espacio.

<HR>

Pone una linea horizontal de separación. (admite atributos) (ver apuente 11.1).

<BLOCKQUOTE>…</BLOCKQUOTE>

Sangra el párrafo.

Formatos de texto
El formato de caracteres permite cambiar tanto el tipo de fuente como su tamaño
y aspecto.
Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un grupo
de caracteres:

Formatos Físicos:

 Negrita: <B>…</B>
 Cursiva: <I>…</I>
 Subrayado: <U>…</U>
 Teletipo: <TT>…</TT>
 Tachado: <STRIKE>…</STRIKE>
 Grande: <BIG>…</BIG>
 Pequeña: <SMALL>…</SMALL>
 Superíndice: <SUP>…</SUP>
 Subíndice: <SUB>…</SUB>

Formatos Lógicos:

 Cita: <CITE>…</CITE>
 Código: <CODE>…</CODE>
 Definición: <DFN>…</DFN>
 Énfasis: <EM>…</EM>
 Grueso: <STRONG>…</STRONG>
 Palabras clave: <KEY>…</KEY>
 Ejemplos: <SAMP>…</SAMP>
 Usuario: <KBD>…</KBD>
 Variables: <VAR>…</VAR>
 Ejemplo literal: <XMP>...</XMP> (ignora las etiquetas HTML de
dentro)

Posibilidad de combinar etiquetas (anidándolas, esto es, una dentro de otra):

 <B>…<I>…</I>…</B> (Correcto)
 <B>…<I>…</B>…</I> (Incorrecto)

<FONT COLOR="red"> ... </FONT>

Indicación expresa del tipo de letra a usar, en este caso el color (ver jac 8.2)

<FONT SIZE="+1"> ... </FONT>

Indicación expresa del tipo de letra a usar, en este caso el tamaño (ver jac 8.1-
segunda parte)

La etiqueta FONT permite combinaciones cualesquiera de los atributos COLOR,


SIZE y FACE

Caracteres especiales
Existe una serie de caracteres del ISO-LATIN-1 que no se pueden representar
directamente en un documento HTML, puesto que forman parte del propio
vocabulario del lenguaje, como por ejemplo los símbolos <, >, &, etc.
Adicionalmente, las vocales acentuadas y algunos signos de puntuación deben
ser especificados de forma distinta, puesto que los navegadores pueden no
entender el código del carácter utilizado y convertirlo a otro diferente.
Los caracteres especiales más usados son:

 &aacute; á
 &eacute; é
 &iacute; í
 &oacute; ó
 &uacute; ú
 &agrave; à
 &ntilde; ñ
 &lt; <
 &gt; >
 &amp; &
 &ccedil; ç
 &quot; “
 &nbsp; espacio en blanco

(ver apuente 10.1)

Listas
(ver apuente 7)

<UL> ... </UL>

Lista numerada.

<OL> ... </OL>

Lista no numerada.

<LI> ... </LI>

Elementos de una lista.

Enlaces
Sirven para acceder desde una página a otra página o a otro recurso
disponible (ver apuente 15).

<a href="http://servidor/recurso.html">texto del enlace</a>

Enlace absoluto a una página

<a href="recurso.html">texto del enlace</a>

Enlace relativo a una página

<a name="marcador"> ... </a>

Marcador (enlace interno) dentro de una página

<a href="#marcador">texto del enlace</a>

Enlace a un marcador de la misma página

<a href="recurso.html#marcador">texto del enlace</a>

Enlace a un marcador de otra página (que puede darse con dirección absoluta o
relativa)

<a href="recurso.html" target="_blank">texto del enlace</a>

Enlace a otra página (absoluta o relativa, con o sin marcador) que se abra en otra
ventana.

Imágenes
<img src="nombre.gif">

Muestra una imagen, que normalmente es de tipo GIF o JPG


Admite atributos (ver apuente 14).
Tablas
Permite organizar la información en tablas.
También sirve para maquetar (dar forma general) al aspecto de la página.
(ver apuente 11.1)

You might also like