You are on page 1of 18

TRABAJO N1

1) QUE ES EL HTML:
HTML, siglas de HyperText Markup Language (lenguaje de marcas de
hipertexto), hace referencia al lenguaje demarcado para la elaboracin
de pginas web. Es un estndar que sirve de referencia para la elaboracin de
pginas web en sus diferentes versiones, define una estructura bsica y un cdigo
(denominado cdigo HTML) para la definicin de contenido de una pgina web,
como texto, imgenes, videos, entre otros. Es un estndar a cargo de la W3C,
organizacin dedicada a la estandarizacin de casi todas las tecnologas ligadas a
la web, sobre todo en lo referente a su escritura e interpretacin. Se considera el
lenguaje web ms importante siendo su invencin crucial en la aparicin,
desarrollo y expansin de la World Wide Web. Es el estndar que se ha impuesto
en la visualizacin de pginas web y es el que todos los navegadores actuales han
adoptado.
2) ASPECTOS DEL HTML:
Html, siglas de hypertext markup language (lenguaje demarcado hipertextual),
hace referencia al lenguaje de marcado predomnate para la elaboracin de
pginas web que se utiliza para describir y traducir la estructura y la informacin
en forma de texto, as como para complementar el texto con objetos tales como
imgenes.
Tambin puede describir, hasta cierto punto la apariencia de un documento y
puede incluir o hacer referencia a un tipo de programa llamado script, el cual
puede afectar el comportamiento de navegadores web, consta de varios
componentes vitales, entre ellos los elementos y sus atributos entre otros.
3) HISTORIA DEL HTML:
La historia completa de HTML es tan interesante como larga, por lo que a
continuacin se muestra su historia resumida a partir de la informacin que se
puede encontrar en la Wikipedia.
El origen de HTML se remonta a 1980, cuando el fsico Tim Berners-Lee,
trabajador del CERN (Organizacin Europea para la Investigacin Nuclear)
propuso un nuevo sistema de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" haban sido desarrollados aos antes. En el mbito
de la informtica, el "hipertexto"permita que los usuarios accedieran a la
informacin relacionada con los documentos electrnicos que estaban
visualizando. De cierta manera, los primitivos sistemas de "hipertexto" podran
asimilarse a los enlaces de las pginas web actuales.
Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo
present a una convocatoria organizada para desarrollar un sistema
de "hipertexto" para Internet. Despus de unir sus fuerzas con el ingeniero de

sistemasRobert Cailliau, presentaron la propuesta ganadora


llamada WorldWideWeb (W3).
El primer documento formal con la descripcin de HTML se public en 1991 bajo el
nombre HTML Tags (Etiquetas HTML) y todava hoy puede ser consultado online a
modo de reliquia informtica.
La primera propuesta oficial para convertir HTML en un estndar se realiz en
1993 por parte del organismo IETF(Internet Engineering Task Force). Aunque se
consiguieron avances significativos (en esta poca se definieron las etiquetas para
imgenes, tablas y formularios) ninguna de las dos propuestas de estndar,
llamadas HTML y HTML+ consiguieron convertirse en estndar oficial.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue
publicar, el 22 de septiembre de ese mismo ao, el estndar HTML 2.0. A pesar de
su nombre, HTML 2.0 es el primer estndar oficial de HTML.
A partir de 1996, los estndares de HTML los publica otro organismo de
estandarizacin llamado W3C (World Wide Web Consortium). La versin HTML
3.2 se public el 14 de Enero de 1997 y es la primera recomendacin de HTML
publicada por el W3C. Esta revisin incorpora los ltimos avances de las pginas
web desarrolladas hasta 1996, comoapplets de Java y texto que fluye alrededor de
las imgenes.
HTML 4.0 se public el 24 de Abril de 1998 (siendo una versin corregida de la
publicacin original del 18 de Diciembre de 1997) y supone un gran salto desde
las versiones anteriores. Entre sus novedades ms destacadas se encuentran las
hojas de estilos CSS, la posibilidad de incluir pequeos programas o scripts en las
pginas web, mejora de la accesibilidad de las pginas diseadas, tablas
complejas y mejoras en los formularios.
La ltima especificacin oficial de HTML se public el 24 de diciembre de 1999 y
se denomina HTML 4.01. Se trata de una revisin y actualizacin de la versin
HTML 4.0, por lo que no incluye novedades significativas.
Desde la publicacin de HTML 4.01, la actividad de estandarizacin de HTML se
detuvo y el W3C se centr en el desarrollo del estndar XHTML. Por este motivo,
en el ao 2004, las empresas Apple, Mozilla y Opera mostraron su preocupacin
por la falta de inters del W3C en HTML y decidieron organizarse en una nueva
asociacin llamadaWHATWG (Web Hypertext Application Technology Working
Group).
4) ESTRUCTURA DE UN DOCUMENTO DE HTML:
Un documento HTML est definido por una etiqueta de apertura <HTML> y una
etiqueta de cierre </HTML>. Dentro de este se dividen dos partes fundamentales
la cabecera, delimitada por la etiqueta<HEAD> y el cuerpo, delimitado por la
etiqueta <BODY>. Por tanto la estructura de un documento HTML ser:

<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
5) SINTAXIS DE HTML (orden, simbolos):
Comandos bsicos de formateo de texto
<p>...</p>: Indica un comienzo de prrafo. Tiene como
opciones align="center" ,"left" o "right", para centrar o alinear a derecha o izquierda
el texto. Cada comienzo de prrafo deja un espacio separador.
<h1>...</h1>: Se usan para dividir correctamente en secciones nuestra pgina, tal
y como se hace en un documento de texto normal. El mas importante (grande)
es <h1>, luego <h2> y as hasta <h7>.
<center>...</center>: Permite centrar.
<pre>...</pre>: Representa el texto encerrado en ella con un tipo de letra de paso
fijo.
blockquote>...</blockquote>: Para dejar mrgenes tanto a izquierda como a
derecha (sangrar).
<br>: Cuando escribimos un documento HTML los retornos de carro no tienen
ningn efecto (salvo si estn contenidos bajo la directiva <pre>). Agrupaciones de
ms de un carcter en blanco se traducen en un solo carcter blanco.
<hr>: Inserta una linea horizontal o separador. De ellos pueden modificarse varios
atributos:
size="num", "%": grosor de la barra horizontal, en pixels o el porcentaje del ancho
de pgina.
width="num": anchura de la barra horizontal en pixels.
align="...": alineamiento de la barra, puede valer left, right o center .
noshade: elimina el aspecto tridimensional .

Cambiando el estilo de letra


Todas estas etiquetas nos permiten cambiar el aspecto del tipo de letra que
estemos utilizando.
<b>...</b>: Pone el texto en negrita.
<i>...</i>: Representa el texto en cursiva.
<u>...</u>: Para subrayar algo.
<s>...</s>: Para tachar.
<tt>...</tt>: Permite representar el texto en un tipo de letra de paso fijo.
<sup>...</sup>: Letra superndice.
<sub>...</sub>: Letra subndice.
Caracteres de control
En el HTML existen cuatro caracteres de control, que se usan para formar
etiquetas, establecer parmetros, etc.. Para poder emplearlos sin riesgo
deberemos escribir los siguiente cdigos:
&lt; <
&gt; >
&amp; &
&quot; "
Enlaces
El HTML es un lenguaje para hipertexto. Existen mltiples formatos de hipertexto
(por ejemplo, los ficheros de ayuda de Windows) y lo que tienen en comn es que
todos poseen enlaces.
Un enlace es una zona de texto o grfico que al ser seleccionado nos traslada a
otra posicin dentro del documento actual o a otro documento, que puede
encontrarse en el mismo ordenador o en otro de cualquier parte del planeta. Son
los enlaces lo que hacen de la World Wide Web o telaraa lo que es.
Para incorporar un enlace hay que utilizar esta etiqueta <a>. Todo lo que
encerremos entre <a> y </a>, ya sea texto o imgenes, ser considerado como
enlace y sufrir dos modificaciones:
1. El texto aparecer subrayado y de un color distinto al habitual, y las
imgenes estarn rodeadas por un borde del mismo color que el del texto
del enlace.
2. Al pulsar sobre el enlace, se abrir en el navegador el documento al que
apuntaba el enlace.

En el enlace debemos especificar una direccin. Lo haremos de la siguiente


manera:
<a href="direccin">P&uacute;lsame</a>
La direccin estar en formato URL (Uniform Resource Locator).
servicio://mquina/ruta/fichero
Donde el servicio podr ser uno de los siguientes:
http: Es el servicio invocado para transmitir pginas web y el que usaremos
normalmente en los enlaces.
https:Es una innovacin sobre el anterior, que nos permite acceder a servidores
(generalmente comerciales) que nos ofrecen el uso de tcnicas de encriptacin
para proteger los datos que intercambiemos con l de terceras personas.
ftp: Permite trasmitir ficheros desde servidores de ftp annimo. Si no le pedimos
un fichero sino un directorio, en general el navegador se encargar de mostrarnos
el contenido del mismo para que podamos escogerlo cmodamente. Utilizando la
@ podremos acceder a servidores privados.
mailto: Para poder mandar un mensaje. Por ejemplo, la URL
mailto:iesgaviota@averroes.cec.junta-andalucia.es
mandara un mensaje a nuestro Instituto.
News: Para poder acceder a grupos de noticias. Se indica el servidor y el grupo.
Por ejemplo
news://news.cica.es/es.comp.demos
nos conectara con el grup es.comp.demos en el servidor del CICA.
La direccin de la mquina puede ser su IP o la DNS.
La ruta es una serie de directorios separados por el smbolo /, que es el utilizado
en UNIX (el sistema operativo ms extendido en los servidores de Internet).
Cuando queremos acceder a un fichero situado en la misma mquina que la
pgina web que estamos creando, no es necesario ni recomendable, escribir toda
la ruta hasta el fichero, bastar relativizar todos los enlaces al directorio actual.
Esto quiere decir que no tendremos que escribir:
<a href="http://averroes.cec.junta-andalucia.es
/ies_gaviota/pagina2.html">
Si el fichero al que queremos acceder est en el mismo directorio, bastar con
escribir:
<a href="pagina2.html">
Y si esr en otro directorio, lo nombrar de forma relativa al directorio actual de
esta forma:

<a href="otro_directorio/pagina2.html">
o bien de esta otra:
<a href="../../otro_directorio/pagina2.html">
donde los dos puntos (..) se utilizan para acceder al directorio padre.
Anclas
Como dijimos, es posible acceder a una posicin del documento HTML. Para
hacerlo, primero debemos especificar el lugar del documento al que queremos
acceder:
<a name="ancla">: Para poder acceder a ese lugar incluimos el enlace de esta
manera:
<a href="#ancla">Vamos a ancla</a>
Tambin podemos acceder a anclas situadas en documentos remotos. Para ello
aadiremos el nombre del ancla al URL as:
<a href="enlaces.html#ancla">Vamos a ancla en los enlaces</a>
Listas
Existen varios tipos de listas en HTML, todas ellas se pueden meter unas dentro
de otras formando rboles, y siguen el siguiente formato:
<tipo_lista>
<li>Primer elemento
<li>Segundo elemento
</tipo_lista>
<tipo_lista> puede ser :
<ul>: Nos permite presentar listas de elementos sin orden alguno. Cada elemento
de la lista ir normalmente precedido por un crculo.
La etiqueta <ul> admite estos parmetros:
Compact: Indica al navegador que debe representar la lista de la manera ms
compacta posible.
type="disc", "circle", "square"
Indica al navegador el dibujo que preceder a cada elemento de la lista. Para
mayor flexibilidad se admite tambin como parmetro de <li>.

<ol>: Nos permite presentar listas de elementos ordenados de menor a mayor.


Normalmente cada elemento de la lista ir precedido por su nmero o letra en el
orden.
La etiqueta <ol> admite estos parmetros:
Compact: Indica al navegador que debe representar la lista de la manera ms
compacta posible.
type="1", "a", "A", "i" o "I": Indica al navegador el tipo de numeracin que
preceder a cada elemento de la lista. Para mayor flexibilidad se admite tambin
como parmetro de <li>.
start="num": Indica al navegador el nmero por el que se empezar a contar los
elementos de la lista.
La etiqueta <li> admite el atributo value="num", que acta como start pero a partir
de ese elemento.
<dl>: Este tipo de lista que no utiliza la etiqueta <li>. Tiene como objetivo presentar
una lista de definiciones, de modo que tiene que representar de manera distinta el
objeto definido y la definicin. Emplearemos la etiqueta <dt> para el objeto
definido y <dd> para la definicin.
La etiqueta <dl> slo admite como parmetro el ya conocido compact, que tiene el
mismo comportamiento que con los otros dos tipos de lista anteriores.
Incluyendo imgenes
Para incluir grficos e imgenes en nuestras pginas utilizaremos la
etiqueta <img> de esta manera:
<img src="fichero_grafico" alt="descripcion">
El parmetro src especifica el nombre del fichero que contiene el grfico. Los
formatos estndar en la red son el GIF y el JPG. La ltimas versiones de Netscape
y Explorer aceptan tambin el formato PNG.
El parmetro alt especifica el texto que se mostrar en lugar del grfico en
aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) o en el
supuesto de que el usuario los haya desactivado. Es por todo eso que conviene
ponerlo siempre. Adems algunos navegadores lo muestran cuando pasamos el
ratn por encima de la imagen.
Existen dos atributos que, aunque opcionales, tambin conviene indicar
siempre: width="num" y height="num", la anchura y la altura del grfico en pixels.

De este modo, el navegador puede mostrar un recuadro del tamao de la imagen


mientras la va leyendo de la red y as poder mostrar el resto de la pgina
correctamente mientras tanto. Estos atributos tambin nos pueden valer para
ampliar o reducir el tamao original de las imgenes, poniendo el valor en pixel o
el % del ancho y alto con que queremos ver la imagen en el navegador.
Para poder maquetar conjuntamente texto y grficos, el HTML proporciona, por
medio del parmetro align, las siguientes maneras de alinear una imagen respecto
del texto que la acompaa:
align="top"
Coloca el punto ms alto de la imagen coincidiendo con ms alto de la lnea
de texto actual.
align="middle"
Alinea el punto medio (en altura) de la imagen con la base del texto.
align="bottom"
Por defecto Alinea el punto ms bajo de la imagen con la base del texto.
align="left"
Coloca la imagen a la izquierda del texto.
align="right"
Coloca la imagen a la derecha del texto.
Hay que aclarar que la base del texto es la lnea donde descansan casi todas las
letras del alfabeto excepto algunas (p, q, y, j ...).
El atributo hspace="num" indica el espacio en blanco, en pixel, que se insertar a
derecha e izquierda de la imagen y vspace="num" el espacio por encima y debajo
de la imagen.
Imgenes y enlaces
Suele ser comn incluir enlaces dentro de un grfico. En ese caso, por defecto, los
navegadores le pondrn un borde al grfico para indicar que efectivamente es un
enlace. Prctico, pero la mayora de las veces bastante poco esttico. Por medio
del parmetro border podremos alterar el grosor de ese borde o incluso eliminarlo
ponindolo a cero.
<a href="ruta/fichero"><img src="imagen" border="0"></a>
JPG o GIF
Una buena regla general es usar JPG cuando la imagen sea una foto y cuando
sea un logotipo, letras, o un dibujo utilizar GIF. Lo principal es que la imagen ocupe
lo mnimo posible (una imagen de ms de 50k es muy grande para Internet) y que
tenga una calidad aceptable. Un GIF de 256 colores generalmente es un
desperdicio, con 64 colores casi no hay diferencia y puede ocupar bastante
menos. Una foto en GIF de 256 colores, en JPG puede quedar reducida a menos
de la mitad.

Si hubiese que poner una imagen grande no la pondremos directamente en la


pgina, pondremos un versin reducida de unos 150 x 100 pixels con un enlace a
la grande, e indicaremos cunto ocupa la grande.
Tablas
Las tablas son posiblemente la manera ms clara de organizar la informacin.
Tambin es el modo ms adecuado de maquetar texto y grficos de una manera
algo ms controlada que con los parmetros align.

La tabla est contenida entre las etiquetas <table> y </table>.

Cada fila de la tabla est delimitada por <tr> y </tr>

Cada celda est determinada por las etiquetas <td> y </td>.

Las etiquetas <th> y </th> sirven para indicar que el texto contenido es la
cabecera de la columna. Las cabeceras de la tabla no son obligatorias.

La etiquetas <caption> y </caption> delimitan el ttulo de la tabla.

No es necesario definir de antemano cuantas filas o columnas tendr la tabla,


basta con colocar tantas celdas como queramos. La distribucin de las celdas la
ajustaremos con las etiquetas que delimitan las filas.
Una tabla con 2 filas y 3 columnas se declarar as:
<table>
<tr> <td>1,a</td> <td>1,b</td> <td>1,c</td> </tr>
<tr> <td>2,a</td> <td>2,b</td> <td>2,c</td> </tr>
</table>
Los atributos de <table> son:
border="num"
Especifica el grosor del borde que se dibujar alrededor de las celdas. Por
defecto es cero, lo que significa que no dibujar borde alguno.
cellspacing="num"
Define el nmero de pixels que separarn las celdas.
cellpadding="num"
Especifica el nmero de pixels que habr entre el borde de una celda y su
contenido.
width="num", "%"
Especifica la anchura de la tabla. Puede estar tanto en pixels como en
porcentaje de la anchura total disponible para ella (pondremos "100%" si
queremos que ocupe todo el ancho de la ventana del navegador).

align="..."
Alinea la tabla a izquierda ("left"), derecha ("right") o centro ("center").
bgcolor="#xxxxxx"
Colorea todo el rea de la tabla con el color indicado. Ver colores en Letras
y colores.
Definir las filas
Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila
se define con una etiqueta TR, que tiene los siguientes atributos:
align="..."
Alinea el contenido de las celdas de la fila horizontalmente a
izquierda("left"), derecha ("right") o centro ("center")
valign="..."
Alinea el contenido de las celdas de la fila verticalmente arriba ("top"), abajo
("bottom") o centro ("middle").
Definir las celdas
Por ltimo, nos queda definir cada celda gracias a la etiquetas <td> y <th>. Estas
etiquetas son equivalentes, pero la ltima se utiliza para encabezados, de modo
que su interior se escribir por defecto en negrita y centrado. Estos son los
atributos de ambas:
align="..."
Alinea el contenido de las celdas de la fila horizontalmente a
izquierda("left"), derecha ("right") o centro ("center")
valign="..."
Alinea el contenido de las celdas de la fila verticalmente arriba ("top"), abajo
("bottom") o centro ("middle").
width="num", "%"
Especifica la anchura de la celda . Tambin se puede especificar tanto en
pixels como en porcentaje, teniendo en cuenta que, en este ltimo caso,
ser un porcentaje respecto al ancho total de la tabla (no de la ventana del
navegador).
nowrap
Impide que, en el interior de la celda, se rompa la lnea en un espacio.
colspan="num"
Especifica el nmero de celdas de la fila situadas a la derecha de la actual
que se unen a sta (incluyendo la celda en que se declara este parmetro).
Es por defecto uno. Si se pone igual a cero, se unirn todas las celdas que
queden a la derecha.
rowspan="num"
Especifica el nmero de celdas de la columna situadas debajo de la actual
que se unen a sta.
bgcolor="#xxxxxx"
Colorea todo el rea de la celda con el color indicado. Ver colores en Letras
y colores.
Ttulo de la tabla

Por medio de la etiqueta <caption> se indica el ttulo de una tabla. Esta etiqueta
admite slo un parmetro: align, que es por defecto top. Si lo definimos
como bottom el ttulo se colocar al final de la tabla en lugar del comienzo.
Tipos de letra, tamao y colores
Gracias a la etiqueta <font> vamos a poder cambiar el tamao, el tipo y el color de
las letras en nuestras pginas.
Cambio de color
Para hacerlo se utiliza el parmetro color. La manera de especificarle el color es
comn a todas las etiquetas HTML: bien indicando el nombre, si es un color
normal (Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime,
Olive, Yellow, Navy, Blue, Teal, Aqua),
<font color="red">Estoy en rojo</font>
o bien especificando la intensidad de rojo, verde y azul (cdigo RGB) del mismo.
<font color="#xxxxxx">color</font>
Donde cada x es un dgito hexadecimal, del 0 a la F. Las dos
primeras x corresponden al rojo, las 2 siguientes al verde y las restantes al azul.
Por ejemplo: para el blanco pondremos todos los valores al mximo, #FFFFFF; y
para el rojo, #FF0000.
<font color="#FF0000">Estoy en rojo</font>
Tamao de la letra
El parmetro utilizado para indicar el tamao es size. Puede tomar valores desde
1 a 7, siendo el tamao por defecto 3.
<font size="2">Tamao 2</font>
Tambin se puede utilizar los modificadores + y - para indicar un incremento (o
decremento) relativo del tamao del tipo de letra. As, por ejemplo, si indicamos
que queremos un tamao de "-2" estaremos pidiendo al navegador que nos
muestre el tipo de letra dos veces ms pequeo.
<font size="+3">Tamao 6</font>
Tipo de letra

Por ltimo, podemos especificar el nombre del tipo de letra que queremos utilizar
gracias al parmetro face. Como en principio no tenemos manera de saber que
tipo de letra tiene instalado el ordenador del usuario que est viendo nuestras
pginas, podemos indicar ms de uno separado por comas. Si el navegador no
encuentra ninguno seguir utilizando el que tiene por defecto:
<font face="Helvetica,Arial,Times">No s como voy
a salir exactamente</font>
La cabecera
Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu
son los meta. Entre otras cosas, sirven para indicar propiedades de la pgina
como pueda ser el nombre de su autor. Por ejemplo,
<meta name="autor" content="Jos Fernando">
Estas son las propiedades ms comunes:
author
Autor de la pgina.
generator
Herramienta utilizada para hacer la pgina.
classification
Palabras que permite clasificar la pgina dentro de un buscador jerrquico.
keywords
Palabras clave por las que se encontrar la pgina en los buscadores.
description
Descripcin del contenido de la pgina.
Tambin suele ser el lugar ms indicado para colocar aquellos elementos de la
pgina que no alteran el contenido de la misma, aunque si la forma de presentarla
y su comportamiento. Es por eso que es el lugar ms recomendable para colocar
los scripts y las hojas de estilo.
El cuerpo
La etiqueta <body> admite los siguientes parmetros :
bgcolor="#xxxxxx"
Permite definir el color de fondo de la pgina.
background="imagen.gif"
Permite poner un grfico de fondo para la pgina. No se debe poner una
imagen muy "pesada" de fondo, no mas de 15k. Ni olvidar verificar que no
dificulte la lectura del texto.
bgproperties="fixed"

El grfico definido como fondo de la pgina permanecer inmvil aunque


utilicemos las barras de desplazamiento.
text="#xxxxxx"
Cambia el color del texto.
link="#xxxxxx"
Cambia el color de un enlace no visitado (por defecto azul).
vlink="#xxxxxx"
Cambia el color de un enlace ya visitado (por defecto prpura).
alink="#xxxxxx"
Cambia el color que toma un enlace mientras lo estamos pulsando (por
defecto rojo).
leftmargin="num", topmargin="num"
Especifican el nmero de pixels que dejar de margen entre el borde de la
ventana y el contenido de la pgina. Se suelen utilizar para dejarlos a cero.
marginwidth="num", marginheight="num"
Ms o menos equivalentes a los anteriores, pero stos funcionan en
Netscape.
No resulta recomendable cambiar los colores del texto y enlaces a no ser que
exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas
ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y
estarn ya a su gusto.
6) ELEMNETOS DE BLOQUE Y EN LINEA:
Los de cuerpo son aquellos que estn dentro de la etiqueta <body> y estructuran
el contenido de un documento. Estos pueden dividirse principalmente en
elementos en bloque (block elements) y en elementos en lnea (inline
elements). (Existen elementos que tienen dobles clasificaciones, as tambin
existen elementos que son subordinados).
La diferencia entre ambos est dada por el Modelo de contenido, por
elFormato y la Direccionalidad, en esta resea nos vamos a centrar en las dos
primeras:
Modelo de contenido: los elementos en bloque pueden contener elementos en
lnea y a otros elementos en bloque. A su vez los elementos en lnea pueden
contener otros datos y elementos en lnea, pero no elementos en bloque. En esta
distincin est relacionada la idea de que los elementos en bloque crean
estructuras ms grandes que los elementos en lnea.
Formato: Los elementos en bloque tienen por defecto un formato diferente que el
de los elementos en lnea. Generalmente, los elementos en bloque comienzan en
una nueva lnea, y los elementos en lnea no. Es decir, cada vez que existe un
elemento en bloque, existe un salto de lnea asociado a l.

Los elementos en lnea son:

define un anchor (anclaje) (o


hipervnculo)

abbr

define una forma abreviada de una


palabra o de una frase

acrony
m

una abreviatura que incluye las letras


iniciales de una frase

se desaconseja el
uso

indica que el texto debe ser


representado con bold (o negrita).

basefo
nt

desaprobado

permite cambiar algunas propiedades


del texto
bi-directional override anulacin del
algoritmo bidireccional (en referencia
a la direccin de la escritura).

bdo

big

se desaconseja el
uso

muestra el texto marcado con un


tamao de fuente ms grande.

br

line Break Ruptura (o salto) de


lnea

cite

marca una referencia a una fuente, o


el autor de un texto citado.

code

sirve para marcar el cdigo de un


programa.

dfn

sirve para marcar el trmino que se


quiere definir.

em

emphasis nfasis

font

desaprobado

indica el tamao, color, o fuente del


texto que contiene.

se desaconseja el

muestra el texto marcado con un

uso

estilo en cursiva o itlica (no tiene un


uso semntico, slo visual).

img

imagen

input

elemento que se utiliza para capturar


la informacin del usuario
(dependiendo del contexto vara).

kbd

marca el texto que debe introducir el


usuario.

label

el elemento label (etiqueta) asocia un


rtulo o etiqueta a un campo de un
formulario.

(short quotations) cita corta.

desaprobado

(strike-through) tachado (no tiene un


uso semntico, slo visual).

samp

sirve identificar una muestra de los


caracteres que forman la salida o el
resultado de algn proceso (por
ejemplo de un programa de
computacin).

select

crea un contenedor mediante el cual


los usuarios pueden seleccionar de
una lista de opciones.

small

se desaconseja el
uso

(abarcar). Es un contenedor genrico


en lnea. Sirve para para aplicar
estilo al texto o agrupar elementos en
lnea

span

strike
strong

aplica al texto marcado un tamao de


fuente ms pequeo.

desaprobado

muestra el texto tachado con una


linea horizontal.
sirve para marcar con especial

nfasis las partes ms importantes


de un texto.

sub

crea un subndice posicionando el


texto marcado por debajo de la linea.

sup

crea un superndice posicionando el


texto marcado por encima de la linea.

textare
a

similar a input crea un control de


entrada de texto multilnea.

tt

se desaconseja el
uso

sirve para representar como texto de


teletipo (teletype) o ancho fijo.

desaprobado

muestra el texto subrayado.


marca variables de programas y
similares.

var
Los elementos en bloque son:

address

es el elemento encargado de contener la


informacin de contacto con los autores del
documento.

blockquot
e

(cita en bloque). Crea citas en bloque,


marca las citas a otros autores o
documentos.

center

desaprobad
o

el elemento center (centro) crea una caja


en bloque con el contenido centrado. En
realidad es equivalente a un div con
align=center.

dir

desaprobad
o

el elemento DIR fue diseado para crear


listas multicolumna de directorios.

div

(de division divisin). Es un elemento en


bloque genrico y sirve para crear
secciones o agrupar contenidos.

dl

(de definition list lista de definicin).


Crea una lista de definiciones.

fieldset

el elemento fieldset (grupo de campos)


permite organizar en grupos los campos de
un formulario.

form

acta como contenedor de controles.

h1

crea un encabezado o ttulo de primer nivel


para una seccin del documento.

h2

crea un encabezado o ttulo de segundo


nivel para una seccin del documento.

h3

crea un encabezado o ttulo de tercer nivel


para una seccin del documento.

h4

crea un encabezado o ttulo de cuarto nivel


para una seccin del documento.

h5

crea un encabezado o ttulo de quinto nivel


para una seccin del documento.

h6

crea un encabezado o ttulo de sexto nivel


para una seccin del documento.

hr

crea una linea de separacin horizontal.

isindex

desaprobad
o

este elemento crea un control de entrada


de texto de una lnea.

menu

desaprobad
o

en su origen fue pensado para crear


mens.

noframes

(de sin marcos). Aporta contenidos


alternativos a los marcos. Las aplicaciones
de usuario que no soporten marcos, o que
estn configuradas para no mostrarlos,
deben mostrar en su lugar el contenido de
este elemento.

noscript

contenedor de contenido alternativo para la


representacin no basada en scripts.

ol

(lista ordenada). Crea una lista ordenada.

Prrafo

pre

(preformateado). Permite que el texto


conserve el formato y sea mostrado tal cual.

table

Tabla

ul

(de unordered list, lista no ordenada). Crea


una lista no ordenada.

7) REFERENCIAS DE CARCTER:
una referencia de carcter es una pequea pieza de codigousd para representar
ciertos caracteres en documentos html. Principalmente usada para insertar
smbolos que no pertenecen al juego de caracteres (en muchos casos, smbolos
difciles de ingresar), las referencias de carcter pueden insertarse utilizando una
expresin regular. De hecho cada referencia de carcter puede insertarse de tres
formas diferentes:
1. Por su nombre de entidad: cada referencia tienen una entidad asiganda.
El formato para insertar un smbolo por su nombre de entidad est
compuesto por un smbolo & seguido de su nombre de entidad y un punto
y coma (;) por ejemplo, el smbolo de la libra esterlina () puede ser
insertar como &pound;.
2. Por su valor decimal: Tal como con las entidades, un nmero nico es
asociado con cada referencia de caracteres. El formato es compuesto por
un smbolo "&" seguido de un signo numeral ("#"), el nmero asociado y un
punto y coma (";"). Por ejemplo, el smbolo de la libra esterlina ("") puede
ser insertado como "&#163;".
3. Por su valor hexadecimal: Este mtodo funciona exactamente como el del
valor decimal con la diferencia que el nmero se escribe en formato
hexadecimal y una "x" (en minscula) se agrega a continuacin del signo
numeral ("#"). Las letras en el nmero hexadecimal deben ir en
maysculas. Por ejemplo, el smbolo de la libra esterlina ("") puede ser
insertado como "&#xA3;".

You might also like