HTML, siglas deHyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). Formato de texto
Una idea importante de HTML es la de definir lo que se desea hacer (resaltar una palabra o un párrafo, utilizar un espaciado constante, etc.), pero no decir cómo se desea hacerlo, dejando que esta función la realice el browser de acuerdo con sus posibilidades. Por ejemplo, se le puede decir al browser que se quiere remarcar una palabra sin decirle que la ponga en bold; de ordinario la remarcará poniéndola en bold, pero si el browser se está ejecutando en un ordenador que no permite texto en bold, el propio browser buscará una forma alternativa de remarcar esa palabra.De todas formas, los autores quieren muchas veces determinar más en concreto cómo va a aparecer su texto en la pantalla del browser. Además, cada vez es más infrecuente ejecutar un browser que no tenga las amplias posibilidades de formatear texto de Mac o Windows. La consecuencia es que HTML se ha extendido y permite tanto definir de modo general la función del texto como determinar en concreto el formato con que se debe representar. A continuación se muestran algunos ejemplos de ambas formas de definir los formatos.| Así se escribe: | Así se ve: |
|---|---|
| <FONT SIZE="+1" COLOR="red" FACE="Arial"> Define tipo de letra, tamaño y color a tu gusto </FONT> | Define tipo de letra, tamaño y color a tu gusto |
<P>Una palabra o un fragmento de texto se puede resaltar con el tag STRONG o con el tag EM, que en la mayor parte de los browsers se corresponden con <STRONG>bold</STRONG> e <EM>italic</EM></P> | Una palabra o un fragmento de texto se puede resaltar con el tag STRONG o con el tag EM, que en la mayor parte de los browsers se corresponden con bold e italic. |
<P>En cualquier caso, también se pueden utilizar los tags <B>bold</B> (B) e <I>italic</I> (I).</P> | En cualquier caso, también se pueden utilizar los tags bold (B) eitalic (I). |
<P>Para escribir con una <TT>letra de paso constante (estilo teletipo)</TT> se emplea la Tag TeleType</P> | Para escribir con una letra de paso constante (estilo teletipo) se emplea la Tag TeleType. |
<P>Para que el texto <BLINK>parpadee</BLINK> se emplea la TAG Blink.</P> | Para que el texto se emplea la Tag Blink. |
| <P>Títulos: <H1>1</H1><H2>2</H2><H3>3</H3> <H4>4</H4><H5>5</H5><H6>6</H6></P> | Títulos: 123456 |
| <P>Alineados:</P> <P ALIGN="LEFT">Izquierda</P> <P ALIGN="RIGHT">Derecha</P> <P ALIGN="CENTER">Centrado</P> </P> | Alineados: Izquierda
Derecha
|
| Otros efectos: <P><U>subrayado</U> <P><STRIKE>tachado</STRIKE> <P><BIG>letra más grande que el estándar</BIG> <P><SMALL>letra más pequeña que el estándar</SMALL> <P>Texto tipo<SUB>subíndice</SUB> <P>Texto tipo<SUP>superíndice</SUP> | Otros efectos: subrayado letra más grande que el estándar letra más pequeña que el estándar Texto tiposubíndice Texto tiposuperíndice |
Volver al inicio
Listas no ordenadas
| Así se escribe: | Así se ve: |
|---|---|
<P>Las listas no ordenadas: <UL> <LI>Van precedidas por "bullets" <LI>Se entiende que no importa el orden <LI>Se utilizan con mucha frecuencia </UL> | Las listas no ordenadas:
|
Listas ordenadas:
| Así se escribe: | Así se ve: |
|---|---|
Las listas ordenadas: <P>Las listas ordenadas: <OL> <LI>Van precedidas por números <LI>La numeración es automática <LI>Son también muy utilizadas </OL> | Las listas ordenadas:
|
Listas de definiciones:
| Así se escribe: | Así se ve: |
|---|---|
<P>Las listas de definiciones: <DL> <DT>Primer término <DD>Definición del 1er término <DT>Segundo término <DD>Definición del 2º término </DL> | Las listas de definiciones:
|
Volver al inicio
Tablas
Las tablas son uno de los elementos más interesantes de HTML. Permiten, por ejemplo, escribir texto en varias columnas, hacer listas de equivalencias, tablas propiamente dichas, etc. Este documento es un ejemplo de las posibilidades ofrecidas por las tablas.| Así se escribe: | Así se ve: | ||||
|---|---|---|---|---|---|
<TABLE BORDER=1> <TR><TD>celda (1,1)</TD><TD>celda (1,2)</TD></TR> <TR><TD>celda (2,1)</TD><TD>celda (2,2)</TD></TR> </TABLE> |
| ||||
<CENTER><TABLE BORDER=1> <TR><TD>celda (1,1)</TD><TD>celda (1,2)</TD></TR> <TR><TD>celda (2,1)</TD><TD>celda (2,2)</TD></TR> </TABLE></CENTER> |
Volver al inicio
Anclas
Las anclas son referencias que se emplean en el archivo con el fin de ser el punto de destino de un link. En el archivo son invisibles pero al clicar sobre una palabra señalada como link, la visualización de la página pasa a ser el punto donde se había definido el ancla.| Así se escribe: | Así se ve: |
|---|---|
<P><A NAME "ancla"> |
Volver al inicio
Links
Los links son palabras diferenciadas en un archivo HTML, y tienen la función de enviar al usuario a algún ordenador remoto, o a algún sitio de la página, que esté señalada por un ancla. Los links forman lo que se llama hipertexto.| Así se escribe: | Así se ve: |
|---|---|
<P>Este link envía al Web de la Universidad<P> <A HREF="http://193.145.249.23">Al Web</A> | Este link envía al Web de la Universidad Al Web |
<P>Este link envía al ancla<P> <A HREF="#ancla">Al ancla</A> | Este link envía; al ancla Al ancla |
Volver al inicio
Inserción de imágenes
Un recurso que da mucha vida a una página hecha con HTML es la inserción de elementos gráficos. La forma de insertar una imagen es la siguiente:| Así se escribe: | Así se ve: |
|---|---|
<IMG SRC="todo.gif"> |  |
Volver al inicio
Imágenes clicables
Se pueden unir los dos apartados anteriores, es decir, se puede crear una imagen que a la vez sea un link. Al clicar sobre la imagen, ésta te enviará a un documento o un ancla destino.| Así se escribe: | Así se ve: |
|---|---|
<P><A HREF="#ancla"> <IMG SRC="todo.gif"> </A> | |
Volver al inicio
Imágenes sensibles
Imágenes sensibles son un tipo de imágenes las cuales detectan la zona en la que se ha clicado y según el punto realizan un link a una zona del documento u a otra (o entre archivos). Hay que definir los puntos de la imagen y la zona a la que hay que ir si se clica. Se pueden definir zonas rectangulares, circulares y poligonales. El ejemplo crea dos zonas rectangulares definiendo los puntos según las coordenadas del punto superior izquierdo y el del punto inferior derecho.| Así se escribe: | Así se ve: |
|---|---|
<P><IMG USEMAP="#mapadirec" SRC="mapa.gif"> <MAP NAME="mapadirec"> <AREA COORDS=0,0,47,46 HREF="http://193.145.249.23"> <AREA COORDS=47,0,96,46 HREF="#ancla"> </MAP> |  |
No hay comentarios.:
Publicar un comentario