DESARROLLO WEB

HTML
El
HTML
(Hyper
Text
Markup
Language) es un lenguaje que sirve
para escribir hipertexto, es decir,
documentos de texto presentado de
forma estructurada, con enlaces
(links)
que
conducen
a
otros
documentos o a otras fuentes de
informacin (por ejemplo bases de
datos) que pueden estar en tu propia
mquina o en mquinas remotas de
la red. Todo ello se puede presentar
acompaado de cuantos grficos
estticos o animados y sonidos
seamos capaces de imaginar.

HTML

Por supuesto, la esttica de los

documentos escritos en HTML no se
limita a texto digamos normal;
consigue todos los efectos que
habitualmente se pueden producir
con un moderno procesador de
textos: negrita, cursiva, distintos
tamaos y fuentes, tablas, prrafos
tabulados, sangras, incluso texto y
fondo de pgina de colores, y
muchos ms.

HTML
Bsicamente, la cosa es simple: la pieza
clave es el "browser", "navegador",
"visualizador" o "cliente" o como quieras
llamarle, HTML.
Todas las codificaciones de efectos en el
texto que forman el lenguaje HTML no
son ms que instrucciones para el
visualizador. Partiendo de esto, se
entiende el porqu no se ve lo mismo con
todos los visualizadores. Depende de
cmo estn diseados y para qu versin
de lenguaje estn diseados.

HTML

Si se est conectado a Internet, con un navegador, adems de ver documentos HTML

se puede recibir y enviar correo electrnico, recibir y enviar NEWS (noticias), visitar
los servidores FTP (servidores de ficheros) tanto en entrada como en salida, todo ello
con el mismo programa. Tambin, como no, se pueden imprimir los documentos
visualizados. Casi todos suelen ser "WYSWYG", es decir, que lo impreso es
exactamente como lo ves en pantalla...Siempre que tu impresora est de acuerdo,
claro.

HTML

La idea es sencilla: slo tienes que crear un documento con tu editor preferido (como
documento entenderemos el conjunto de ficheros, tanto de texto como de imgenes,
que forman las distintas pginas), guardarlo con la extensin .htm o .html, abrirlo
con tu navegador preferido, y ya tienes un hipertexto en marcha. Las pginas o
documentos creados pueden residir en el disco duro de tu ordenador personal, en un
CD-ROM, o estar a varios miles de kilmetros en otro ordenador llamado servidor web
o servidor http, que es el protocolo utilizado. Si es as, entonces te estars moviendo
por la WWW (World Wide Web, red mundial extensa) que es como se ha dado en
llamar a este tipo de servicios de Internet.

HTML

As pues, en esencia, una pgina escrita en HTML no es ms que texto normal, escrito
con cualquier editor, y al que, cuando se le quiere dar algn aspecto especial, como
por ejemplo el tamao de la letra, habr que acompaar de ciertos cdigos para
indicar el efecto deseado. A estos cdigos se les llama elementos del lenguaje.

HTML

Las instrucciones que forman el

lenguaje
HTML
les
llamaremos
elementos. Otros autores tambin las
denominan "TAGS", o "ETIQUETAS". La
notacin de los elementos consiste en
los smbolos < y > que encierran dentro
una instruccin.
Los elementos pueden ser llenos o
vacos.

HTML
Elementos con argumento
Se forman escribiendo la instruccin correspondiente seguida del texto al que se
quiere aplicar la instruccin y se termina repitiendo la instruccin pero con una barra
inclinada inmediatamente antes de la misma.
Por ejemplo, el elemento H1 que sirve para dar el mximo tamao al texto, se
escribir:
<H1> Texto de prueba </H1>.
y este sera el resultado:

Texto de prueba
Si olvidas poner </H1> todo el resto de la pgina tendr el mismo tamao, grande.

HTML
Elementos vacos
Los elementos vacos se escriben como los llenos, pero no es necesario poner la
instruccin repetida al final con una barra. Esto se debe a que estos elementos no
producen un efecto sobre el texto. Generalmente se utilizan para separar bloques de
texto, y por tanto no es necesario indicar su fin. Empiezan y terminan en el mismo
punto.
Por ejemplo, el elemento <HR> que sirve para dibujar una lnea horizontal en la
pantalla, se escribir:
<HR>
y este sera el resultado:
______________________________________________________________________________

HTML
Elementos con argumento
Algunos elementos se escriben con argumento. Es como pasarle parmetros a la
instruccin, y se llaman atributos del elemento.
Por ejemplo, el elemento <A> que sirve para hacer un link (enlace) con otro
documento o con otra pgina del actual, se escribir:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </A>.
Este es un elemento lleno donde al atributo HREF se le asigna el valor que aparece
entre comillas: "http://www.miservidor.es/mifichero.htm". El texto al que afecta este
elemento es Link de prueba y realiza un link con el fichero mifichero.htm que est
en el servidor www.miservidor.es.

HTML
Los elementos pueden escribirse tanto en maysculas como en minsculas. Puede ser
preferible la primera opcin ya que aporta claridad al documento fuente, y eso se
agradece a la hora de hacer correcciones, pero CUIDADO, el valor de algunos
atributos hay que escribirlos EXACTAMENTE como deben ser. En el ejemplo anterior no
funcionara el link si escribiramos www.miservidor.es en maysculas, eso es un
nombre de mquina y sera interpretado como OTRA mquina.
Los elementos pueden anidarse unos con otros, teniendo cuidado de poner los cierres
en el lugar adecuado. Por ejemplo, el elemento <H1> combinado con <I> que sirve
para generar texto en itlica, se escribir:
<H1><I>Texto de prueba </I></H1>.
y este sera el resultado:

Texto de prueba

HTML
Estructura de una pgina HTML
Las pginas HTML estn estructuradas en dos partes diferenciadas: el HEAD
(cabecera) y el BODY (cuerpo).
Ejemplo de pgina
Si escribes:
<!Tipo de documento>
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>
<!-- Esto es un comentario-->
<BODY>
<H1> Esto es una "demo" de documento HTML </H1>
Esto es el ms sencillo de los documentos HTML.
</BODY>
</HTML>

HTML

Estructura de una pgina HTML

HTML

El tipo de documento no es obligatorio a efectos prcticos, es decir que la pgina se

ver igual tanto si lo escribes como si no. Slo sirve como identificacin del tipo de
contenido del fichero a los efectos de cumplir las especificaciones de estndar
recomendadas por el consorcio W3C, que es el organismo que regula el lenguaje. Por
ejemplo:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
"http://w3.org/TR/REC-html40/loose.dtd">

HTML

4.0

Transitional//EN"

Significa que cumple el estndar HTML 4.0 y, adems, no contiene elementos

desaconsejables. Y esta es una definicin de marcos que cumple el estndar HTML
4.0:

HTML
En el HTML 4.0 se consideran desaconsejables
aquellos elementos que, an siendo soportados, han
sido sustituidos por otros y, por ello, es posible que
sean eliminados en el futuro. En cualquier caso, el
que un elemento escrito en tus pginas se vea o no,
depender siempre del navegador utilizado y/o de su
versin, no de lo que diga el estndar.
Para escribir comentarios en la pgina (que slo se
ven en el texto fuente, pero no en el visualizador) se
utilizar el elemento.
<!-- --> cuidado: el que no se vea de forma
normal en el navegador, no significa que no pueda
verse el cdigo fuente. Nunca escribas comentarios
con claves de acceso o datos confidenciales.

HTML
Esquema de tipos de un documento HTML
Cuando un visualizador recibe un fichero, antes de
mostrarlo necesita saber el tipo de contenido que
ste tiene, a fin de procesarlo adecuadamente. No
es lo mismo recibir un documento de texto que una
fotografa en formato GIF, o un vdeo en formato
MPG, o si lo que estamos intentando es transferir un
fichero.
En cada caso, el visualizador pondr en juego
distintas habilidades, de las muchas que posee.
Si el fichero procede de un servidor http remoto, (es
decir un servidor web; http es el nombre del
protocolo que utilizar el servicio invocado), ste se
encargar de decirle al visualizador cuanto necesite
saber, pero si lo que hay que procesar es un fichero
local, la nica forma de saberlo es por la extensin
del fichero.

HTML

La extensin de un fichero son las tres o

cuatro letras (depende del sistema operativo
con el que se trabaje) que hay despus del
nombre del fichero y que estn separadas del
mismo por un punto.
Por ejemplo, estruc.htm. Las tres letras que
hay despus del punto (htm) son la
extensin del fichero. Las otras, las que
estn delante del punto, son el nombre del
fichero.

HTML

Las extensiones de 4 o ms letras son tpicas de sistemas operativos como UNIX o

LINUX y las de 3 o menos de Windows, que ha mantenido esta costumbre por herencia
de los tiempos del DOS, ya que puede trabajar perfectamente con extensiones de ms
de 3 letras. Por ejemplo, la extensin .html funciona en Windows igual que la .htm

HTML
Estas son algunas de las extensiones stndard ms comunes y sus contenidos. La primera
de ellas suele utilizarse en sistemas UNIX-LINUX y la segunda en Windows:
.html o .htm
Documento HTML. Contine texto e instrucciones HTML que sern interpretadas.
.text o .txt
Contiene texto plano. El visualizador presentar todo el fichero como si fuera un nico
bloque de texto y no interpretar ninguna instruccin HTML que pudiera llevar. Esto lo har
con cualquier fichero que lleve una extensin desconocida o simplemente no lleve ninguna.
.gif
Contiene un fichero de imagen en formato GIF.
.npg
Contiene un fichero de imagen en formato NPG.

HTML
Los documentos HTML los puedes escribir con
lo que quieras... Siempre que los salves en
modo Solo Texto. Es decir, que si utilizas, por
ejemplo, Word de Windows o de MAC, por
defecto estos programas salvan en formato
Word. Y aunque luego los renombres como
documentos .htm o .html, el formato interno
sigue siendo Word.
Tampoco vale dejarlos con la extensin .txt
que les dejan la mayora de editores al
salvarlos en modo Solo Texto. No seran
interpretados correctamente. Por lo tanto si
tienen extensin .txt (y por supuesto son .txt),
entonces puedes renombrarlos a .htm, o bien
en el momento de guardarlos en formato Solo
Texto no dejar la extensin por defecto .txt y
darle ya directamente la extensin .htm.

HTML

Algunos procesadores de texto ya incluyen entre sus tipos el .htm. Si es as, lo que
hacen es eliminar la codificacin propia, y convertirla a elementos de HTML. Por
ejemplo, si tienes un texto en itlica, automticamente es convertido al elemento
<I>, etc.. El problema de los editores avanzados de texto y de la mayora de
programas asistentes para escribir HTML es que generan un cdigo bastante "sucio",
difcil de corregir o modificar despus. No es que no funcione, pero como el programa
no sabe cual es la finalidad del texto escrito, por defecto le pone todo lo que sabe por
si acaso, aplicando el dicho de "mejor que sobre..."