Que Es El HTML

Instituto de Educacin Superior Tecnolgico Pblico Argentina Qu es HTML?
Ing. Juan Luis Galindo Rojas Pgina 1

HTML
(HyperText Markup Language)
1. Qu es HTML?
s un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de
forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o
fuentes de informacin relacionadas, y con inserciones multimedia (grficos, sonido...). Este
lenguaje es el que se utiliza para presentar informacin en el World Wide Web.
La descripcin se basa en especificar en el texto la estructura lgica del contenido (ttulos,
prrafos de texto normal, enumeraciones, definiciones, citas, etc.), as como los diferentes efectos
que se quieren dar (cursiva, negrita, o un grfico determinado) y dejar que luego la presentacin
final de dicho hipertexto se realice por un programa especializado (como Mosaic o Netscape).
Siglas bsicas.-
WWW: World Wide Web (Web).
SGML: Standard Generalized Markup Language: es un lenguaje estndar para describir lenguajes
de marcas.
DTD: Document Type Definition: es un lenguaje markup especfico, escrito utilizando SGML.
HTML: HyperText Markup Language: HTML es un SGML DTD. En trminos prcticos, es una
coleccin de estilos (indicados por tags, marcas de markup) que definen los componentes variados
de un documento World Wide Web.
Creacin de documentos HTML
Para comenzar slo es necesario:
a) Un procesador de texto: los documentos HTML estn en formato de texto sencillo (tambin
conocido como ASCII). El procesador de texto se utiliza para escribir el documento en lenguaje
HTML, que ser posteriormente interpretado por el programa navegador correspondiente,
siempre que el documento est guardado en formato: "slo texto".
El texto escrito tiene dos partes bien diferenciadas, el contenido de la informacin y el conjunto
de etiquetas del lenguaje HTML, que permiten determinar el estilo y el tipo de letra que tendr
la presentacin del documento final y que pueda ser ledo por un programa cliente.
Para escribir un prrafo sin estilo especfico (por defecto) no es necesario poner etiqueta alguna.
Lo nico que hay que tener en cuenta es que al presentar el documento se hace caso omiso de
los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por esta
razn se utilizan una serie de etiquetas que sustituyen a estos elementos.
El texto escrito no sufrir ninguna modificacin, exceptuando los acentos, la letra "" y un
conjunto de caracteres especiales a los que, ms adelante, se dedica un apartado.
E


2. Mtodo de trabajo
En esta leccin hablaremos sobre la segunda cosa imprescindible para crear documentos html.
b) Un navegador del WWW o lo que se denomina programa cliente que permite el acceso a
pginas WWW de Internet. El programa cliente permite ver una pgina antes de introducirla en un
servidor. De este modo, se pueden comprobar las modificaciones de las distintas pginas que se
disean.
Con el procesador de textos se crea un fichero con un nombre al que necesariamente hay que
aadirle la extensin html. Por ejemplo: prueba.html. Si se aade algo nuevo se deben guardar los
cambios antes de visualizar el nuevo documento en el navegador.
El documento se abre con el comando Open File del men File del programa cliente. Los cambios
son reflejados en la pantalla. Si se trabaja con el programa cliente y el procesador de textos al
mismo tiempo, activando simplemente la opcin Reload se pueden comprobar los cambios
efectuados.
Existen ciertos programas que nos ayudan a automatizar este proceso (editores de lenguaje HTML),
pero es muy conveniente comenzar a hacerlo de manera manual para comprender bien la estructura
del lenguaje HTML.
Las etiquetas del lenguaje HTML.- El lenguaje HTML usa etiquetas o directivas (tags) para
indicarle al programa cliente de Web como mostrar el texto.
Las etiquetas estn formadas por determinados caracteres metidos entre los signos <>, y con la
barra </> cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <title>
para abrir y </title> para cerrar.
3. Estructura de un documento html
Un documento HTML comienza con la etiqueta <html> , y termina con </html>.
Dentro del documento hay dos zonas bien diferenciadas: el encabezamiento, delimitado por
<HEAD> y</HEAD>, que sirve para definir diversos valores vlidos en todo el documento.
Y el cuerpo, delimitado por <BODY> y </BODY>, donde reside la informacin del documento.
<HTML>
Encabezado <HEAD>
<TITLE>Ttulo del documento</TITLE>
</HEAD>
<BODY>
Cuerpo Texto del documento
</BODY>
</HTML>


El elemento <TITLE> permite especificar el ttulo de un documento HTML. Este ttulo no forma
parte del documento en s: no aparece, por ejemplo, al principio del documento sino que sirve como
ttulo de la ventana del programa que la muestra.
Existen muchos otros elementos que se engloban dentro del encabezamiento pero para la estructura
bsica del lenguaje html en su nivel bsico no son necesarios.
El cuerpo de un documento HTML contiene el texto que, con la presentacin y los efectos que se
decidan, se presentar ante el usuario. Dentro del cuerpo son aplicables todos los efectos que se van
a mencionar en el resto de esta gua. Dichos efectos se especifican exclusivamente a travs de
"directivas".
4. Estilos y efectos bsicos
Todas las etiquetas que siguen a continuacin se introducen a partir del tag <BODY>, es decir,
dentro del cuerpo del documento.
Ttulos.-
Mediante los ttulos, en sus diferentes niveles de importancia, se puede definir el esqueleto del
documento, su estructura bsica. HTML tiene seis niveles de cabeceras numeradas del uno al seis.
<H1>Mucha importancia</H1> Mucha importancia
<H2>Menos importancia</H2> Menos importancia
<H3>Mucha menos importancia</H3> Mucha menos importancia
5. Definicin de bloques
Hay que tener en cuenta, como ya se ha dicho antes, que al presentar el documento se hace caso
omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por
esta razn se utilizan una serie de etiquetas que sustituyen a estos elementos:
<P> y <BR>
Cuando se quiera forzar un final de lnea es necesario utilizar dos directivas especiales:
<P> para marcar un fin de prrafo
<BR> para un nico retorno de carro
La diferencia entre ambas es que la separacin de lneas que provoca <P> es algo mayor que la de
<BR>, para que los prrafos se distingan bien entre s. Las dos directivas mencionadas se sitan en
el punto en que se quiere poner la separacin.
Ninguna de las dos directivas se cierra, slo constan de una marca inicial. Por ejemplo:
<HTML>


<HEAD>
<TITLE>El ejemplo HTML mas sencillo</TITLE>
</HEAD>
<BODY>
<H1>Esta es una cabecera de nivel uno</H1>
Bienvenido al mundo HTML.
Este es el primer prrafo.<P>Y este es el segundo.<BR>
Fin de la pagina
</BODY>
</HTML>
Se trata del mnimo documento de HTML.
<PRE>
El texto preformateado (etiqueta <pre>) se aplica cuando se quiere que en la presentacin final del
documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente.
Adems, se utilizar un tipo de letra de espaciado fijo, parecido al de una mquina de escribir, ms
pequeo que el del texto normal. Este estilo de texto puede ser adecuado, por ejemplo, para una
tabla numrica sencilla.
<BLOCKQUOTE>
Indica que un texto es una cita de otra fuente. Se suele representar con tabulaciones a izquierda y
derecha y en cursiva.
<HR>
La directiva <HR> sita en el documento una lnea horizontal de separacin. Este elemento utiliza
una serie de tamaos que se indican mediante la opcin <HR SIZE=1>, <HR SIZE=2>, <HR
SIZE=3> etc. Existen seis tamaos de HR.
6. Marcado tipogrfico de frases
Veamos cmo se marcan topogrficamente las frases:
1. Negrita y cursiva
Se pueden dar tambin los atributos ms tradicionales, negrita y cursiva:
<B>Esto en negrita</B> y <I>esto en cursiva</I>, Esto en negrita y esto en cursiva


2.<TT>
Se puede utilizar un tipo de letra similar al de una mquina de escribir:
<TT>Mquina de escribir</TT>
Mquina de escribir
<CENTER>
Para centrar texto (o, en general, cualquier cosa: un grfico, por ejemplo) se usa la directiva
<CENTER>:
<CENTER>Universidad de Navarra</CENTER>
Caracteres especiales.- En el desarrollo del mtodo de trabajo se hace referencia a las existencia de
una serie de caracteres especiales del lenguaje HTML. Esos caracteres se refieren a las vocales
acentuadas y a la letra "". Existen tambin ciertas limitaciones relativas al uso de algunos smbolos
que significan algo en HTML, como el de menor que (<) o el signo ingls de and (llamado
ampersand: &).
Se tratar primero el caso ms sencillo. Existe una razn evidente que impide que se pueda escribir
ciertos smbolos directamente en un texto HTML, como por ejemplo el <, dichos smbolos tienen un
significado en HTML, y es necesario diferenciar claramente cundo poseen ese significado y
cuando se quiere que aparezcan literalmente en el documento final. Por ejemplo, < indica el
comienzo de una directiva y por ello, para que aparezca en el texto como tal hay que escribir algo
que no d lugar a confusin, en este caso < los smbolos afectados por esta limitacin y la forma
de escribirlos, se detallan a continuacin:
* < (Menor que): <
* > (Mayor que): >
* & (Smbolo de and, o ampersand): &
* " (comillas dobles): "
* " (interrogacin de apertura): ¿ Slo aceptan este smbolo los navegadores a partir de la
versin 3.0.
Es decir, que para escribir <"> en el texto HTML original se debe poner <">

El otro caso especial se da cuando en un texto HTML se quiere escribir una ee. Existen dos formas
de hacerlo. La primera, que es a la que obliga el estndar de HTML, consiste en utilizar entidades
como las que antes se presentaron para escribir ciertos smbolos. Las entidades comienzan siempre
con el smbolo &, y terminan con un punto y coma (;). Entre medias va un identificador del carcter
que se quiere que escribir. Las entidades necesarias en nuestro idioma son:


* : á
* : ü
* : é
*: Ü
* : í
*: ñ
* : ó
*: ¿
* : ú
* : ¡
Las vocales acentuadas se identifican aadiendo el sufijo "acute" a la vocal sin acentuar (puesto que
se trata de un acento agudo). Para la u con diresis y la ee se usan uml tras una u y tilde detrs una
ene, respectivamente. Para utilizar la opcin D, se utiliza la opcin: Dr.
7. Listas
HTML permite realizar listados numerados, sin numerar y listas para definir.
1. Listas sin numerar
Para crear una lista sin numerar
1. Se empieza escribiendo un tag de apertura de lista <UL>
2. Se escribe el tag <LI> seguido por el trmino que se quiera numerar (no es necesario la etiqueta
de cierre).
3. Se termina con el tag de cierre de la lista </UL>
He aqu una lista de dos trminos:
<UL>
El resultado es:
<LI>Facultades
Facultades
<LI>Institutos


Institutos
</UL>
2. Listas numeradas: una lista numerada (tambin llamada lista ordenada, de ah la denominacin
de la marca) es idntica a una lista sin numerar, excepto que se usa<OL> en lugar de <UL>.
Delante de los trminos se pone la marca<LI>, que es la misma que se utiliza en las otras listas.
El siguiente cdigo HTML: da el siguiente formato:
<OL><LI>Facultad de Derecho
1. Facultad de Derecho
<LI>Facultad de Medicina
2. Facultad de Medicina
<LI>Facultad de Ciencias</OL>
3. Facultad de Ciencias
8. Las listas de definiciones
Una lista de definicin consiste en trminos alternativos (abreviados como DT) y una definicin
(abreviada como DD). Normalmente los browsers del web dan la definicin en una nueva lnea.
He aqu un ejemplo de una lista de definicin:
<DL>
<DT> <B>HTML</B>:
<DD>HyperText Markup Language -- HTML es un SGML DTD. En trminos prcticos, es una
coleccin de estilos (indicados por tags (marcas) de markup) que definen los componentes variados
de un documento World Wide Web.
</DL>
El resultado es:
HTML: HyperText Markup Language -- HTML es un SGML DTD. En trminos prcticos, es
una coleccin de estilos (indicados por tags (marcas) de markup) que definen los componentes
variados de un documento World Wide Web.
Tanto la marca <DT> como la marca <DD> pueden contener mltiples prrafos (basta con
separarlos con las marcas indicativas de prrafo <P> ), listas, o cualquier otra informacin en la
definicin.


Comentarios.- Para incluir un comentario en un documento HTML, es decir, una aclaracin que no
aparece en la presentacin final del documento, se encierra el texto que formar el comentario entre
los smbolos .
9. Enlaces y Grficos
Adems de los muchos estilos y capacidades de presentacin que ofrece HTML para estructurar el
documento en s, existen varias directivas que permiten definir relaciones entre diferentes
documentos y estructurar todo un conjunto de documentos para crear una unidad lgica. La
facilidad para definir este tipo de enlaces es una de las razones de la potencia y versatilidad de
HTML.
Los enlaces en HTML se expresan insertando entre la directiva <A> el objeto (que puede ser un
fragmento de texto o un grfico) que vaya a servir como anclaje para el enlace. Por ejemplo, si se
marca con <A> un grfico, cuando en el documento final se pulse con el ratn sobre dicho grfico
se saltar al objeto referenciado en el enlace: otro documento, un vdeo musical, o cualquier imagen.
Qu es un URL? .- Para especificar de manera uniforme el objeto al que apunta el enlace, se utiliza
una forma estandarizada que se denomina URL (Uniform Resource Locator, es decir, Localizador
Uniforme de Recursos ). Un URL est formado de la siguiente manera: esquema://maquina/ruta.
El esquema es un nombre que identifica el tipo de servicio que va a proporcionarse en el destino del
enlace. La razn de esta aparente complicacin es que el WWW pretende unificar el acceso a
servicios de informacin que previamente eran incompatibles entre s, como ftp, gopher o telnet.
El esquema ms utilizado es http, correspondiente al propio WWW (es decir, cualquier referencia a
un documento HTML debera comenzar con http://). Otros esquemas muy frecuentes son ftp, telnet,
gopher o wais.
La mquina y la ruta sirven para localizar el objeto al que apunta el enlace. La mquina es la
identificacin del servidor en el cual est situado el objeto al que apunta el enlace.
La ruta es el nombre del archivo que contiene el documento en concreto, incluyendo el nombre del
subdirectorio en el que se encuentra.
La estructuracin habitual de la informacin en un servidor de WWW suele empezar, con una
pgina de bienvenida (home page) que podra compararse con la portada de un peridico o revista.
El resto de la informacin que se puede encontrar en un servidor de WWW se distribuye a partir de
ese directorio raz en distintos subdirectorios y archivos.
10. Los enlaces
Para definir un enlace es necesario marcar con la directiva <A> el objeto del cual va a partir dicho
enlace. Dicha directiva debe incluir el parmetro HREF="URL" para especificar el destino del
enlace. Es decir, que antes del objeto elegido se debe abrir con <A HREF="URL">, y despus
cerrar con </A>. Por ejemplo, si se quiere que el texto "pulse aqu para visitar la Universidad de
Navarra" conduzca a la home page de la Universidad de Navarra, se deber escribir en el texto
HTML:


<A HREF="http://www.unav.es/">Pulse aqu para visitar la Universidad de Navarra</A>
En la pantalla aparecer un texto subrayado de color azul- es el estndar- que indica la existencia de
un link o de hipertexto que lleva a la direccin que se indica.
Enlaces dentro de la misma pgina.- A veces, en el caso de documentos muy extensos puede
interesar dar un salto desde una posicin a otra determinada. Para esto, lo que antes se ha llamado el
destino del enlace es el sitio dentro de la pgina al que se quiere llegar.
Se sustituye por #marca (la palabra marca puede ser cualquier palabra). Las palabras que vayan
entre las etiquetas <A HREF="#marca"> Palabras</A> aparecern en la pantalla en color (en
forma de hipertexto). Su estructura sera:
<A HREF="#marca"> Vea el ejemplo del enlace en una pgina </A>
Y en el sitio exacto a donde se quiere saltar, se debe poner la siguiente etiqueta:
<A NAME="marca">Enlace dentro de una pgina </A>
Por ejemplo, si se quiere saltar desde el principio del documento al final del documento se coloca la
siguiente etiqueta:
<A HREF="#final"> Pulsa para ir al final</A>
Que resulta como: Pulsa para ir al final (se puede comprobar cmo salta a la pantalla final).
Y en el final del documento se pone esta otra etiqueta:
<A NAME="final"> </A>
Ese enlace en lugar de llevar a otro documento lleva a la parte final del mismo documento.
El mismo efecto se consigue con la herramienta "Top". Utilizando el tag: <A HREF="#top"> se
consigue que se vuelva al principio de la pgina.
11. Los Grficos
Para incluir un grfico en un documento HTML se utiliza la directiva <IMG>. En dicha directiva
debe incluirse un parmetro SRC="URL", con el cual se indica dnde est el fichero con el grfico
concreto que se quiere para el documento. Esto pone a disposicin una gran flexibilidad, ya que se
puede complementar el contenido del documento tanto con grficos que se encuentren disponibles
en el servidor de WWW, como con una foto situada en un servidor de la NASA o del Ministerio de
Cultura, por ejemplo, sin que el lector final tenga por qu apreciar ninguna diferencia.
Existe alguna limitacin respecto a los formatos grficos que los programas lectores de HTML
puede interpretar sin problemas. El formato ms utilizado es el GIF, que cualquier programa con
capacidades grficas debera poder mostrar directamente (Mosaic y Netscape pueden hacerlo).
Hay un parmetro optativo de la directiva <IMG> que sirve para proponer un texto alternativo a un
grfico. Este texto aparecer cuando se est usando para leer el HTML un programa sin capacidades


grficas (por ejemplo Lynx, que slo trabaja con texto). Se trata de alt="texto". Conviene utilizarlo
cuando los grficos sirven como origen a hiperenlaces, porque si no los programas sin capacidades
grficas no podrn mostrar los enlaces establecidos.
Para colocar en este punto del documento una imagen que est en el mismo subdirectorio que este
manual, en el fichero fotografia.gif, se escribe:
<IMG SRC="URL/fotografia.gif" ><P>
Los documentos de informacin grfica deben optimizarse para la visualizacin, es decir, hay que
minimizar la tabla de colores con el fin de disminuir el tamao que ocupan las imgenes.
Tags adicionales.- Lo anterior es suficiente para producir documentos HTML bsicos. Para crear
documentos mas complejos, el HTML tiene tags para varios tipos de listas, secciones previamente
creadas, citas extensas, tablas, mapas, formularios y otras utilidades. Esto entrara dentro de un nivel
ms elevado en el aprendizaje del lenguaje HTML.
Un ejemplo ms largo
<HTML>
<HEAD>
<TITLE>Ejemplo mas largo </TITLE>
</HEAD>
<BODY>
<H1>Un ejemplo mas largo </H1>
Este es un documento HTML sencillo. Este es el primer párrafo. <P>
Este es el segundo párrafo, con efectos especiales. Esta es una palabra en <I>cursiva</I>.
Esta es una palabra en <B>negrita</B>.
He aquí una imagen GIF:<P>
<IMG SRC="http://www.unav.es/iconos/cabeza.gif">. <P>
Este es el tercer párrafo, que demuestra links. He aqui un hypertext de la palabra <A
HREF="http://www.unav.es/un/infounav.html">Acerca de la Universidad de Navarra</A> a un
documento llamado:"infounav.html". <P>
<H2>Una cabecera de segundo nivel </H2>
He aquí una sección de texto que se debe mostrar como una fuente de ancho
fijo:<P>
<PRE>Con diez cañones por banda,


viento en popa a toda vela
no corta el mar sino vuela
un velero bergantín</PRE>
<HR>
Fin del documento
</BODY>
</HTML>
12. Un ejemplo
Veamos un ejemplo ms largo realizado con lenguaje html.
<HTML>
<HEAD>
<TITLE>Ejemplo mas largo </TITLE>
</HEAD>
<BODY>
<H1>Un ejemplo mas largo </H1>
Este es un documento HTML sencillo. Este es el primer párrafo. <P>
Este es el segundo párrafo, con efectos especiales. Esta es una palabra en <I>cursiva</I>.
Esta es una palabra en <B>negrita</B>.
He aquí una imagen GIF:<P>
<IMG SRC="http://www.unav.es/iconos/cabeza.gif">. <P>
Este es el tercer párrafo, que demuestra links. He aqui un hypertext de la palabra <A
HREF="http://www.unav.es/un/infounav.html">Acerca de la Universidad de Navarra</A> a un
documento llamado:"infounav.html". <P>
<H2>Una cabecera de segundo nivel </H2>
He aquí una sección de texto que se debe mostrar como una fuente de ancho
fijo:<P>
<PRE>Con diez cañones por banda,


viento en popa a toda vela
no corta el mar sino vuela
un velero bergantín</PRE>
<HR>
Fin del documento
</BODY>
</HTML>

Que Es El HTML

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Que Es El HTML

Hochgeladen von

Copyright:

Verfügbare Formate

Instituto de Educacin Superior Tecnolgico Pblico Argentina Qu es HTML?

Ing. Juan Luis Galindo Rojas Pgina 1

Das könnte Ihnen auch gefallen