Professional Documents
Culture Documents
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
<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 .
<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>.
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.
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"
abbr
acrony
m
se desaconseja el
uso
basefo
nt
desaprobado
bdo
big
se desaconseja el
uso
br
cite
code
dfn
em
emphasis nfasis
font
desaprobado
se desaconseja el
uso
img
imagen
input
kbd
label
desaprobado
samp
select
small
se desaconseja el
uso
span
strike
strong
desaprobado
sub
sup
textare
a
tt
se desaconseja el
uso
desaprobado
var
Los elementos en bloque son:
address
blockquot
e
center
desaprobad
o
dir
desaprobad
o
div
dl
fieldset
form
h1
h2
h3
h4
h5
h6
hr
isindex
desaprobad
o
menu
desaprobad
o
noframes
noscript
ol
Prrafo
pre
table
Tabla
ul
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 £.
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 "£".
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 "£".