Etiquetas Principales Del Estandar HTML

Etiquetas principales
del estndar HTML

ndice
1 | Etiquetas principales de estndar HTML 3
1.1 | Comentarios 3
1.2 | Estructura principal del documento 4
1.3 | Etiquetas de la cabecera 4
1.4 | Etiquetas del cuerpo 7

Etiquetas principales del estndar HTML | TELEFNICA // 3
1. Etiquetas principales de estndar HTML

A continuacin veremos cmo podemos crear los elementos ms comunes de
una pgina web mediante etiquetas HTML.
1.1 | Comentarios
Los comentarios son textos que no sern interpretados por el

navegador.
nicamente se utilizan para aadir informacin til para el 
desarrollador.
Los caracteres  se para el cierre.
1.2 | Estructura principal del documento

html: etiqueta que define la raz del documento. Todos los
elementos de la pgina deben estar contenidos en la etiqueta
<!DOCTYPE html> HTML.
<html> header: contiene las cabeceras de la pagina HTML. Las
<head> cabeceras contienen informacin adicional para el navegador.
<title>login</title> Pueden ser, por ejemplo, el titulo de la pgina, enlaces a hojas
<meta charset=UTF-8> de estilo, codificacin de caracteres, etc.
</head>
<body> body: es el cuerpo de la pgina. Dentro de esta etiqueta se
... encuentra el contenido que vamos a mostrar al usuario.
</body>
</html>
1.3 | Etiquetas de la cabecera

Ya hemos visto que es la cabecera de una pgina. Ahora veremos cules son los principales elementos
que podemos incluir en ella:
title: titulo de la pgina. Se muestra en la barra de titulo del

navegador (o en una pestaa si usamos un navegador con
pestaas). Solo se puede aadir una vez por documento.
ILUSTRACIN: TTULO DE LA PGINA WEB

meta (cambia en HTML5): aade informacin adicional a la

pgina de naturaleza variopinta. Podemos indicar la codificacin <meta name=email content=nombreautor@dominio.com />
de caracteres del documento, informacin sobre el autor,
palabras clave para los motores de bsqueda, etc. Se pueden TEXTO EMAIL
aadir los meta que sean necesarios pero sin repetirlos.
Algunos ejemplos de meta que podemos aadir:
style: aade hojas de estilo explcitamente en el propio
documento HTML.
<meta http-equiv=Content-Type content=text/html; charset=UTF-8 />
CODIFICACIN DE CARACTERES CON UTF-8 <style type=text/css>

h1.blue {
La forma en la que se especifica la codificacin de caracteres color: blue;
cambia en HTML 5 }
</style>
<meta name=author content=nombre del autor />

TEXTO: ESTILO EN DOCUMENT HTML
TEXTO AUTOR
link (cambia en HTML5): lo podemos utilizar para referenciar script (cambia en HTML5): tambin se puede aadir dentro
ficheros externos, por ejemplo, ficheros con hojas de estilo. del cuerpo. Permite aadir un script en la propia pgina, o
Es mejor practica usar referenciar ficheros externos de hojas referenciar un fichero que contiene scripts y es especfico para
de estilo, que definirlos en el propio documento HTML con la ello. Esta segunda forma, suele ser ms adecuada puesto que
etiqueta style para separar el contenido de la presentacin. el cdigo del script est totalmente separado del documento
Tambin podemos aadir el icono de favoritos. HTML.
<script type=text/javascript>
alert(hola mundo);
ILUSTRACIN: FAVICON </script>
SCRIPT EXPLCITO EN LA PGINA
<script type=text/javascript src=hola_mundo.js />
FICHERO DE SCRIPTS REFERENCIADO

1.4 | Etiquetas del cuerpo

El cuerpo y las etiquetas que incluye una pgina definen el contenido que se muestra al usuario. Todas
las etiquetas del cuerpo del documento (excepto script) pueden llevar los siguientes atributos:
id: este atributo debe tener un valor nico en toda la pgina, no class: aade un estilo CSS definido previamente en una hoja
deben existir dos etiquetas con el mismo valor en su atributo al elemento cuyo nombre se especifica en el valor del atributo.
id.
title: aade un texto explicativo especificado en el valor del
El valor de este atributo, identifica unvocamente la etiqueta atributo. Se muestra como un tool tip (globo informativo). La
en el que esta contenido dentro de la pagina. informacin se muestra al pasar el cursor sobre el elemento
generado por la etiqueta.
Asignar un identificador a un elemento, nos puede servir, por
ejemplo, para crear un enlace interno dentro de la propia pgina.
En posteriores mdulos veremos cmo se pueden acceder a
dichos elementos para manipularlos mediante javascript.
style: aade los estilos CSS especificados en el valor del
atributo.
h[x] (titulo): define un titulo donde x es sustituido por un p (prrafo): define un prrafo. Entre cada prrafo, aade un
nmero del 1 al 6. h1 el titulo con mayor tamao de letra y pequeo espaciado si no usamos ningn estilo adicional. Si no
peso semntico y h6 el de menor tamao y peso semntico. Si aplicamos hojas de estilo, se ve de la siguiente forma:
no aplicamos hojas de estilo, se ve de la siguiente forma:
<p>
Lorem ipsum dolor sit amet, consectetur
<h1>ttulo 1</h1> adipiscing elit, sed do eiusmod tempor
<h2>ttulo 2</h1> incididunt ut labore et dolore magna
<h3>ttulo 3</h1> aliqua.
<h4>ttulo 4</h1> </p>
<h5>ttulo 5</h1> ttulo 1 <p>
<h6>ttulo 6</h1> Sed ut perspiciatis unde omnis iste
ttulo 2 natus error sit voluptatem.
ttulo 3 </p>
ttulo 4
ttulo 5
ttulo 6
ILUSTRACIN: TTULOS
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem.
ILUSTRACIN: PRRAFO
Ntese que los saltos de lnea existentes en el texto del documento ul / li (lista no numerada / elemento lista): la etiqueta ol
HTML no se materializan como tal en el navegador. Tampoco el uso define una lista no numerada, mientras que li contiene cada
de mltiples espacios en blanco se ven reflejados como tal. elemento de la lista. Si no aplicamos hojas de estilo, se ve de
la siguiente forma:
Cualquier concatenacin de tabulaciones, saltos de lnea, y espacios
en blanco o combinaciones de estos, se representan como un nico
espacio en blanco independientemente del nmero de ocurrencias
existentes.
pre: texto pre-formateado. El texto incluido como contenido de
<ul>
esta etiqueta se representa tal y como se escribe, manteniendo
<li>Lorem ipsum dolor sit amet</li>
espacios en blanco, saltos de lnea, tabulaciones, etc.
<li>Sed do eiusmod tempor incididunt</li>
ol / li (lista numerada / elemento lista): la etiqueta ol define </ul>
una lista numerada, mientras que li contiene cada elemento
de la lista. Si no aplicamos hojas de estilo, se ve de la siguiente
forma:
Lorem ipsum dolor sit amet

Sed do eiusmod tempor incididunt
<ol>
<li>Lorem ipsum dolor sit amet</li>
ILUSTRACIN: LISTA NO NUMERADA
<li>Sed do eiusmod tempor incididunt</li>
</ol>
table, caption, thead, tbody, tr, th, td (tabla / cabecera tabla /
cuerpo tabla / fila / celda cabecera / celda cuerpo): la etiqueta
table define una tabla en HTML. Dentro de esta etiqueta,
aadimos las etiquetas thead y tbody, que son la cabecera
1. Lorem ipsum dolor sit amet
(ttulos de la tabla) y el cuerpo de la tabla (datos contenidos en
la tabla) respectivamente.
2. Sed do eiusmod tempor incididunt
ILUSTRACIN: LISTA NUMERADA

Dentro de las etiquetas thead y tbody, podemos aadir filas

mediante la etiqueta tr.
En las filas (tr) de la cabecera, podemos aadir celdas de titulo
mediante la etiqueta th. <table>
En las filas (tr) del cuerpo de la tabla, podemos aadir celdas de <thead>
datos mediante la etiqueta td. <tr>
<th>ttulo 1</th>
El nmero de celdas debe coincidir en cada fila, independientemente <th>ttulo 2</th>
de si son de la cabecera o del cuerpo. Si no es as, podemos hacer <th>ttulo 3</th>
que una celda ocupe ms de un hueco con el siguiente atributo de la </tr>
etiqueta td: </thead>
colspan: define el nmero de huecos que va a ocupar una <tbody>
columna en una fila. <tr>
<td>valor 1</th>
<td>valor 2</th>
<td>valor 3</th>
</tr>
<tr>
<td colspan=2>valor 4</td>
<td>valor 5</td>
</tr>
</tbody> ttulo 1 ttulo 2 ttulo 3
</table>
valor 1 valor 2 valor 3
valor 4 valor 5
ILUSTRACIN: TABLA COMPLETA CON COLSPAN

Tambin podemos omitir la cabecera de la tabla suprimiendo las Podemos aadir una leyenda a la tabla usando la etiqueta caption
etiquetas thead y tbody. Aadimos las filas directamente a la dentro de la tabla. El contenido de dicha etiqueta es el que se
tabla de la siguiente forma: incluir en la leyenda.
a (enlace): nos permite crear un enlace a un fichero o pagina
de nuestro sitio web, externo a nuestro sitio web o a elemento
interno de la propia pgina que tenga un atributo id declarado. El
contenido de la etiqueta ser convertido en un enlace. Atributos
<table> principales:
<tr> href: ruta del elemento referenciado. Si el elemento es un
<td>valor 1</th> fichero o pgina externa, su valor ser una ruta (absoluta o
<td>valor 2</th> relativa), aunque tambin puede ser una URL.
<td>valor 3</th>
</tr> Si el elemento es un fichero o pagina externa, su valor ser una
<tr> URL.
<td>valor 4</th> Si el elemento es interno de la propia pgina (referencia a una
<td>valor 5</th> etiqueta del propio documento), su valor tendr el siguiente
<td>valor 6</th> formato: #id donde id es el identificador de la etiqueta HTML
</table> que queremos enlazar.
ILUSTRACIN: TABLA SIN CABECERA

target: especfica donde queremos abrir el enlace. Algunos img (imagen): inserta una imagen en el documento. Atributos:
valores interesantes para este atributo son:
src: URL o ruta donde se encuentra la imagen.
_self (valor por defecto si no se especifica el atributo
alt: texto alternativo. Debe ser un texto descriptivo de la
target): abre el enlace en la misma ventana.
imagen. Se utiliza en lectores para invidentes.
_blank: abre el enlace en una ventana o pestana nueva.
height: altura de la imagen en pixeles.
Si no aplicamos hojas de estilo, se ve de la siguiente forma:
width: anchura de la imagen en pixeles.
Si no aplicamos hojas de estilo, se ve de la siguiente forma:
<a href=httpd.apache.org target=_

blank>enlace a apache</a>
<h1>insertamos una imagen:</h1>
<img alt=icono de iceweasel src=iceweasel.png
height=128 width=128>
enlace a apache
ILUSTRACIN: ENLACE EXTERNO A VENTANA NUEVA insertamos una imagen:
<a href=#titulo>volver al inicio del tema</a>
volver al incio del tema
ILUSTRACIN: ENLACE INTERNO DE LA PGINA

ILUSTRACIN: IMAGEN
div (divisor o capa): define una divisin o seccin en un span (divisor de elementos inline): agrupa los elementos que
documento HTML agrupando elementos en un bloque (salto contiene, pero no produce ninguno a nivel visual. Simplemente
de lnea antes y despus del contenido). Su misin es permitir crea un grupo de contenidos para poder aplicar estilos sobre
aplicar estilos sobre la seccin o bloque completo. Ejemplo: el conjunto completo. A diferencia de div, no crea un bloque, si
no que puede ser aplicado, por ejemplo, en una lnea de texto.
Ejemplo:
<div class=rojo>esto es una capa</div>

<a href=#titulo>volver al inicio</a>
<p>dentro de este texto resaltamos lo que es
<span class=rojo>importante</span></p>
esto es una capa
volver al inicio
dentro de este texto resaltamos lo que es importante
ILUSTRACIN: CAPA ILUSTRACIN: SPAN

br (salto de linea): crea un salto de

lnea.
hr (linea o regla horizontal): elemento
visual utilizado para separar secciones.
applet / object (desaprobado en
HTML5): etiqueta que permite insertar
un objeto externo a HTML en una
pgina web. Podramos insertar un
plugin de Adobe Flash o un Applet de
Java.

Etiquetas Principales Del Estandar HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Etiquetas Principales Del Estandar HTML

Uploaded by

Copyright:

Available Formats

Etiquetas principales

del estndar HTML

1.2 | Estructura principal del documento 4

1.3 | Etiquetas de la cabecera 4

1.4 | Etiquetas del cuerpo 7

1. Etiquetas principales de estndar HTML

Los comentarios son textos que no sern interpretados por el

1.2 | Estructura principal del documento

1.3 | Etiquetas de la cabecera

title: titulo de la pgina. Se muestra en la barra de titulo del

ILUSTRACIN: TTULO DE LA PGINA WEB

meta (cambia en HTML5): aade informacin adicional a la

CODIFICACIN DE CARACTERES CON UTF-8 <style type=text/css>

<meta name=author content=nombre del autor />

SCRIPT EXPLCITO EN LA PGINA

<script type=text/javascript src=hola_mundo.js />

FICHERO DE SCRIPTS REFERENCIADO

1.4 | Etiquetas del cuerpo

Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

Lorem ipsum dolor sit amet

ILUSTRACIN: LISTA NUMERADA

Dentro de las etiquetas thead y tbody, podemos aadir filas

ILUSTRACIN: TABLA COMPLETA CON COLSPAN

ILUSTRACIN: TABLA SIN CABECERA

<a href=httpd.apache.org target=_

ILUSTRACIN: ENLACE EXTERNO A VENTANA NUEVA insertamos una imagen:

<a href=#titulo>volver al inicio del tema</a>

volver al incio del tema

ILUSTRACIN: ENLACE INTERNO DE LA PGINA

<div class=rojo>esto es una capa</div>

ILUSTRACIN: CAPA ILUSTRACIN: SPAN

br (salto de linea): crea un salto de

You might also like