Curso HTML

1
El lenguaje que "hablan" las páginas web se llama HTML (HyperText Markup
Language) y fue creado en 1992 por un físico nuclear llamado Tim Berners-Lee.
Berners-Lee tomó dos herramientas preexistentes: el concepto de hipertexto (que
permite conectar documentos entre sí a través de palabras que obran como
puentes) y el SGML (siglas en inglés de lenguaje estándar de marcación general),
que sirve para poner etiquetas o marcas en un texto que indiquen qué es cada
parte y cómo debe verse.
El HTML (siglas en inglés de Lenguaje de Marcación General de Hipertexto) no es

exactamente un lenguaje, sino un sistema muy simple de etiquetas (algo así como
palabras claves) que contienen órdenes y se insertan en el texto que uno quiere
publicar. Es decir: un documento HTML no es más que texto. Parte de ese texto es
lo que uno quiere comunicar; el resto son las etiquetas HTML, que le explican a los
browsers que reciban la página cómo va a estar dispuesta la información que se ve
en pantalla. Por ejemplo, una etiqueta HTML puede servir para indicar: "el título a
continuación va en negrita", o "acá va insertada una imagen".
Estructura básica de una etiqueta
La estructura de una etiqueta HTML es simple. La orden siempre va encerrada entre

los signos mayor que (<) y menor que (>). Por ejemplo: "Acá empieza el título del
documento" se escribe: <TITLE>, para indicar el fín del título utilizamos la barra
"/" en la etiqueta: </TITLE>.
Cualquier documento HTML bien

redactado tiene ocho etiquetas básicas
que marcan las secciones principales del
archivo:
La etiqueta <HTML> indica el inicio de

un documento HTML.
Cabecera:
Las etiquetas <HEAD> y </HEAD>
delimitan, respectivamente, el comienzo y
el final de la cabecera del documento. La
cabecera es un lugar en el que se puede
guardar información acerca del
documento que, en principio, no va a aparecer en el interior de la ventana del
browser del usuario. Por ejemplo, aquí se coloca las etiquetas <TITLE> y
</TITLE>, entre medio de las cuales se pueden poner palabras que servirán para
darle un nombre genérico al documento. Atención: este título aparecerá en la
delgada barra superior de la ventana del browser (en Windows, típicamente
dispuesta en azul), no dentro de la pantalla. Por lo tanto, el contenido dentro de
<TITLE> y </TITLE> (pese al nombre de estas etiquetas) no suele ser
interpretado por los usuarios como el título real de la página; sólo sirve como una
referencia. Hay otras etiquetas, que veremos más adelante, que cumplen mejor la
función de titular un documento.
Cuerpo:
Las etiquetas <BODY> y </BODY>, delimitan el cuerpo del documento. El cuerpo
contiene todo lo que el usuario observará en pantalla, es decir, en la ventana
principal del navegador. Entre estas dos etiquetas va el texto que uno quiere
2
publicar, intercalado con las etiquetas HTML necesarias para que se vea
adecuadamente en pantalla.
En la última línea, la etiqueta </HTML> indica la finalización del documento HTML.
A continuación, vamos a ir descubriendo las etiquetas básicas que se pueden

insertar dentro del espacio delimitado por <BODY> y </BODY> para darle
formato al texto que contenga el documento:
• Texto en negrita
• Texto realzado
• Texto en bastardilla
• Texto subrayado
• Texto tachado
• Párrafos
• Cómo alinear un párrafo
• Cortes
• Línea divisoria
• Comentarios
Texto en negrita:
Ejemplo : <B> Sólo sé que no sé nada </B>
El usuario verá en negrita todo el texto que quede encerrado entre estas etiquetas.
En este caso, leerá: Sólo sé que no se nada. La "B" de la etiqueta significa "bold"
(negrita, en inglés).
Texto realzado:
Utilizado para dar mayor énfasis al texto. Normalmente, cumple el mismo efecto
que la etiqueta <B>.
Ejemplo: <STRONG>pero aún supero a la generalidad de los hombres

</STRONG>
El usuario verá: pero aún supero a la generalidad de los hombres
Texto en bastardilla
Ejemplo: <I> que ni siquiera está al tanto de eso </I>
El usuario verá: que ni siquiera está al tanto de eso. La "I" de esta etiqueta
significa "italics" (bastardilla o itálica, en inglés).
Texto subrayado:
Ejemplo: <U> Sócrates </U>.
El usuario verá: Sócrates.

La "U" de esta etiqueta significa "underlined" (subrayado, en inglés).
3
Texto tachado:
Ejemplo: <STRIKE> que publicó dos libros </STRIKE>

El usuario verá: que publicó dos libros
Delimitación de párrafos
Para dividir el texto en párrafos no basta establecer una separación con cortes
"manuales" (realizados con la tecla "Enter"). Es necesario hacerlo mediante la
etiquetas <P> y </P>.
<P>Cuando escribo un párrafo, por más que escriba en una línea,

y en otra,
y en otra,
todo formará parte del mismo párrafo mientras se encuentre dentro de las
etiquetas. </P> <P>¿Está claro?</P>
El usuario verá:
Cuando escribo un párrafo, por más que escriba en una línea, y en otra, y en otra,
todo formará parte del mismo párrafo mientras se encuentre dentro de las
etiquetas.
¿Está claro?
Cómo alinear un párrafo
Mediante el atributo ALIGN, utilizado dentro de la etiqueta <P> puedo alinear el

texto en tres formas:
LEFT: Justifica el texto a la izquierda.
RIGHT: Justifica el texto a la derecha.
CENTER: El texto aparece centrado.
Ejemplo:
<P ALIGN="LEFT">
1. El coronel destapó el tarro de café y comprobó que no había más que una
cucharadita. Retiró la olla del fogón, vertió la mitad del agua en el piso de tierra, y
con un cuchillo raspó el interior del tarro sobre la olla hasta que se desprendieron
las últimas raspaduras del polvo de café revueltas con óxido de la lata.
</P>
<P ALIGN=RIGHT>
2. El hecho ocurrió en el mes de febrero de 1969, al norte de Boston, en
Cambridge. No lo escribí inmediatamente porque mi primer propósito fue olvidarlo,
para no perder la razón. Ahora, en 1972, pienso que si lo escribo, los otros lo
leerán como un cuento y, con los años, lo será tal vez para mí.
</P>
<P ALIGN=CENTER>
3. Julio Cortázar nació en Bruselas en 1914. Se educó en Argentina, de donde eran
sus padres y cuya nacionalidad adoptó. Realizó estudios de Letras y de Magisterio,
y trabajó durante algún tiempo de maestro rural. En 1951 fijó definitivamente su
residencia en Paris, dónde desarrollo su brillante y prolífica carrera literaria, iniciada
dos años antes con la publicación de Los reyes. Murió en Paris en febrero de 1984.
</P>
4
Esto dará como resultado:
1. El coronel destapó el tarro de café y comprobó que no había más que una
cucharadita. Retiró la olla del fogón, vertió la mitad del agua en el piso de tierra, y
con un cuchillo raspó el interior del tarro sobre la olla hasta que se desprendieron
las últimas raspaduras del polvo de café revueltas con óxido de la lata.
2. El hecho ocurrió en el mes de febrero de 1969, al norte de Boston, en
Cambridge. No lo escribí inmediatamente porque mi primer propósito fue olvidarlo,
para no perder la razón. Ahora, en 1972, pienso que si lo escribo, los otros lo
leerán como un cuento y, con los años, lo será tal vez para mí.
3. Julio Cortázar nació en Bruselas en 1914. Se educó en Argentina, de donde eran
sus padres y cuya nacionalidad adoptó. Realizó estudios de Letras y de Magisterio,
y trabajó durante algún tiempo de maestro rural. En 1951 fijó definitivamente su
residencia en Paris, dónde desarrollo su brillante y prolífica carrera literaria, iniciada
dos años antes con la publicación de Los reyes. Murió en Paris en febrero de 1984.
Cortes
No siempre necesito dividir la información en párrafos claramente separados. A

veces, basta sólo un salto de línea. Esta es la función de la etiqueta <BR>.
Ejemplo:
-Su llamada a Nueva York, señora Glass- dijo la operadora. <BR>
-Gracias-contestó la chica, e hizo sitio en la mesita de noche para el cenicero.
<BR>
A través del auricular llegó una voz de mujer: <BR>
-Muriel, ¿eres tú? <BR>
El usuario verá:
-Su llamada a Nueva York, señora Glass- dijo la operadora.
-Gracias- contestó la chica, e hizo sitio en la mesita de noche para el cenicero.
A través del auricular llegó una voz de mujer:
-Muriel, ¿eres tú?
Lineas divisorias
<HR> se utiliza para separar bloques de texto con una línea horizontal.
Ejemplo:
Fin de este párrafo. <HR> Comienzo del otro.
El usuario verá:
Fin de este párrafo.
Comienzo del otro.
Comentarios:
En una página HTML, los comentarios se introducen entre las etiquetas .
Todo texto situado entre dichas marcas será ignorado por el browser, y, por lo
tanto, no será visible para el usuario común a través del navegador.
Ejemplo: 

5
Otros elementos útiles del HTML para trabajar el texto de una página web son:
• Fuentes: tamaño, color y tipo

• Listas (ordenadas y no ordenadas)
Tamaño y tipo de letra
La etiqueta de tipografía <FONT> posee tres atributos: SIZE, COLOR y FACE, que
permiten definir, respectivamente, el tamaño, color y tipo de letra:
El atributo SIZE: Regula el tamaño de los caracteres.
<FONT SIZE=3> Texto de tamaño 3 </FONT>
El usuario verá: Texto de tamaño 3
<FONT SIZE=4>Este tiene un tamaño 4 </FONT>
El usuario verá: Este tiene un tamaño 4

El atributo COLOR: Especifica el color de los caracteres. Los colores se identifican
mediante el nombre del color en inglés (como red, white o black) o mediante un
código hexadecimal con el formato "#rrggbb", donde "rr", "gg" y "bb" son valores
hexadecimales comprendidos entre 00 y FF que especifican el grado de saturación
de los colores rojo, verde y azul.
<FONT COLOR="red"> ROJO. </FONT> = ROJO.

<FONT COLOR=#FF0000> ROJO, también. </FONT> = ROJO, también.
El atributo FACE: permite definir el tipo de letra que se quiere utilizar: Algerian,
Arial, Times New Roman, Courier, MS Serif, Symbol, System, Times New Roman,
etc.
Atención: el usuario sólo verá el texto en el tipo de fuente elegido por el diseñador
si esa fuente está instalada en la PC del usuario. Eso reduce considerablemente el
número de tipografías "confiables". Cualquier computadora con windows tiene, con
seguridad, tres tipografías: Times New Roman, Arial y Courier.
<FONT FACE=Times New Roman> Este texto está en tipografía Times New
Roman</FONT>
El usuario verá: Este texto está en tipografía Times New Roman
Una misma etiqueta <FONT> puede combinar varios atributos:
<FONT FACE=Times New Roman SIZE=6 COLOR=#00FF00> Texto de color

verde y tamaño 6 </FONT>
El usuario verá:
Texto de color verde y tamaño 6.

6
Listas
Las listas nos permiten ordenar ciertos contenidos. Hay dos tipos de listas:
desordenada (<UL> y </UL>) y ordenada (<OL> y </OL>). La estructura de las
etiquetas es igual para ambos tipos de listas: poniendo <LI> para marcar el
principio de cada una, la línea termina cuando aparece un nuevo símbolo <LI> o
se cierra la lista.
Un ejemplo de lista ordenada numericamente sería:
<OL>
<LI> Primer elemento
</OL>
El usuario verá:
1. Primer elemento
2. Segundo elemento
Un ejemplo de lista desordenada sería:
<UL>
<LI> Segundo elemento
</UL>
El usuario verá:
• Primer elemento
• Segundo elemento
7
Cómo introducir vínculos en mi página web
Para definir un vínculo utilizaremos el par de etiquetas <A> </A>, cuyo nombre
significa "anchor" ("ancla" en inglés). El atributo o complemento que esta etiqueta
debe tener para "tirar" un ancla hacia otra página es HREF (Hypertext REFerence,
o referencia de hipertexto). Básicamente un vínculo consiste en la combinación de
las etiquetas <A> </A> y el atributo HREF, con el detalle de la dirección a la quiero
ir y un texto que me sirva de referencia:
<A HREF="dirección de Internet a la que quiero ir"> Texto sobre el

cual el ususario deberá hacer click </A>
Supongamos que nuestra página habla de rock y que queremos introducir vínculos
hacia otras páginas que aborden el mismo tema.
Hay diferentes posibilidades:
Vincularse con otros sitios. Ejemplo: quiero establecer un link hacia el sitio de
música rockandweb.com.
Si quieres ir a RockandWeb <A HREF="rockandweb.com"> haz clic aquí. </A>
El usuario verá :
Si quieres ir a RockandWeb haz click aqui.
Vincularse a documentos específicos en otros sitios.
También puede ocurrir que nuestro link no esté dirigido a la página de entrada de
un site sino a un documento determinado dentro de ese site. Ejemplo: quiero hacer
un link hacia la sección de rock dentro del site "amarillas.com". En este caso habrá
que escribir la ruta completa hacia la sección rock del site amarillas.com.
En ese caso:
También podemos destacar la
<A HREF="http://www.amarillas.com/rock/index.html">sección de rock del site
amarillas.com </A>
El usuario verá:
8
También podemos destacar la sección de rock del site amarillas.
Vincular un documento dentro del mismo sitio. En la mayoría de los casos no

nos interesa crear un link a lugares tan lejanos, sino vínculos dentro de nuestro
propio site. Supongamos que queremos hacer un link hacia un página creada por
nosotros. Los vínculos a direcciones dentro del mismo site suelen ser "relativos",
porque no hace falta incluir la dirección entera (con el tramo que va desde
"http://" hasta la primera "/"), sino la dirección sólo a partir del lugar en el que
nos encontramos.
Ejemplo: queremos hacer un vínculo a una página con información sobre Charly
García creada por nosotros y cuyo documento se llama charly.html. bastará con
que nuestro link contenga el nombre del archivo.(siempre que el archivo se
encuentre en el mismo directorio)
En ese caso será:

También está mi página <A HREF="charly.html"> sobre Charly García </A>
Pasemos todo en limpio. Primero, el HTML:
<HTML>
<HEAD>
<TITLE> Mi página de Rock </TITLE>
</HEAD>
<BODY>
<FONT FACE=Times New Roman SIZE=3>
<P ALIGN=RIGHT>
Te recomiendo algunos sites interesantes sobre rock,
la música que domina al mundo
</P>
<P> Si quieres ir a Rockandweb
<A HREF="http://www.rockandweb.com"> haz click aqui. </A>
Tambien podemos destacar la <A
HREF="http://www.amarillas.com/rock/index.html">
sección de rock del site amarillas
</A>
Y no te olvides de visitar mi página
<A HREF="charly.html"> sobre Charly Garcia
</A>
</BODY>
</HTML>
El resultado:
9
También puede ocurrir que, encontrándonos en nuestra página principal,

necesitemos crear un link relativo a un archivo llamado "biografía.html" que se
encuentra en la carpeta "charly", que hemos creado dentro de el directorio en el
que tenemos la pagina principal.
En ese caso, el link será:

Puedes leer más <A HREF="/charly/biografia.html>sobre la vida de Charly García
</A>
¿Y si queremos volver al índice? En ese caso utilizaremos "../" para indicar que el
documento se encuentra en la carpeta anterior:
<A HREF="../index.html>Volver al índice</A>
Hipervínculos dentro un mismo documento

(navegación interna)
El punto de partida del vínculo (en donde el usuario hará clic) se escribe:
<A HREF= "#capitulo2> Ir al capítulo 2</A>
Para que los vínculos internos funcionen es necesario introducir el signo numeral
"#", antes del nombre que le asignemos al link. El punto de destino del vínculo (es
decir, el lugar de la misma página al que será "transportado" el usuario tras el clic)
también se delimita con unas etiquetas <A> y </A>, pero el atributo HREF cambia
por NAME:
<A NAME="capitulo2"> Capítulo 2 </A>
Así se ve este ejemplo en el Bloc de Notas:
Capítulo 1 <BR>
<A HREF="#capitulo2>Capítulo 2 </A>
Capítulo 3 <BR>
10
Capítulo 4 <BR>
Capítulo 5 <BR>
Capítulo 6 <BR>
Capítulo 7 <BR>
<HR>
Capítulo 1 <BR>
Texto - Texto - Texto - Texto -
<A NAME="capitulo2>Capítulo 2</A>
Cómo hacer un link a mi dirección de correo

El hipervínculo también nos permite "anclar" nuestra dirección de correo a una
palabra, para que la persona que visite nuestra página nos pueda mandar un email
con un solo clic. No sé a ustedes, pero a mí la idea de mandar un mensaje sin
necesidad de abandonar el browser, correr el programa de correo, abrir un mensaje
en blanco y escribir la dirección, me resulta interesante.
La estructura en HTML es muy parecida a la de los hipervínculos comunes. Sólo hay

que agregar la partícula "mailto:" en el contenido del atributo HREF.
Supongamos que queremos vincular la dirección pamela_anderson@elsitio.com (la

dirección es ficticia, así que ni lo intenten). Entonces:
Cualquier duda <A HREF=mailto:pamela_anderson@elsitio.com> mandame

un email </A>
Y se verá en el browser:
Cualquier duda mandame un email
También se pueden predeterminar el título del mail e incluir copias del mensaje a
otras direcciones.
Ejemplo: Si quiero que el título del mail que me mande el usuario sea "Me gustaría
saber más sobre...", la estructura del hipervínculo sería:
Si necesitás más información <A HREF=mailto:pamela_anderson@elsitio.com?

Subject=Me gustaría saber más sobre...> mandame un mail </A>
Si necesitás más información mandame un mail
Para predeterminar el envío de copias "carbónicas" (Cc) a otros usuarios:

11
Si necesitás más información <A HREF=mailto:pamela_anderson@elsitio.com?

Cc=novio_de_pamela@elsitio.com> mandame un mail </A>
Cómo insertar imágenes en tu página web
La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va

acompañada de un atributo fundamental "SCR", que indica la ruta donde se
encuentra el archivo que contiene la imagen a insertar.
Es decir:
<IMG SRC ="lugar donde guardo la imagen">
Supongamos que tengo la imagen earth.gif, que está presente en el mismo

directorio donde está la página y que la quiero insertar. La etiqueta apropiada
sería:
<IMG SRC ="earth.gif">
Y el usuario verá en el browser:
La página que creamos guarda todos los archivos en el mismo directorio. Pero
también puede ocurrir que la imagen no se encuentre dentro del mismo directorio.
En este caso, habrá que especificar la ruta completa (es decir, la ubicación exacta
del archivo). Supongamos que guardo la imagen mono.gif en el directorio fotos. La
etiqueta debería decir:
<IMG SRC="fotos/mono.gif">
12
El atributo ALT
Otro atributo importante (aunque no imprescindible) de la etiqueta <IMG> es

"ALT". Este atributo permite complementar la imagen con un texto alternativo,
utilizado principalmente para aquellos browsers que no permiten mostrar imágenes,
ya sea porque son navegadores que sólo soportan texto (como Lynx), porque el
usuario tiene desactivada esta opción o porque se produjo un accidente que impidió
la llegada del gráfico a la PC del usuario. El texto aparecerá en el espacio
correspondiente a la imagen, y también cuando el usuario pase el mouse por arriba
de la imagen, incluso si ésta bajó normalmente a la computadora del navegante.
Ejemplo:
<IMG SRC="earth.gif" ALT= "Globo terráqueo">
El usuario verá al pasar el mouse arriba del texto la frase “Globo terráqueo”
Globo terráqueo
Con sólo una gota de ingenio
Aunque puede no parecerlo, el atributo ALT es de gran utilidad, y puede serlo aún
más si es utilizado con un mínimo de inteligencia. De esta manera, se puede utilizar
para complementar la imagen o para negarla y de esa forma (intentar) producir un
efecto gracioso. Lo que hay que evitar a toda costa es caer en culaquier tipo de
redundancia.
Un ejemplo correcto sería:
<IMG SRC="juan.gif" ALT="Juan después de retarme a un partido de tenis">
Y no:
<IMG SRC ="juan.gif" ALT="FOTO">
Imágenes como enlaces
Otra característica interesante de las imágenes insertadas es que permiten ser

utilizadas como hipervínculos. Para esto, es necesario crear un enlace y en vez
encerrar texto dentro la etiqueta <A> hay que encerrar una imagen.
Ejemplo:
<A HREF="http://www.elsitio.com"> <IMG SRC="logositio.gif" ALT="Click aqui para

ir a El Sitio"> </A>
Resultado:
Http://www.elsitio.com
13
EMBED Word.Picture.8
Una idea interesante, aunque a esta altura poco original, sigue siendo la de enlazar
una imagen a una dirección de correo.
Ejemplo:
<A REF = mailto:negropintos@hotmail.com> <IMG SRC ="mail.gif" ALT ="Click

aqui para mandarme un mail"></A>
El usuario verá:
mailto:negropintos@hotmail.com
EMBED Word.Picture.8
Los atributos HEIGHT (altura) y WIDTH (ancho), permiten cambiar el tamaño de

una imagen. Un ejemplo sin estos atributos:
<IMG SRC ="dog.gif">
El usuario verá:
Pero falseando el tamaño se puede producir un efecto escala:
<IMG SRC ="dog.gif" ALIGN=LEFT WIDTH = 75 HEIGTH = 40>
Bordes
El atributo utilizado para establecer un borde en una imagen es BORDER=#,

dónde # es un número de 0 a 99.
Ejemplo de una imagen sin especificar borde:
<IMG SCR ="ojo.gif">

14
Ejemplo de imágenes con el atributo BORDER:
<BORDER = 5 IMG SCR ="ojo.gif">
O sino:
<BORDER = 15 IMG SCR ="ojo.gif">
Cada vez que utilizamos una imagen para establecer un hipervínculo, de manera
automática el browser agrega un borde a la imagen. Si queremos eliminarlo,
deberemos indicarlo con el atributo BORDER=0.
Alineando la imagen
El atributo utilizado para alinear una imagen es ALIGN, y funciona igual que como
lo vimos, sólo que en vez de aplicarlo dentro de la etiqueta de párrafo <P> lo
utilizamos dentro de la imagen.
Si quiere insertar una imagen a la izquierda de la pantalla:
<IMG ALIGN=LEFT SRC="piano.gif">
Si prefiero insertarla a la derecha:
<IMG ALIGN=RIGHT SRC="piano.gif">

15
Como todavía hay browsers que no soportan la etiqueta <img align=center>,

para centrar una imagen hay que recurrir a un pequeño truco: primero centramos
un párrafo (tengamos o no texto) y luego insertar la imagen.
Para centrar una imagen, entonces:
<P ALIGN=CENTER> <IMG SRC="piano.gif"> </P>
Imágenes de fondo
Un buen toque de distinción para un página de Internet puede ser utilizar una
imagen como fondo. Para esto utilizaremos, en la etiqueta BODY (recordar
"Estructura básica de una página html"), el atributo BACKGROUND.
<body background="lugar y nombre del archivo">
BODY (recordar "Estructura básica de una página html"), el atributo

BACKGROUND.
<body background="lugar y nombre del archivo">
La imagen que utilicemos como fondo se va a repertir tantas veces como sea
necesario para cubrir toda la pantalla. Este proceso recibe el nombre de tiling o
azulejo.
Por ejemplo, tengo la imagen "fondo.jpg" que no supera los 40x40 pixels:
Al utilizarla como fondo con <body background="fondo.jpg"> daría por resultado

16
Hay un elemento muy importante a tener en cuenta: ninguna imagen o fondo

utilizado, por más bonito que sea o por bien que quede en nuestra página, debe
atentar contra la legilbilidad del texto. Si ponemos un fondo oscuro tambien
debemos cambiar la tipografía a un color claro para que haga contraste.
Cómo crear tablas en tu página web

17
Los tres elementos básicos

Edificar una tabla es relativamente sencillo, lo importante es conocer su estructura.
Vamos a ir de a poco. Una tabla está formada por tres elementos básicos que no
pueden faltar: la etiqueta <TABLE> </TABLE> que marca el inicio y el final de
una tabla; la etiqueta <TR> </TR>o "table row" que hace referencia a las
"hileras" y <TD> </TD>"Table Data" o "celdas". Como primera regla hay que
saber que la etiqueta <TABLE> incluye a las otras dos y que la etiqueta <TR>
inluye a <TD>.
<TABLE BORDER=2>
<TR>
<TD> Columna 1 Fila 1 </TD>
</TR>
<TR>
</TR>
</TABLE>
El resultado:
Columna 1 Fila 1 Columna 2 Fila 1

Columna 1 Fila 2 Columna 2 Fila 2
Como verán <TD> Columna 1 Fila 1 </TD> y <TD> Columna 2 fila 1 </TD>
se encuentran dentro de la etiqueta <TR>.
Si quiero agragarle más columnas a mi tabla:
<TABLE BORDER=2>
<TR>
</TR>
<TR>
</TR>
</TABLE>
El resultado:
18
Columna 1 Fila 1 Columna 2 Fila 1 Columna 3 Fila 1 Columna 4 Fila 1

Columna 1 Fila 2 Columna 2 Fila 2 Columna 3 Fila 2 Columna 4 Fila 2
Sobre bordes, títulos y otros atributos

Sobre bordes....
El atributo BORDER es sencillo y funciona igual que con las imágenes, es decir
BORDER=#, donde "#" es un número de 0 a 99. En rigor, el atributo indica que las
tablas deben ser dibujadas con un borde alrededor y entre cada una de las celdas
de la tabla. Si no se incluye el atributo, las tablas se dibujan sin borde. Una tabla
sin borde es una herramienta interesante, ya que podemos provocar el efecto de
una información "que flota".
Ejemplo de tabla sin borde:
<TABLE>
<TR>
<TD> CELDA 1 </TD>
<TD> CELDA 2 </TD>
<TD> CELDA 3 </TD>
<TD> CELDA 4 </TD>
</TR>
<TR>
<TD> CELDA 5 </TD>
<TD> CELDA 6 </TD>
<TD> CELDA 7 </TD>
<TD> CELDA 8 </TD>
</TR>
</TABLE>
Resultado:
CELDA 1 -CELDA 2 -CELDA 3 -CELDA 4
CELDA 5 -CELDA 6 -CELDA 7 -CELDA 8
Si quiero hacer la misma tabla pero con un borde 15, sólo debo incluir el atributo
BORDER en la etiqueta <TABLE>, es decir <TABLE BORDER=15>
Resultado:
CELDA 1 CELDA 2 CELDA 3 CELDA 4

... títulos...
La etiqueta para poner título a una tabla es <CAPTION> </CAPTION>. Puede ir

acompañada del atributo ALIGN (el mismo que usamos para alinear párrafos e
imágenes y que a esta altura ya conocemos de sobra). La posiciones posibles son:
"TOP" (arriba), "BOTTOM" (abajo), "CENTER" (centro), "LEFT" (izquierda) y
"RIGHT" (derecha).
19
Ejemplo:
<TABLE BORDER=2>
<CAPTION ALIGN=BOTTOM>TÍTULO DE LA TABLA </CAPTION>
<TR>
<TD> CELDA 1 </TD>
<TD> CELDA 2 </TD>
<TD> CELDA 3 </TD>
<TD> CELDA 4 </TD>
</TR>
<TR>
<TD> CELDA 5 </TD>
<TD> CELDA 6 </TD>
<TD> CELDA 7 </TD>
<TD> CELDA 8 </TD>

</TR>
</TABLE>
Resultado:TÍTULO
DE LA TABLA
Si quiero ubicar la denomincación de la tabla en la parte inferior, sólo debo escribir

<CAPTION ALIGN=BOTTOM > TÍTULO DE LA TABLA </CAPTION>
Resultado:

TÍTULO DE LA TABLA
... y otros atributos
Uniendo celdas y columnas
Pero como ya dijimos, la idea esencial es crear tablas para nuestro contenido y no
que nuestro contenido se adapte a las tablas. Por eso puede ocurrir que no
necesitemos tablas perfectamente "cuadradras". Para eso utilizaremos los atributos
COLSPAN y ROWSPAN. Estos permiten que una celda ocupe el espacio de varias, ya
sea para arriba o para los costados. COLSPAN indica cuantas columnas ocupará la
celda, mientras que ROWSPAN indica cuantas filas hacia abajo ocupará la celda.
Ejemplo:
Si el efecto buscado es:
Lista de mis libros favoritos

Retrato de un artista adolescente El señor de los anillos
<TABLE BORDER=2>
<TR>
<TD COLSPAN=2> Lista de mis libros favoritos </TD>
</TR>
<TR>
20
<TD> Retrato de un artista adolescente </TD>

<TD> El señor de los anillos</TD>
</TR>
</TABLE>
Libros por autor

El cazador oculto
Salinger J.D. 9 cuentos
Hapsworth
Entonces:
<TABLE BORDER=2>
<CAPTION ALIGN=CENTER>Libros por autor </CAPTION>
<TR>
<TD ROWSPAN=3> Salinger J.D. </TD>
<TD> El cazador oculto </TD>
</TR>
<TR>
<TD> 9 cuentos </TD>
</TR>
<TR>
<TD> Hapsworth</TD>
</TR>
</TABLE>
Un poco más alla de la tabla básica

Alineando la tabla y sus datos
_¿Otra vez el atributo ALIGN?.

_ Sí, otra vez. Bueno, lo veremos rápidamente.
<TABLE ALIGN= Alinea Toda la tabla

Los elementos de esa única
<TD ALIGN= "RIGHT", "LEFT",
celda
"CENTER" >
Todos los elementos en las
<TR ALIGN=
celdas
Pero tambien se puede alinear el contenido de una tabla en sentido vertical ¿Para
qué? Bueno, no es lo mismo esto:
21
BLA BLA BLA BLA BLA BLA

BLA ........................
LLUEVE SOBRE MOJADO

SHUP SHUP SHUP !!!
Que esto:
BLA BLA BLA BLA BLA BLA SHUP SHUP SHUP !!!
BLA ........................
LLUEVE SOBRE MOJADO
¿Entonces?
Empuja todo el contenido de la celda hacia

El atributo VALIGN=TOP
arriba
Empuja todo el contenido de la celda hacia
El atributo VALIGN=BOTTOM
abajo
Centra en forma vertical todo el contenido de
El atributo VALIGN=MIDDLE
la celda
Una cuestión de espacio
Ahora que creamos nuestra tabla, le pusimos título y borde, dividimos las celdas
para adecuarla a nuestro contenido y la alineamos en la hoja, llegó el momento de
ajustar el espacio de las celdas. Para eso utilizaremos los atributos CELLSPACING
y CELLPADDING dentro de la etqueta <TABLE>. CELLSPACING indica el espacio
existente entre las distintas celdas de la tabla, mientras que CELLPADDING indica la
cantidad de espacio entre el borde de la celda y su contenido.
Veamos:
AAA BBB
CCC DDD
Es decir:
<TABLE BORDER=2 CELLPADDING=10>

<TR>
<TD> AAA </TD>
<TD> BBB </TD>
</TR>
22
<TR>
<TD> CCC </TD>
<TD> DDD </TD>
</TR>
</TABLE>
Si el efecto buscado es:
AAA BBB
CCC DDD
Entonces:
<TABLE BORDER=2 CELLSPACING=10>
<TR>
<TD> AAA </TD>
<TD> BBB </TD>
</TR>
<TR>
<TD> CCC </TD>
<TD> DDD </TD>
</TR>
</TABLE>
NOTA: Si se omite el cualquiera de estos atributos, el navegador dará por supuesto

que el valor asignado es dos, por lo tanto si se quieren ajustar lo más posible los
contenidos a la tabla hay que especificar CELLPADDING=0 y CELLSPACING=0
Jugando con tamaños y colores

Tamaños:
Los atributos HEIGHT (alto) Y WIDTH (ancho) nos permiten predeterminar el
tamaño de una tabla. La medida se puede indicar en porcentajes (50 % de la
pantalla, por ejemplo) o en pixels (cada pixel es un punto del monitor).
Ejemplo:
<TABLE BORDER=2 WIDTH=50% HEIGHT=80>

<TR>
<TD> 1 </TD>
<TD> 2 </TD>
</TR>
<TR>
<TD> 3 </TD>
<TD> 4 </TD>
</TR>
</TABLE>
23
Es decir:
1 2
3 4
Colores:
Colores de fondo
El atributo BGCOLOR (Background Color) nos permite establecer el color de fondo

de una celda.
<TABLE BORDER=2>
<TR BGCOLOR=RED>
<TD> Esta es mi tabla Dadaista </TD>
<TD> Parece un mamarracho pero </TD>
<TD> es una obra de arte </TD>
<TR BGCOLOR=LIGHTBLUE>
<TD>soy el picasso de la Web </TD>
<TD>un artista incomprendido </TD>
<TD>la vanguardia del diseño </TD>
<TR>
<TD BGCOLOR=RED>Basta de pavadas </TD>
<TD BGCOLOR=GREEN> En fin... </TD>
<TD BGCOLOR=BLUE> ¿Se entendió? </TD>
</TABLE>
El resultado:
Esta es mi tabla Dadaísta Parece un mamarracho pero es una obra de arte

soy el picasso de la Web un artista incomprendido la vanguardia del diseño
Basta de pavadas En fin... ¿Se entendió?
También podemos dar un toque de distinción sin cambiar el color de fondo,

utilizando el atributo BORDERCOLOR para jugar con el color de los borde de la
tabla.
<TABLE BORDER=8 BORDERCOLOR=RED>

<TR>
<TD> Creo que de a poco se me</TD>
<TR>
<TD> acaban las ideas para el</TD>
<TR>
<TD> texto dentro de la tabla</TD>
</TABLE>
Que es lo mismo que:
Creo que de a poco se me

acaban las ideas para el
texto dentro de la tabla
El atributo BORDERCOLORLIGHT, permite colorear los bordes superior e izquierdo

de la tabla.
24
<TABLE BORDER=8 BORDERCOLORDARK=BLUE>

<TR>
<TD> Y bueno será cuestión de </TD>
<TD> seguir pensando algo de </TD>
<TR>
<TD> todos modos, lo que importa </TD>
<TD> son las etiquetas ¿OK? </TD>
</TABLE>
El resultado:
Creo que de a poco se me Creo que de a poco se me

acaban las ideas para el acaban las ideas para el
texto dentro de la tabla texto dentro de la tabla
El atributo BORDERCOLORDARK, permite colorear los bordes inferior y derecho de

la tabla:
Y bueno, será cuestión de seguir pensando algo de

todos modos, lo que importa son las etiquetas ¿OK?
Integrando conocimientos
Uno de los aspectos más interesantes de una tabla es que nos permite aprovechar
todo lo visto anteriormente.
Tablas y vínculos
Lista de mis sites favoritos

El Sitio El site de pepe
<TABLE BORDER>
<TR>
<TD COLSPAN=2> Lista de mis sites
favoritos </TD>
</TR>
<TR>
<TD> <A HREF="http://www.elsitio.com">
El Sitio </A></TD>
<TD>
<A HREF=
"http://habitantes.elsitio.com/pepe">
El site de pepe</A></TD>
</TR>
</TABLE>
25
Tablas e imágenes
Imágenes en celdas
A su izquierda, un globo terráqueo
y a su derecha un piano
<TABLE BORDER>
<TR>
<TD> <IMG SRC="earth.gif"></TD>
<TD> A su izquierda, un globo terráqueo </TD>
</TR>
<TR>
<TD> y a su derecha un piano</TD>
<TD> <IMG SRC="piano.gif"> </TD>
</TR>
</TABLE>
Imágenes como fondo de las tablas
A su izquierda, un globo terráqueo
y a su derecha un piano
<TABLE BORDER=2 BACKGROUND="fondo.jpg">

<TD><IMG SRC="earth.gif"></TD>
<TD> A su izquierda, un globo terráqueo </TD>
</TR>
<TR>
<TD> y a su derecha un piano</TD>
<TD> <IMG SRC="piano.gif"> </TD>
</TR>
</TABLE>
Cómo crear páginas con frames

Para evaluar lo que aprendimos
en este curso, asumamos por
un minuto el papel de pequeñas
divinidades del HTML. Sólo con
un puñado de etiquetas y
mucho cuidado, creamos una
26
página a nuestra imagen y semejanza. Después tomamos una costilla del

servidor de El Sitio y le dimos vida a nuestra página en Internet. Como no
es bueno que una página esté sola, hicimos otras y las vinculamos. Luego
pusimos imágenes y color. El contenido de nuestras páginas creció y se
multiplicó hasta que se hizo necesario imponer el orden a través de las
tablas. Y cuando íbamos a echarnos a descansar, las masas comenzaron a
reclamar nuevas alternativas. Entonces, surgieron los frames.
Una recurso interesante, aunque discutido, del lenguaje de la Web son los marcos o
"frames". El objetivo inicial de este sistema, propuesto por Netscape, era ofrecer
una forma nueva de organizar y presentar la información en una página Web.
Básicamente, los marcos nos permiten dividir la pantalla del browser en varias
partes y mostrar un documento HTML en cada una. En buen cristiano, una página
con frames le dice al navegador: "Vamos a dividir la pantalla (por ejemplo) en dos;
en la parte izquierda vamos a mostrar el documento 1 y en la derecha el 2". De
esta manera, podemos poner un índice fijo de lo que tenemos en nuestro site en la
parte izquierda, y hacer que cada clic que el usuario haga allí vaya desplegando el
resultado en la mitad derecha.
¿To frame or not to frame?
Como hicimos con las imágenes, aquí tambien es justo y necesario hacer una
aclaración. Nadie duda de que una página con marcos bien aplicados puede ser de
gran utilidad, pero el abuso de frames conduce (perdón por el lugar común) a un
callejón sin salida. Esto se debió, en gran parte, a que en principio la aparición de
los frames fue saludada por los diseñadores como un elemento revolucionario.
Como suele suceder con cualquier técnica nueva, la tendencia al abuso es difícil de
evitar. Pero una vez superada la adicción, hay que reconocer que en ciertas
ocasiones los frames ofrecen ventajas de navegación que justifican una prueba.
Los marcos pueden resultar muy útiles para determinados tipos de documentos,
pero tiene algunos inconvenientes que debemos tener en cuenta a la hora de
construir páginas con frames: los navegadores más viejos no pueden reconocerlos;
otros más nuevos sí, pero los botones ATRÁS (o BACK) y SIGUIENTE (o FORWARD)
del navegador dan resultados confusos. En esos casos, para ver el documento
previo en un página con marcos debemos apretar el botón derecho del mouse y
seleccionar la opción BACK. Otra dificultad que presentan los frames es que no
simpre nos permiten guardar los documentos en forma correcta en nuestra lista de
"favoritos" o bookmarks.
Creación de una página sencilla con frames

Para crear una página con frames, primero debemos crear un documento base -con
la extensión .html- que explique cómo van a estar dispuestos los marcos en la hoja.
Para aquellos que tengan su página en El Sitio, no olviden que si esta va a ser la
página inicial de su site, debe llamarse "index.html". Esta primera página no tiene
el contenido en sí, sólo órdenes: "vamos a dividir la página en X partes; cada una
va a tener X longitud, y en cada una se va a ver el siguiente documento HTML".
Esta página principal tiene una característica sobresaliente: reemplaza las etiquetas
<BODY> y </BODY> (como no hay cuerpo para mostrar, no las necesita) y las
27
reemplaza por <FRAMESET> y </FRAMESET> para marcar el comienzo y el fin

del sector donde se definirá cada uno de las piezas que integrarán lo que el usuario
verá en pantalla. Dentro de la etiqueta <FRAMESET> se puede utilizar el par
<FRAME> </FRAME> para indicar cada uno de los "marcos" o divisiones de la
pantalla del browser:
<HTML>
<HEAD>
<TITLE> FRAMES </TITLE>
</HEAD>
<FRAMESET COLS="25%, 75%">
<FRAME SRC="izquierda.html">
<FRAME SRC="derecha1.html" NAME="principal">
</FRAMESET>
</HTML>
No era tan complicado. Trituremos una por una las etiquetas necesarias para crear
una página con marcos. La etiqueta <FRAMESET> y el atributo COL determinan
cuántas columnas tendrá la pantalla y el ancho de cada una. En este caso
tendremos 2 columnas, la primera ocupará el 25 por ciento y la segunda el 75 por
ciento restante (Atención: estos son valores relativos; esto implica que el contenido
de cada frame tratará de acomodarse al espacio disponible, según el tamaño que el
usuario le dé a la ventana de su browser. También es posible fijar valores absolutos
en píxeles.) Cada <FRAME SRC=> determina qué documento mostrará cada
columna. En el ejemplo de arriba, el sector izquierdo mostrará el documento
"izquierda.html", y el derecho, "derecha1.html".
¿Y qué significa NAME="principal"? En este caso, que el marco de la derecha de

la pantalla va a ser identificado con el nombre "principal". Ya volveremos sobre el
tema. (Odio los manuales que dicen eso.)
El resultado de este frameset visto en un browser es:

28
Habrán notado que el resultado es interesante, pero que en este ejemplo no hay
contenido alguno en los frames. Bueno, a eso vamos.
Insertantando contenido en mi página con

frames
Llenemos ahora de contenido cada FRAME. Para eso, es necesario que creemos un
documento aparte para cada marco descripto en el frameset. Así que abrimos una
vez más el Bloc de Notas (o el editor de textos que uno prefiera) y comenzamos a
crear un documento "izquierda.html" para que llene el frame en el sector izquierdo
de nuestra página. (A propósito, muchos deben estar preguntándose si el Bloc de
notas es la única manera de hacer HTML. La respuesta es no. Pero es la más
didáctica. Hay otras herramientas más específicas, simples e intuitivas, pero no son
buenas para entender el mecanismo de este lenguaje. Y, por otra parte, ningún
profesional del diseño en la Web admitiría que las usa. Hay una cuestión de orgullo
en esto de hacer HTML con un procesador de texto plano):
<HTML>
<HEAD>
<TITLE> Indice </TITLE>
</HEAD>
<BODY>
<P> SVGBVED </P>
<OL>
<LI> <A HREF="derecha1.html" TARGET="principal"> INICIAL </A>

<LI> <A HREF="derecha2.html" TARGET="principal"> ESTATUTO </A>
<LI> <A HREF="derecha3.html" TARGET="principal"> ADMISIONES </A>
</OL>
</BODY>
</HTML>
29
Ya sé: no habíamos hablado hasta ahora de ese tal "TARGET". El atributo TARGET
es el encargado de decir: "Si el usuario hace clic en ESTATUTO, entonces muestra
la página 'derecha3.html' en el marco que bautizamos NAME='principal', es decir,
en la parte de la derecha de la pantalla". Si no utilizo el atributo TARGET, la página
se abriría en el mismo marco que contiene el link. Veamos ahora el código de cada
uno de los documentos que pueden ser invocados haciendo clics en la parte
izquierda de nuestra página de prueba.
Uno por uno

"derecha1.html"
<HTML>
<HEAD>
<TITLE> Indice </TITLE>
</HEAD>
<BODY>
<CENTER>
<P> Bienvenidos a la página del Sindicato de Vendedores de Gorros Banderas y
Vinchas en Estadios Deportivos </P>
</CENTER>
<BR>
<BR>
De vez en cuando surge alguna institución que ilumina el camino del país. Sabemos
la responsabilidad que significa ser venededor de gorras, banderas y vinchas, y nos
sentimos muy honrados.
</BODY>
</HTML>
"derecha2.html"
<HTML>
<HEAD>
<TITLE> Este es nuestro Estatuto </TITLE>
</HEAD>
<BODY>
<CENTER>
<P> ESTATUTO DEL SVGBVED </P>
</CENTER>
<BR>
<BR>
Nuestro estatuto es muy severo, para empezar,
trabajamos los domingos mientras los otros
se divierten.
</BODY>
</HTML>
30
Ahora ejecutemos el documento index.html (el que hicimos en la página anterior,

por supuesto):
Si hacemos click en ESTATUTO, en la ventana izquierda, el resultado será:
Pensando en aquellos que no tienen frames

Aunque resulte extraño, todavía quedan muchas personas que no actualizan sus
exploradores desde 1995, lo que significa que no pueden disfrutar de una página
con marcos. algunos lo hacen por deliberado antiprogresismo; consideran que los
frames son una infamia y no quieren verlos. Otros, simplemente, son perezosos o
desinformados. Finalmente, hay algunos dispositivos (computadoras de mano,
celulares con acceso a Internet, PC con sistemas operativos no convencionales) que
no están en condiciones de representar frames. Como sea, no queremos que nadie
se quede sin visitar nuestra página, así que vamos a proveerles una alternativa:
<HTML>
<HEAD>
</HEAD>
31

<FRAME SRC="derecha1.html">
</FRAMESET>
<NOFRAMES>
Lo lamento, usted no puede formar parte del
sindicato, su navegador no soporta frames
</NOFRAMES>
</HTML>
De esta forma, si alguien entra a nuestra página con un navegador que no soporta
FRAMES, recibirá el mensaje escrito entre las etiquetas <NOFRAMES>
</NOFRAMES>. También podemos ser más amigables y preparar el mismo
contenido para ambas opciones (de hecho, muchos brindan al usuario la posibilidad
de elegir si quieren, o no, visualizar el contenido de la página con FRAMES). Este es
un buen ejemplo:
<HTML>
<HEAD>
</HEAD>
<FRAME SRC="derecha1.html">
</FRAMESET>
<NO FRAMES>
<P> Bienvenidos a la página del Sindicato
de Vendedores de Gorros Banderas y Vinchas
en Estadios Deportivos</P>
<OL>
<LI> <A HREF="derecha1.html"> INICIAL </A>
<LI> <A HREF="derecha2.html"> ESTATUTO </A>
<LI> <A HREF="derecha3.html"> ADMISIONES </A>
</OL>
</NO FRAMES>
Más atributos
Puede ocurrir que nos resulte más apropiado hacer un corte horizontal de la
pantalla y no uno vertical. En ese caso, deberemos cambiar el atributo COLS de la
etiqueta <FRAMESET> por el atributo ROWS. El resto es igual:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="10%, 90%">
<FRAME SRC="arriba.html">
<FRAME SRC="abajo.html">
</FRAMESET>
</HTML>
32
Resultado:
Otros atributos interesantes
MARGINWIDTH y MARGINHEIGHT
El atributo MARGINWIDTH funciona de manera análoga que CELLPADING en las

tablas: Nos permite controlar la cantidad de espacio horizontal entre los contenidos
y las paredes del marco. El valor mínimo permitido es 1. Por su parte, el atributo
MARGINHEIGHT nos permite contrlolar el espacio vertical entre los contenidos y
los márgenes superior e inferior. Ambos atributos se escriben dentro de la etiqueta
<FRAME>. Por ejemplo:

<FRAME MARGINHEIGHT="20" SRC="izquierda.html">
<FRAME MARGINHEIGHT="20" MARGINWIDHT="30" SRC="derecha.html">
</FRAMESET>
NORESIZE
El usuario puede tomar el borde de un marco con el mouse y moverlo como quiera.
Si uno quiere diagramar con precisión su página, a veces es conveniente quitar esta
posibilidad. Para esto se utiliza el atributo NORESIZE (NO-RESIZE, en inglés "sin
cambiar el tamaño"). Pero hay que usarlo con cuidado: no todos ven el contenido
del mismo tamaño en que lo vemos nosotros, debido a las diferentes resoluciones
de pantalla de cada monitor (un tema que pronto trataremos a fondo). Por lo tanto
hay que utilizar este recurso con precaución. Un NORESIZE mal usado puede tener
el efecto contrario al deseado: irritar al usuario.
SCROLLING
33
Cuando el contenido de una página supera el tamaño de la pantalla que lo exhibe,

el browser lo resuelve mostrando una barra de desplazamiento a la derecha
comunmente llamada "barra de Scroll". Con los frames sucede lo mismo, sólo que
disponemos de algunas etiquetas para manejar ese elemento a nuestro antojo. El

atributo que manipula la barra de desplazamiento de pantalla es SCROLLING, y
sus opciones son:
• SCROLLING=YES: Siempre habrá barras de desplazamiento en el marco,

incluso si no se necesitan.
• SCROLLING=NO: Nunca se mostrarán barras de desplazamiento, incluso
cuando son necesarias. Usar con precaución.
• SCROLLING=AUTO: El navegador mostrará las barras de desplazamiento
sólo si se necesitan.
Si no se especifica el atributo SCROLLING, el efecto es el mismo que

SCROLLING=AUTO.

<FRAME SCROLLING=NO SRC="izquierda.html">
<FRAME SCROLLING=YES SRC="derecha.html">
</FRAMESET>

Curso HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso HTML

Cargado por

Copyright:

Formatos disponibles

1

El HTML (siglas en inglés de Lenguaje de Marcación General de Hipertexto) no es

Estructura básica de una etiqueta

La estructura de una etiqueta HTML es simple. La orden siempre va encerrada entre

Cualquier documento HTML bien

La etiqueta <HTML> indica el inicio de

En la última línea, la etiqueta </HTML> indica la finalización del documento HTML.

A continuación, vamos a ir descubriendo las etiquetas básicas que se pueden

Ejemplo : <B> Sólo sé que no sé nada </B>

Ejemplo: <STRONG>pero aún supero a la generalidad de los hombres

El usuario verá: pero aún supero a la generalidad de los hombres

Ejemplo: <I> que ni siquiera está al tanto de eso </I>

Ejemplo: <U> Sócrates </U>.

El usuario verá: Sócrates.

Ejemplo: <STRIKE> que publicó dos libros </STRIKE>

<P>Cuando escribo un párrafo, por más que escriba en una línea,

Cómo alinear un párrafo

Mediante el atributo ALIGN, utilizado dentro de la etiqueta <P> puedo alinear el

Esto dará como resultado:

No siempre necesito dividir la información en párrafos claramente separados. A

Ejemplo:

• Fuentes: tamaño, color y tipo

Tamaño y tipo de letra

El atributo SIZE: Regula el tamaño de los caracteres.

<FONT SIZE=3> Texto de tamaño 3 </FONT>

El usuario verá: Texto de tamaño 3

<FONT SIZE=4>Este tiene un tamaño 4 </FONT>

El usuario verá: Este tiene un tamaño 4

<FONT COLOR="red"> ROJO. </FONT> = ROJO.

El usuario verá: Este texto está en tipografía Times New Roman

Una misma etiqueta <FONT> puede combinar varios atributos:

<FONT FACE=Times New Roman SIZE=6 COLOR=#00FF00> Texto de color

Texto de color verde y tamaño 6.

Un ejemplo de lista ordenada numericamente sería:

Un ejemplo de lista desordenada sería:

Cómo introducir vínculos en mi página web

<A HREF="dirección de Internet a la que quiero ir"> Texto sobre el

Hay diferentes posibilidades:

Si quieres ir a RockandWeb <A HREF="rockandweb.com"> haz clic aquí. </A>

Si quieres ir a RockandWeb haz click aqui.

Vincularse a documentos específicos en otros sitios.

También podemos destacar la sección de rock del site amarillas.

Vincular un documento dentro del mismo sitio. En la mayoría de los casos no

En ese caso será:

Pasemos todo en limpio. Primero, el HTML:

También puede ocurrir que, encontrándonos en nuestra página principal,

En ese caso, el link será:

Hipervínculos dentro un mismo documento

<A HREF= "#capitulo2> Ir al capítulo 2</A>

<A NAME="capitulo2"> Capítulo 2 </A>

Así se ve este ejemplo en el Bloc de Notas:

Cómo hacer un link a mi dirección de correo

La estructura en HTML es muy parecida a la de los hipervínculos comunes. Sólo hay

Supongamos que queremos vincular la dirección pamela_anderson@elsitio.com (la

Cualquier duda <A HREF=mailto:pamela_anderson@elsitio.com> mandame

Cualquier duda mandame un email

Si necesitás más información <A HREF=mailto:pamela_anderson@elsitio.com?

Si necesitás más información mandame un mail

Para predeterminar el envío de copias "carbónicas" (Cc) a otros usuarios:

Si necesitás más información <A HREF=mailto:pamela_anderson@elsitio.com?

Cómo insertar imágenes en tu página web

La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va

<IMG SRC ="lugar donde guardo la imagen">

Supongamos que tengo la imagen earth.gif, que está presente en el mismo