Introducción a HTML básico

Introducción al HTML.
HTML (HyperText Markup Language) no es un lenguaje de programación, sino un
lenguaje descriptivo, una serie de etiquetas que el navegador interpretará de una u otra
forma para mostrar distintos contenidos por pantalla. Por ejemplo, si creamos un
documento de texto que se llame ejemplo.html y que contenga el siguiente texto:
<html>
<head></head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto itálica.</i><br>
</body>
</html>
generará el siguiente resultado:
Hola mundo!
Esto es negrita.
Y esto itálica.
Por tanto, aprender HTML consiste en conocer y saber utilizar dichas etiquetas.
Para realizar paginas web no necesitas ningún software especifico, sino que tan sólo
necesitas un editor de texto, como puede ser el bloc de notas de Windows, aunque se
recomienda usar algún otro editor más especializado que te ayude en la escritura del
código, como puede ser el Macromedia Dreamweaver.
Estructura básica de una página web.
La estructura básica de una página web es la siguiente:
<html>
<head></head>
<body>
</body>
</html>
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo
que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes
diferenciadas.
La primera <head></head> es la cabecera de la página. Aquí irán cierta información
que no es directamente el contenido de la página. Aquí se pone el título de la página, los
metadatos, estilos, código javascript. La primera que se suele estudiar es <title></title>,
que indica el título de la página (lo que el navegador pone en la parte superior
izquierda).

La segunda parte es <body></body>. Aquí va propiamente el contenido de la página:
fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página
anterior, el siguiente código
<html>
<head>
<title>Esto es el título de la página.</title>
</head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto itálica.</i><br>
</body>
</html>
Generará el siguiente resultado:
Hola mundo!
Esto es negrita.
Y esto itálica.
Observe el título en la parte superior izquierda de la página. Además, dentro de <body>
</body> distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal (pulsando la tecla
Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra
etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una "i"
con acento, es decir, "í".
Es importante mencionar que las etiquetas se pueden escribir indistintamente en
mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B>
produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la
etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si
no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas
etiquetas que no lo necesitan, como <br> o <hr>.
Etiqueta body.
Anteriormente os hemos explicado que todo lo que queramos que se vea en nuestra
página web deberemos escribirlo dentro de la etiqueta body. Eso es lo que llamamos el
"cuerpo" del documento. Es la parte visible. Pero debes saber que ese cuerpo, o sea, que
la etiqueta body también podemos personalizarla para darle el aspecto que nosotros
deseemos.
Esta personalización la conseguiremos a través de una serie de parámetros que a
continuación te presentaremos. Bien, pues vamos a empezar.

Color de fondo: bgcolor
El primer parámetro que debes conocer es el del color de fondo, el "bgcolor". A través
de este parámetro podremos definir el color de fondo que queramos que tenga nuestra
página. Un ejemplo muy simple es el siguiente: Si queremos que nuestra página quede
con un fondo rojo deberemos escribir:
<body bgcolor="#FF0000"></body>
Imagen de fondo: background
Puede que no quieres que tu página tenga un color sólo de fondo, sino que quieras que
tu página tenga una imagen. En ese caso deberás indicarlo con la etiqueta "background".
La etiqueta quedaría de la siguiente manera:
<body background="URL"> </body>
Dónde leemos "URL" deberemos escribir la dirección de la imagen que queramos que
sea nuestro fondo. Una cosa muy importante que debes saber es que si la imagen no es
suficientemente grande para rellenar toda la página, la imagen se repetirá tanto a lo
ancho como a lo largo hasta rellenar todo el espacio.
Color de texto: text
Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del texto de
nuestra web. Es decir, tendremos que decirle al navegador de qué color queremos que
sea nuestro texto. Esto lo definiremos con el parámetro "text".
Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con lo que
escribiremos lo siguiente:
<body text= "#000000"></body>
Márgenes: leftmargin, topmargin, rightmargin y bottommargin
Ya sabemos de qué color será nuestro fondo y nuestro texto, pero también podemos
predefinir los márgenes de nuestra página web para que queda mucho mejor. Porque no
queremos que nuestro texto se quede muy pegada a los márgenes, ¿verdad?
Para especificar los márgenes utilizaremos el parámetro margin, con su correspondiente
indicación delante. Así encontraremos "leftmargin" para el margen izquierdo,
"topmargin" para el margen de arriba, "rightmargin" para el margen de la derecha y
"bottommargin" para el margen de abajo.
Si queremos que nuestros márgenes sean de 10 píxeles por todas partes escribiremos lo
siguiente:

<body leftmargin="10px" topmargin="10px" rightmargin="10px"
bottommargin="10px"></body>
Color de links: link, alink y vlink
En body también podemos ( y de hecho debemos hacerlo) definir el color de los
vínculos de nuestra páginas, definir el color con el que se mostraran los links. Aquí
debemos diferenciar tres tipos de instrucciones: Debemos definir el color del link (con
la etiqueta "link"), el color del link activo (con la etiqueta "alink") y el color del link ya
visitado (con la etiqueta "vlink").
Así pues, si queremos que nuestra página tenga un color de enlaces (de links) de color
rojo y que esos enlaces sean rojos cuando estén activos y se queden en azul cuando
estén inactivos deberemos escribir lo siguiente:
<body link= "#FF0000" alink= "#FF0000" vlink= "# 0000FF"></body>

Formateo de texto.
El formateo del texto, o sea, el formato del texto, son una serie de etiquetas que
escribimos en html rodeando la palabra o el texto y que transforman ese texto en el
formato que nosotros le hemos querido dar.
Anteriormente ya hemos visto en un pequeño texto introductorio como se ponía la
negrita y la itálica. Pero eso era solamente introductorio. A continuación lo vamos a
explicar de una forma más detallada.
Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse,
conteniendo el texto o la palabra que queramos transformar, entre medias. En el ejemplo
de la negrita se abriría <b> y se cerraría </b>.
Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si
queremos que un texto esté en negrita y en cursiva escribiríamos esto:
<b><i>Este texto está escrito en negrita y en cursiva</i></b>.Cuando combines, ten
cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más
interior a la más exterior. Por último, recordad que podéis escribir las etiquetas en
minúsculas o en mayúsculas.
Vamos con los diferentes formateos html que podemos encontrar:
Negrita
Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización
de cualquiera de ellas es indiferente. Puedes usar la que prefieras.
La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo:
Este palabra la vamos a poner en <b>negrita</b> y esta otra
<strong>también</strong>
Este palabra la vamos a poner en negrita y esta otra también
Cursiva
Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto
cerrarla con la etiqueta </i>).
También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es
indiferente el uso de una u otra. Aquí os dejo un ejemplo:
Este palabra la vamos a poner en <i>cursiva</i> y esta otra

<em>también</em>
Este palabra la vamos a poner en cursiva y esta otra también
Subrayado
Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la
etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así subrayaríamos
una frase importante:
<u>Así subrayaríamos una frase importante</u>
Así subrayaríamos una frase importante
Texto con espaciado simple o TT
TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado
simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la
cerraremos con </tt>.
<tt>Esta frase la vamos a escribir de forma espaciada </tt>
Esta frase la vamos a escribir de forma espaciada
Palabras más grandes o más pequeñas
Puede que en una frase queramos destacar un palabra por medio de una variación de
tamaño sin necesidad de utilizar los encabezados(los explicaremos más adelante). Pues
esta variación de tamaño la conseguiremos gracias a las etiquetas <big> y <small>.
Sus propios nombres en inglés nos indican cuáles serán sus funciones: <big> agrandará
el texto y <small> lo disminuirá.
Cada vez que escribamos una etiqueta, haremos el texto un punto más grande. Pero
estas etiquetas también la podemos combinar, por lo que si escribimos dos veces la
etiqueta <big>, haremos crecer la palabra dos puntos.
Un ejemplo sería el siguiente:
Esta palabra se va a escribir <small>pequeñita</small>, esta se va a
escribir <big>más grande</big> y ésta <big><big>más grande
aún</big></big>.
Esta palabra se va a escribir pequeñita, esta se va a escribir más
grande y ésta más grande aún.

Superíndices y subíndices
Mediante el Html también podemos escribir fórmulas matemáticas. Gracias a las
etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta
<sub> te servirá para escribir un subíndice y <sup> será tu etiqueta para un superíndice.
Así nos queda un ejemplo como el siguiente:
Gracias a estas etiquetas podemos escribir cualquier fórmula
matemática como esta: H <sub>2</sub> O o números elevados a
potencias 7<sup>3</sup>.
Gracias a estas etiquetas podemos escribir cualquier formula
matemática como esta: H 2 O o números elevados a potencias 73
.
Texto tachado
Existen tres etiquetas diferentes que nos servirán para conseguir que nuestro texto se
quede tacahado. Hablamos de las etiquetas <strike>, <s> y <del>. Ambas nos ofrecen el
mismo resultado. Aquí tienes la muestra:
Si la palabra no me gusta la puedo tachar <strike>así</strike>,
<s>así</s> o <del>así</del>. ¡Lo mismo me da!
Si la palabra no me gusta la puedo tachar así, así o . ¡Lo mismo me
da!

Párrafos y saltos de línea.
En este tema vamos a tratar y a explicaros los párrafos y los saltos de línea en html.
Porque debemos saber que el html los saltos de línea, es decir, los espacios que
hagamos en el código no son interpretados te tal forma.
En html para dejar un salto de línea debemos utilizar una serie de etiquetas, de código,
que el navegador interpretará cómo tal. Esas etiquetas son <br/> </p> o </pre>. A
continuación te explicaremos cada una de ellas.
Saltos de línea
Ya os hemos comentado anteriormente que en html los saltos de línea escritos en código
no son tal una vez el navegador interpreta el código. Vamos a explicaros esto con un
claro ejemplo:
Puedes escribir un texto como este
y el navegador no lo interpretará así
Y se verá así:
Puedes escribir un texto como este y el navegador no lo interpretará
así
Existen dos etiquetas para indicar que queremos hacer un salto de línea normal. Son las
etiquetas <br> y <br/> ambas son interpretadas igual por el navegador. Esta etiqueta no
hace falta abrirla y cerrarla, sólo con escribirla el navegador ya la interpreta.
Así pues el texto anterior deberíamos escribirlo de la siguiente forma:
Puedes escribir un texto como este <br/>
y el navegador no lo interpretará así
Párrafos
Para indicarle al navegador que queremos poner ese texto en un párrafo, debemos
escribirlo entre las etiquetas <p> y su cierre </p>.
Así el texto quedará dentro de un párrafo, separado por un espacio en blanco por encima
y uno por abajo.
El texto del párrafo lo puedes alinear utilizando la etiqueta align utilizando los
parámetros “center” (para alinearlo al centro), “right” (para alinearlo a la derecha),
“left” (para alinearlo a la izquierda) y “justify” (para justificar el texto).

Un ejemplo de esta etiqueta con sus respectivos parámetros es el siguiente:
<p align="center">Este texto se alineará al centro</p>
<p align="right">Este texto se alineará a la derecha</p>
<p align="left">Este texto se alineará a la izquierda</p>
que se verá así:
Este texto se alineará al centro
Este texto se alineará a la derecha
Este texto se alineará a la izquierda
La etiqueta <pre>
La etiqueta <pre> la puedes utilizar para que el navegador interprete el texto escrito tal
y como está.
Como ejemplo es mostraremos este texto:
Escribo esta línea así
Dejo dos líneas de separación
y escribo tres más.
Sin poner ninguna etiqueta, el navegador respondería así:
“Escribo esta línea así Dejo dos líneas de separación y escribo tres más.”
En cambio utilizando la etiqueta <pre> y cerrándola con su correspondiente etiqueta, el
texto se vería como queremos.

Comentarios.
Los comentarios html son textos que van dentro del código fuente pero que no son
mostrados por los navegadores. Estos comentarios son muy útiles para los editores de la
página, ya que ayudan a una mayor comprensión del código.
La forma correcta de escribir un comentario html es la siguiente:

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo
el html, aunque la estructura es prácticamente la misma. Hay una apertura y un cierre, y
todo lo que va dentro de estos dos elementos es el comentario.
El código de apertura es el siguiente: .
Mira el código del siguiente ejemplo:
A continuación vamos a escribir un comentario, pero aquí no lo
podremos ver porque...<br>

...los comentarios no son visibles para el usuario... <br>

...sólo para los editores de la página
Y comprueba a continuación como no vamos a poder ver los comentarios escritos. Sólo
podremos hacerlo a través del código fuente de la página.
A continuación vamos a escribir un comentario, pero aquí no lo
podremos ver porque...
...los comentarios no son visibles para el usuario...
...sólo para los editores de la página
Separadores. Etiqueta hr.
Separadores en html: La etiqueta <hr>
Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal
de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la
etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo
con escribir la etiqueta anterior ya la escribimos.
La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de
una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos
definir su grosor mediante el parámetro size. Para escribir este parámetro en la etiqueta
escribiremos “size=x”, siendo “x” el número del grosor de la franja. A continuación te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 10 y
la segunda dos. La diferencia es abismal
<hr size="20" />
<hr size="2" />
Y el resultado sería el siguiente:
Otro parámetro que podemos definir es la anchura de la franja mediante el parámetro
width . El parámetro será “width=x %”, siendo “x” el tanto por cien que queremos que
ocupe nuestra fnarja.
En el caso de no escribir nada (como en los ejemplos anteriores), la franja será
predeterminada del 100%. Si queremos que ocupe más o menos tendremos que
escribirlo con el parámetro width.
A continuación vamos a escribir una franja de 75% de ancho:
<hr width=75%"/>
Que quedaría de la siguiente manera:
Muchos navegadores hacen esta franja con una sombra exterior que transforma la franja
en tres dimensiones. Si quieres que la franja sea simple, sin sombrita deberás escribir el
parámetro “noshade”.
También podemos predefinir el color que le queremos dar a la franja con el parametro
"color". Es muy sencillo. Por ejemplo, si queremos que nuestra franja sea de color rojo
sólo debemos ponerle la etiqueta: <hr color="#FF0000"/>.
Por último, puedes hacer que la franja quede alineada a un lado, a otro, o al centro del
párrafo mediante el parámetro que ya vimos con anterioridad: “align”. “align = center”
para el centro, “align = right” para la derecha y “align = left” para la izquierda.
Como ejemplos finales vamos a hacer dos franjas. La primera va a ser una franja de
grosor 3, de un ancho del 50% y alineada al centro.
<hr size=3 width= 50% align=center/>
La siguiente va a ser una franja de grosor 2, de ancho 80%, sin sombra y alineada a la
derecha.
<hr size=2 width=80% noshade=“noshade” align= right />

Encabezados.
Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando
el título del artículo, categoría, etc. Pues bien, para escribir encabezados tenemos que
utilizar las etiquetas <h>.
Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos
el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que
<h6> sería el más pequeño.
A continuación vamos a mostraros el código de los seis diferentes encabezados:
<h1> Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
Si ya habéis visto el ejemplo os daréis cuenta que cada encabezado está separado del
anterior y del siguiente por un salto de línea y que nosotros en el código no hemos
escrito nada. Podéis deducir pues, que los encabezados generan por sí solos uno salto de
línea.
Por último recordaros que la etiqueta <h> podemos escribirla tanto en mayúsculas como
en minúsculas. Es decir, lo mismo daría escribir <h1> que <H1>.
Caracteres especiales.
Las páginas Web están abiertas a todo el mundo y a todos los lenguajes. Pero no todos
los lenguajes son iguales. En español, por ejemplo, tenemos algunas letras que son
propias de nuestra lengua y que otras no poseen. Por ello, una “ñ” en un navegador de
un ordenador de fuera de España puede que no se vea.
Para evitar ese problema podemos usar los caracteres especiales de html. No todos los
ordenadores leen las mismas letras, pero sí todos leen el mismo código. Un “ñ” escrita
como tal no se verá en muchos ordenadores del mundo pero, si por el contrario,
escribimos ñ (carácter html para la “ñ”), seguro que se muestra correctamente.

Caracteres especiales básicos
Estos caracteres son esenciales. No porque no sean interpretados correctamente por el
navegador, sino porque estos símbolos mal escritos pueden causar que nuestra web no
funcione correctamente.
& & " "
< < > >
Caracteres especiales
Ï Ï Î Î
Ö Ö Ô Ô
Ü Ü Û Û
× × ¢ ¢
÷ ÷ € €
 “  ™
 ”  ‰
Ã Ã å å
Ñ Ñ Å Å
Õ Õ Ç Ç
ã ã ç ç
ñ ñ Ý Ý
õ õ ý ý
¸ ¸ » »
Á Á À À
É É È È
Í Í Ì Ì
 Œ  ƒ
 ‡  †
ä ä â â
ë ë ê ê

ï ï î î
ö ö ô ô
ü ü û û
Ó Ó Ò Ò
Ú Ú Ù Ù
á á à à
é é è è
Ø Ø ÿ ÿ
ø ø Þ Þ
Ð Ð þ þ
ð ð Æ Æ
ß ß æ æ
¼ ¼  
½ ½ ¡ ¡
¾ ¾ £ £
© © ¥ ¥
® ® § §
ª ª ¤ ¤
² ² ¦ ¦
³ ³ « «
¹ ¹ ¬ ¬
¯ ¯ 
µ µ º º
¶ ¶ ´ ´
· · ¨ ¨
° ° ± ±
Ë Ë Ê Ê
í í ì ì
ó ó ò ò

ú ú ù ù
Ä Ä Â Â
¿ ¿
Tablas
Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas dos
etiquetas definiremos la tabla, las celdas que queremos, las columnas y las
características de cada uno de estos parámetros. Pero vamos a empezar explicándote la
etiqueta <table>.
Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero… ¿podemos
predefinir características de esa tabla? Por supuesto que sí. Una tabla admite muchos
parámetros. Nosotros vamos a explicarte los principales.
La tabla: <table>
Como ya ocurre con la etiqueta body, a una tabla también lo podemos definir el fondo
de la misma. Esto lo podemos conseguir con el parámetro "bgcolor", que nos pondrá un
color de fondo, o "background" para poner una imagen de fondo. Recuerda que si la
imagen es más pequeña que la tabla, ésta se repetirá tanto a lo ancho como a lo largo.
Otro aspecto que podemos definir de la tabla es el borde. Esto lo haremos con el
parámetro "border". Como en todas los parámetros que ya hemos visto escribiremos:
border= "x" siendo la x un número. Ese número indicará el grosor del borde. Si no
ponemos borde o lo escribimos "0", la tabla no mostrará borde ninguno. Por supuesto,
también podemos darle color al borde, escribiendo la etiqueta "bordercolor" e indicando
el color que queramos para nuestro borde.
El parámetro "width" indircará la anchura de la tabla. Esta anchura la podemos poner en
píxeles (width= "300") o con porcentaje (width= "100%").
Dos parámetros más son cellspacing (que define el espacio entre las celdas de la tabla) y
cellpadding (que le marca a la tabla el espacio que debe dejar alrededor del texto dentro
de una celda).
Como ejemplo, escribiremos el hipotético supuesto de querer una tabla que sea ancha al
100%, con un borde azul de un píxel de grosor y con un cellpadding de 10 y con un
cellspacing de 10. El código quedaría de la siguiente forma.
<table width="100%" border="1" bordercolor="#0000FF" cellspacing="10"
cellpadding="10"></table>
Una vez explicadas las tablas, vamos a pasar a explicarte las partes fundamentales de las
mismas.

Las filas: <tr>
Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con
su correspondiente cierre </tr>. El contenido de las columnas que están dentro de la fila
lo podemos alínear tanto horizontal como verticalmente.
Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba
de la celda ("top"), en el centro ("middle") o debajo ("bottom").
Para alinearlo horizontalmente utilizaremos el atributo "align". Con este atributo
podremos alinear el contenido de las celdas en el centro ("center"), a la izquierda
("left"), a la derecha ("right") o justificado ("justify").
Por supuesto a las filas también les podemos definir el color de fondo ("bgcolor") y el
color del borde ("bordercolor").
Las celdas <td>
Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> y
su correspondiente cierre </td>.
Al igual que en las filas, en las celdas podemos definir el la alineación del contenido
que está dentro con los atributos "valign" y "align".
Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas
columnas como indiquemos en él. Para agrupar celdas utilizaríamos el atributo
"colspan" y para agrupar celdas el atributo "rowspan".
Por ejemplo, para agrupar en una celda 2 columnas tenemos que escribir: <td
colspan="2"></td>. Y para agrupar dos filas, la indicación sería la siguiente: <td
rowspan= "2"></td>.
Las celdas <th>
Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos
atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido
que esté dentro de una etiqueta <th> está considerado como el encabezado de la tabla,
por lo que se creará en negrita y centrado sin que nosotros se lo indiquemos.
A continuación hay un ejemplo de una tabla que combina todas las cosas que hemos
ido viendo. Escribe el siguiente código:
<table width="100%" border="1" cellpadding="0" cellspacing="0"
bordercolor="#000000">
<tr>
<th>Encabezado 1</th>
</tr>
<tr>

<td rowspan="2" valign="middle" align="left">Este texto está alineado al centro
verticalmente y a la izquierda horizontalmente</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
nowrap
nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligará al
navegador a no romper esa línea, o sea, a no hacer ningún salto de línea. Con este
atributo en la celda, el navegador no respeta el ancho predefinido de la tabla, si es que lo
hubiera, y respeta el ancho de la frase, ya que no puede partirla.
Por tanto, si la frase es más larga que el ancho definido de la tabla, ésta se estirará todo
lo necesario para albergar la frase sin saltos de línea. El siguiente código nos mostrará
como escribir este atributo en la etiqueta de la celda:
<table width="400" border="1" cellpadding="10" cellspacing="0"
<tr>
<td nowrap>Aunque este texto sea más ancho que los 400 píxeles
de la tabla, ésta no puede dividir mediante saltos de línea
el contenido de la misma, por lo que se estira para albergar toda la frase.</td>
</tr>
</table>
Etiqueta “caption”
Esta etiqueta sirve para poder ponerle un título o encabezado a la tabla. Puedes poder el
encabezado arriba o abajo, dónde tu prefieras, mediante la etiqueta "align": "align=top"
para ponerlo arriba y "align=bottom" para ponerlo abajo. En el siguiente ejemplo
nosotros lo hemos puesto abajo.
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0"
<caption align="bottom">Encabezado de la tabla.</caption>
<tr>
<td align="center">Tablita de ejmplo para la etiqueta "caption"</td>
</tr>
</table>

Listas
Listas no ordenadas: <ul>
Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto
que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.
Si no le indicamos nada a la etiqueta <li>, ésta se generará de forma automática. Pero si
queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo
“type”.
Así podemos hacer que la lista esté definida por puntos negros (li type="disc"), por
puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square").
Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan
otras apariencias a estos mismos atributos.
Vamos con un pequeño ejemplo en código:
<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
Cuyo resultado visual será el que veremos a continuación:
o Esto es un tipo de punto.
 Este es otro.
Y este es otro diferente.
Listas ordenadas: <ol>
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de
la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas
ordenadas los símbolos serán números y éstos se irán generando automáticamente por
orden, conforme escribamos nuevos puntos.
En las listas ordenadas podemos hacer que el primer punto comience con el número que
nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos
que escribamos se generarán automáticamente por orden, partiendo de ese número.
Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos
escribir lo siguiente:
<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>
</ol>

Y el resultado será el siguiente:
20. Este será el número 20.
21. Este será el 21.
22. Este será el 22. Y así sucesivamente
Listas de definiciones: <dl>, <dt> y <dd>.
Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>,
<dt> y <dd>. Vamos a explicarlas por partes:
La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica que dentro
de ella, entre ella y su cierre, va a ir una definición.
La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término
que vamos a definir. Para entendernos mejor, dentro de <dt> iría el título de la
definición.
La etiqueta <dd> viene de los términos “Definition description” y nos dice que dentro
de ésta irá la definición.
Si escribimos varios listados de definición, éstas se separarán automáticamente entre
ellas para facilitar su diferenciación.
Aquí podemos ver un ejemplo de código de dos listado de definición:
<dl>
<dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd>
</dl>
<dl>
<dt>Aquí va la segunda definición</dt>
<dd>Y aquí dentro irá la segunda definición, separada automáticamente de la
anterior.</dd>
</dl>
Cuyo resultado será el siguiente:
Aquí va el término que definiremos
Y aquí dentro irá la definición propiamente dicha.
Aquí va la segunda definición
Y aquí dentro irá la segunda definición, separada automáticamente de la
anterior.
Imágenes
Poner imágenes en nuestra web produce unos resultados asombrosos de una manera
muy fácil. Vamos a mostrarte como puedes incluir una imagen y los atributos que
puedes darle a la misma.

El tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran
mayoría de los tags de html, no necesita un cierre. Va acompañado de diferentes
atributos que te vamos a explicar a continuación.
El atributo "src" es imprescindible para poder colocar una imagen. Este atributo es el
que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así:
<img src="x">, siendo "x" la dirección o la url dónde se encuentra situada la foto.
La foto podemos alinearla en la página como queramos mediante "align", utilizando los
atributos "left" para alinearla a la izquierda, "right" para alinearla a la derecha, "top"
para alinearla arriba, "bottom" para alinearla abajo y "middle" para alinearla al centro.
También podemos poner una descripción de la imagen dentro de la misma para que la
gente puede leerla al mantener el ratón encima de ella. Esta descripción podemos
escribirla mediante el atributo "alt" y lo escribiríamos de la siguiente manera: alt= "x",
siendo "x" la descripción que le gente leerá al pasar el ratón por encima.
Debemos aclarar que no con todos los navegadores podemos ver el "alt" de manera
visual. Hay algunos que no lo representan.
Atributos opcionales pero muy recomendables, son el height y el width. El height
marca la altura de la imagen, mientras que el width marca la anchura. Son
recomendables porque así ayudaremos al navegador a representar la imagen.
Y por último, también queremos mostrarte que le puedes adjudicar un borde a la
fotografía. El atributo ya te lo sabes: "border". Después solo tendrás que definir cuál
quieres que sea el grosor del borde.
Así las cosas, deberemos escribir este código...
<img src="html/imagenes/prueba.jpg" border="1" alt="Este es el ejemplo de un texto
alternativo" width="400" height="300">

Mapas de imágenes.
suponer, <map> es el tag necesario para poder crear un mapa de imágenes en html. Por
supuesto, posee un cierre: </map>.
Este tag debe ir acompañado del atributo name= “x”, para indicar el nombre del mapa.
Por tanto si queremos hacer un mapa que se llame ejemplo 1, escribiremos: <map
name= “ejemplo1”>
Atributo area
El mapa de imágenes lleva un área dentro de la cual podremos pinchar para dirigirnos al
destino que hayamos preestablecido. Pero, por supuesto, esa área se la tenemos que
indicar al navegador para que la interprete.
La zona del enlace se indica dentro de la etiqueta, estableciendo las coordenadas de
dicha área. También podemos escribirle un texto alternativo, un “alt”, al área.
Existen tres tipos de áreas. Vamos a explicártelas a continuación.
Atributo shape
Este atributo nos indicará el tipo de área que es. Como hemos dicho existen tres tipos:
rectangular (rect), poligonal (poly) o circular (circle) y cada una de ellas tiene unas
características diferentes. Vamos a profundizar un poco más en ellas.
shape=“rect” : Este tipo de área crea un mapa de imagen rectangular. Para
definir la zona que incluirá ese mapa deberemos definir la esquina superior
izquierda del área y la esquina inferior derecha.
shape=“circle” : Este tipo de área crea un mapa de imagen circular. Nosotros
sólo debemos indicarle el centro de la circunferencia y el radio del mismo.
shape=“poly” : Este tipo de área es la más versátil de todas, la que más
posibilidades nos ofrece, ya que nos permite crear una zona personalizada. Para
crearla debemos indicarle los diferentes puntos del polígono que hagamos y de
una forma ordenada, siguiendo el camino que nosotros hemos trazado para
hacerlo.
Bien, pero…¿y cómo indicamos las coordenadas? Gracias al siguiente atributo.
Atributo coords
El atributo coords se escribe de la siguiente forma: coords= “x,x,x,x”, entendiendo que
cada “x” representa un punto en la imagen. Cada coordenada debe ir separada por
comas.
Y el dónde nos dirigirá esa área nos lo indicará el atributo “href”
Atributo href

Aquí deberemos indicar el destino del área.
usemap
Hasta ahora te habíamos indicado cómo podías escribir un mapa de imágenes y cómo
definir su área, pero no te habíamos dicho cómo indicar qué imagen es la que llevará el
mapa. Esta acción se hace gracias al atributo usemap.
Este atributo se escribe de la siguiente forma: usemap=“#x”, siendo x el nombre del
mapa de imágenes que queramos utilizar.
Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver más abajo.
Dentro de estas bolas de billar, nosotros hemos hecho un mapa de imágenes con un área
circular que coincide con la bola amarilla. Nuestra “href” es la página de inicio de este
tutorial. También hemos hecho un área poligonal en la bola negra del fondo que te
llevará al inicio del tutorial de css y otro área rectangular en el centro de la imagen, que
te redigirá al inicio del tutorial de php.
El código nos ha quedado de la siguiente manera:
<img src="http://html.hazunaweb.com/html/imagenes/prueba-mapa.jpg" alt="Prueba de
mapa de imágenes" width="300" height="214" border="0" usemap="#billar">
<map name="billar">
<area alt="Si clícas aquí irás a la página de inicio del tutorial de html" shape="circle"
coords="148,154,44" href="http://www.hazunaweb.com">
<area alt="Si clías aquí irás a la página de inicio del tutorial de css" shape="poly"
coords="148,59,142,49,135,41,128,38,121,34,125,25,135,16,155,11,177,19,188,27,187,
36,177,39,168,46,162,52,160,61" href="http://css.hazunaweb.com/">
<area alt="Si clías aquí irás a la página de inicio del tutorial de php" shape="rect"
coords="11,77,288,105" href="http://php.hazunaweb.com/">
</map>
Enlaces
Los enlaces nos permiten de una manera muy cómoda redirigir al usuario a otra parte,
cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url

distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo
archivo en el que está, dentro de la misma url.
Esta explicación la entenderás más fácilmente cuando te presentemos los tipos de
enlaces que hay y veas sus características. Así pues, vamos a ello:
La etiqueta <a>
Es dentro de esta etiqueta y de su cierre (</a>) dónde encontraremos el enlace. Todo lo
que esté dentro de ella, ya sea texto o una imagen, estará considerado como un enlace y
el navegador lo interpretará así.
Atributo href
Para que un enlace esté activo debemos indicar dentro de él el destino del mismo. Para
establecer este destino le colocamos a la etiqueta <a> este atributo. La etiqueta completa
nos quedaría así:
<a href=“enlace”>Pincha aquí para ir al destino del enlace</a>
Las urls pueden tener dos tipos de rutas o direcciones: Las urls con dirección relativa y
las urls con dirección absoluta. Vamos a explicarlas a continuación:
Direcciones absolutas y relativas:
Las direcciones absolutas son aquellas que contienen la url completa. En estas
direcciones podemos ver todos los elementos de la dirección. Un ejemplo muy claro es
el siguiente:
<a href="http://html.hazunaweb.com/112.php">Artículo de enlaces html</a>
Si pincháramos en el enlace iríamos directamente al artículo de mapas de imágenes del
tutorial. Fijaros en lo que hablábamos: podemos apreciar todas las partes de la url.
En las direcciones relativas vemos que no está la url completa. En este tipo de
direcciones, las partes que faltan de la dirección el navegador las genera de la propia
página en la que está el enlace. Por ejemplo, si dentro de la página
http://html.hazunaweb.com/112.php encontráramos la siguiente url...
<a href="111.php">Artículo de enlaces html</a>
…el navegador entiende que dentro de la página y de la carpeta en la que se encuntra,
debe dirigirse al fichero “111.php”.
Protocolos
Los enlaces nos pueden llevar a url con diferentes protocolos. Nosotros os vamos a
presentar los dos más importantes:
http: Este es el protocolo básico de los servidores webs.

https: Este protocolo se diferencia del anterior en que es un protocolo cifrado. Es
decir, la información que se envía y se recibe con esa url esta siendo encriptada
para que nadie más pueda interceptar y usar esa información. Las páginas con
este protocolo son las conocidas como “páginas seguras”. Esta encriptación de
los datos produce una pequeña ralentización de la página debido a que los datos
se envían cifrados.
Mailto
La url mailto es aquella que te lleva directamente a una dirección de correo y, más
concretamente, a redactar un mensaje. Una dirección mailto sería la siguiente:
<a
href=“mailto:correodeejemplo@correodeejemplo.com>correodeejemplo@correodeejem
plo.com</a>
Fíjate en el ejemplo que acabamos de poner. Nosotros, como texto para albergar el
enlace, hemos puesto la misma dirección que la que va a abrir la url. ¿Por qué?
El programa de correo que abre el navegador es aquel que el usuario tenga como
predefinido. Nosotros te aconsejamos que como texto para albergar el enlace pongas la
dirección de correo electrónico. Windows por defecto tiene predeterminado el Outlook
y al pinchar en el enlace lo abre directamente. Muchos usuarios prefieren copiar la
dirección y pegarla en su programa de correo.
La etiqueta target:
La etiqueta sirve para definir la forma en la que se accederá a la nueva url. Esta etiqueta
la escribimos dentro del enlace para predefinirla. Puede ser de diferentes tipos:
_self: Es el valor por defecto del parámetro target. El enlace se abrirá en el
mismo marco en el que está alojado.
_blank: Para hacer que ese enlace se abra en una ventana a parte.
_top: Elimina todos los marcos existente y muestra la nueva página en la
ventana original sin marcos.
_parent : Muestra la nueva página en el <frameset> que contiene al marco
donde se encuentra alojado el enlace. La etiqueta <frameset> la explicamos en
otro artículo.
Anclas
Un ancla nos sirve para dirigir al usuario a otra parte distinta pero dentro del mismo
fichero en el que estamos. Para crear un ancla debemos crear primero el lugar al que
queremos acceder. Debemos escribir lo siguiente:
<a name=“ancla”>

Y después debemos escribir un enlace con el código siguiente:
<a href= “#ancla”>Enlace para acceder al ancla</a>
Yo he situado un ancla justo al principio de este artículo. Si pinchas en el siguiente
enlace acudirás a ella y verás el efecto.
Ir al principio del artículo gracias al ancla
Y para terminar te mostraremos como podemos hacer que un enlace nos diriga
directamente a una imagen. Le hemos indicado al enlace que nos abra la imagen en una
ventana diferente gracias al target:blank. El código es el siguiente:
<a href="http://html.hazunaweb.com/html/imagenes/prueba.jpg" target="_blank">Ir
a ver el ejemplo de prueba </a>
Y terminamos con otro tipo de enlace. Esta vez el enlace está en la imagen. Si pinchas
en ella, irás al artículo dónde vimos por primera vez esa fotografía. Primero te
mostramos el código:
<a href="http://html.hazunaweb.com/112.php" target="_blank"><img
src="http://html.hazunaweb.com/html/imagenes/prueba-enlace.jpg" alt="Pincha para ir
al enlace" width="300" height="214" border="0"></a>
Formularios I: introducción.
Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos
permiten recibir información de los usuarios de nuestro site. Los formularios html están
compuestos por campos de texto y botones.
Una vez el usuario ha rellenado el formulario e introducido los valores en los campos,
éstos son enviados para poder procesarlos. El envío de estos datos puede hacerse a un
correo electrónico o a un programa que procese toda la información y nos ayude a hacer
un seguimiento.
Los formularios son un tag más de html y, como todos los tags, debe ir indicado
mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre </form>.
Todo lo que vaya dentro de estas etiquetas, serán partes del formulario.
La etiqueta <form> tiene una serie de atributos básicos que vamos a pasarte a explicar a
continuación.
action
El atributo “action” indica el tipo de acción que va a realizar el formulario.
Anteriormente indicamos que la información podía enviarse a un correo electrónico o a
un programa que la gestione. Es mediante esta etiqueta que se gestionan los formularios.
Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la
siguiente manera: <form action=mailto:direcciondelcorreo@correo.com…></form>.

Este tipo de envíos se utilizarían para casos de formularios de contacto, de sugerencias,
etc.
Si lo que queremos es que la información sea enviada a un programa que la gestione,
debemos indicarle en la acción, la url del archivo donde se encuentra ubicado el
programa que la gestionará. Lo escribiríamos de la siguiente manera: <form
action="dirección completa del archivo que la gestionará" ...> </form>. Este tipo de
envíos se utilizarían para casos de formularios de encuestas, cuestionarios, etc.
method
Mediante este atributo le indicamos al formulario la forma en la que el formulario será
enviado. Existen dos valores posibles: get y post.
El valor get es el valor por defecto. Si no concretamos el method, la información se
enviará a través de este medio.
“get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente,
al final de la url correspondiente y después de un signo de interrogación de cierre. Si se
envía más de un dato, éstos irán separados por el símbolo &.
Un ejemplo de un formulario enviado por el method=“get” sería el siguiente:
http://www............?nombre1=valor1&nombre2=valor2
El valor post indica que el método de envío no se hará a través de la url, sino formando
parte del cuerpo de la petición.
enctype
Mediante este atributo indicaremos la forma en la que viajará la información que se
mande a través del formulario.
La forma puede ser de varios tipos, aunque el más común es que la información se envíe
como texto plano (enctype="text/plain").
Una vez vistos estos tres atributos, veremos como quedaría el código de un formulario
estándar a un correo eléctrónico:
<form action="mailto:direcciondelcorreo@correo.com" method="post"
enctype="text/plain"> </form>

Formularios II: campos de texto.
Los campos de entrada de los formularios se definen mediante el tag <input> y sus
diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y de formas.
Vamos a ver a continuación distintos tipos de cajas y veremos como varían sus
características.
Las cajas de texto básicas: <input type= “text”>
La caja de texto básica se escribiría de la siguiente forma:
<input type="text" name="nombredelacaja">
su apariencia sería la siguiente:
Hemos visto como el type= “text” le da a la caja una apariencia sencilla. Este tipo de
campos se usan para albergar informaciones cortas y concretas.
Podemos completar el estilo de esta caja gracias a los siguientes atributos:
size: mediante el atributo size podemos definir el tamaño de la caja. Es decir, la
apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, éste se
desplazará pero sin que la caja varíe su tamaño. El texto irá desapareciendo por la
izquierda.
maxlength: Este atributo nos sirve para definir la cantidad máxima de letras que se
pueden escribir en la caja. No se podrán escribir en la caja más caracteres que los
indicados por el maxlength.
value: Define si queremos que en la ventana haya un texto ya preescrito. Este texto
puede ayudar al usuario a saber cúal es el tipo de dato que te piden en ese campo.
name: para ponerle un nombre al campo. Esto resulta muy útil a la hora de gestionar la
información que nos llegue.
Mira el siguiente código:
<input type="text" size="15" maxlength="30" value="Nombre" name="nombre">
Aquí vemos un tipo de caja “text” con un tamaño de 15 y un límite de caracteres de 30.
Además, tiene un texto preescrito en él. El resultado sería el siguiente:
Nombre

Campos de texto largo: <textarea>
Un <textarea> es como una caja de texto sencilla, tipo “text”, pero en la que dejamos al
usuario espacio de sobra para poder escribir un texto largo. Son útiles para que el
usuario contacte con nosotros, plantee sus dudas o sugerencias, etc.
Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que vaya
dentro de estas etiquetas formará parte del texto.
Sus atributos básicos son “rows” y “cols” que servirán para definir el tamaño del
textarea. Además, no debemos olvidar el atributo “name”, que servirá para definir el
nombre de este campo.
Un textarea llamado “comentarios” y con unas dimensiones de 10 filas y de 40
columnas, tendría el código siguiente
<textarea name="comentarios" rows="10" cols="40">Escribe aquí tus
comentarios</textarea>
Y se vería de la siguiente forma:
Escribe aquí tus comentarios
Textos con passwords
En muchos formularios se piden datos personales que el usuario no quiere que se lean a
su alrededor: contraseñas, etc. Para ello debemos crear una caja que no muestre los
datos que se escriben en ella y que los codifique. Esto es más sencillo de lo que parece.
El siguiente código es de un campo con datos codificados:
<input type="password" name="contraseña">
Y este sería el resultado obtenido:

Formularios III: listas de opciones.
Las listas de opciones son de gran ayuda para los formularios en los que queremos saber
la opinión de un aspecto concreto en nuestra Web, dentro de diferentes opciones
planteadas previamente por nosotros. Las listas de selección u opciones se escriben
gracias a la etiqueta <selection> y a su cierre.
Vamos a ponerte un ejemplo de la lista de opciones básica, la más sencilla. Si queremos
preguntar, por ejemplo, cuál es el medio de transporte favorito de nuestro usuarios, el
código de la lista de selección podría ser el siguiente:
<select name="transporte">
<option>Coche</option>
<option>Avión</option>
<option>Tren</option>
</select>
Y el resultado quedaría de la siguiente manera.
Coche
Pero podemos personalizar esta lista de opciones mediante una serie de atributos. Por
ejemplo, podemos hacer que se vea más de una opción a la vez en la lista. Para ello
utilizaremos “size”, indicando el número de opciones que queremos que se muestren.
En la lista anterior si quisieramos que se vieran dos opciones, deberíamos cambiar el
código anterior por el siguiente:
<select name="transporte" size="2">
</select>
Para obtener el siguiente resultado:
Coche
Avión
También podemos definir si queremos que se pueda elegir más de una opción a la vez
mediante las teclas ctrl y shift. Para ello utilizaremos el atributo multiple. Mira primero
cómo quedaría nuestro código.
<select name="transporte" size="2" multiple>
</select>

Y aquí comprobarás lo que nos permite hacer este atributo.
Coche
Avión
Otra cosa que podemos predefinir es que la opción que aparezca seleccionada al
principio no sea la primera que está en la lista. Esto se realiza gracias al atributo
selected y lo tenemos que poner en la opción que queramos que aparezca como
seleccionada. En el código siguiente, queríamos que apareciera seleccionada la opción
del tren.
<option selected>Tren</option>
</select>
Y aquí puedes ver cual ha sido el resultado.
Tren
Por último esta el atributo value. Este atributo es muy útil para gestionar los datos, sobre
todo si le llega a un programa. Con este atributo lo que se le hace es atribuir un número
o una letra a cada opción.
El atributo se escribe dentro de cada opción y se define el valor del mismo. Por ejemplo,
en la primera lista que te hemos presentado podríamos valorar nuestras opciones de la
siguiente manera:
<option value="1">Coche</option>
<option value="2">Avión</option>
<option value="3">Tren</option>
</select>
Y en el supuesto de seleccionar por ejemplo la opción del avión, al programa (o al
correo electrónico) le llegaría el siguiente dato: transporte=2. si te fijas, transporte es el
nombre de esta lista de opciones.
Listas de botones: radio
A continuación vamos a ver otro tipo de listas de opciones o de selección. Son listas con
botones de tipo radio. Estos botones se escriben mediente la etiqueta type=”radio”.
Vamos a transformar la lista anterior en este tipo de lista. Fijaros que a cada opción le
vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el mismo nombre. El
código nuevo quedaría de la siguiente manera:
<input type="radio" name="transporte" value="1">Coche
<br>

<input type="radio" name="transporte" value="2">Avión
<br>
<input type="radio" name="transporte" value="3">Tren
Y el cambio de aspecto es evidente. Aquí lo tenéis:
Coche
Avión
Tren
Por defecto no saldrá ninguna opción activada. Pero si queremos activar alguna de ellas
podemos hacerlo mediante el atributo checked. Por ejemplo, en el código siguiente la
lista de opciones tiene activada la opción avión:
<input type="radio" name="transporte" value="1">Coche
<br>
<input type="radio" name="transporte" value="2" checked>Avión
<br>
<input type="radio" name="transporte" value="3">Tren
Y observa el resultado que obtenemos…
Coche
Avión
Tren
Listas de cajas: checkbox.
Estas listas de opciones son muy parecidas a las vistas anteriormente salvo por dos
detalles que vamos a mostrarte a continuación.
El primero de ellos y fundamental es que las cajas son de un tipo diferente y se escriben,
por tanto, de forma diferente. Las cajas se escriben mediante type=“checkbox”.
Otra diferencia es que así como las listas de botones tipo “radio” sólo permitiían elegir
una opción (siempre y cuando los nombres de las opciones fueran los mismos), las listas
de cajas permiten seleccionar una o varias opciones.
Aquí tienes el código de una lista que hemos escrito para demostrarte todo lo que te
hemos explicado anteriormente:
<input type="checkbox" name="transporte" value="1">Coche
<br>
<input type="checkbox" name="transporte" value="2" checked>Avión
<br>
<input type="checkbox" name="transporte" value="3">Tren

observa a continuación el resultado:
Coche
Avión
Tren
Formularios IV: botones submit y reset.
Botón de envío
Para enviar la información, el formulario necesita de un botón que le indique que el
formulario ha concluido y que pueden enviar la información.
Los botones de envío se crean con la etiqueta “input” de tipo “submit”. Además, hay
que definir el texto que queremos que esté escrito en el botón. Esto lo conseguimos con
el atributo “value”. Así, el código de un botón sencillo de formulario sería el siguiente:
<input type="submit" value="Enviar información">
Obteniendo el siguiente resultado en nuestra Web:
Enviar información
Botón de resetear la información
Es posible que el usuario una vez avanzado el formulario, quiera reiniciarlo desde el
principio y volver a escribir la información. Para ello es muy útil el botón para borrar la
información.
El botón se escribe casi igual que el anterior, cambiando el type, que en el caso de estos
botones es “reset” y cambiando el mensaje interno del botón, o sea, el “value”.
El ejemplo sencillo de este botón tendría el siguiente código:
<input type="reset" value="Borrar información">
Y el resultado de ese código sería este botón:
Borrar información
Formularios V: otros campos.
hidden
El hidden es un atributo que se le pone al tag. Gracias a este atributo estamos enviando

al programa de gestión de datos, aparte de los datos enviados por el propio usuario,
datos predefinidos por nosotros mismos invisibles para el usuario. Estos datos pueden
ser útiles para ayudar al programa en su gestión de los datos del formulario. Lo que
hacen es comunicar cierta información al servidor sobre cómo tratar los datos
manteniéndose ocultos a la vista de los usuarios.
Este tipo de datos ocultos no se muestran en la página, aunque sí pueden ser detectados
solicitando el código fuente. El atributo hidden no se llega a usar en páginas escritas en
html, sólo en las que empleen también otro tipo de lenguajes.
Aquí podemos ver el código de un ejemplo:
<form action="mailto: nombredelcorreo@correo.com " method="post"
enctype="text/plain" name="mihidden">
<input type="hidden" name="opcion" value="si">
</form>
<form action="mailto: nombredelcorreo@correo.com " method="post"
enctype="text/plain" name="mihidden">
<input type="hidden" name="opcion" value="si">
</form>
image
El atributo “image” sirve para personalizar un botón. Es decir, este atributo introduce un
botón en una imagen, sustituyendo al formato estándar de botones que ya hemos visto
en otros artículos del tutorial.
La función de los botones creados de esta forma es igual que la de submit, pero nos
permite personalizar este elemento.
Un ejemplo de este tipo de botones sería este
<form action="mailto:nombredelcorreo@correo.com" method="post"
enctype="text/plain" name="image">
<input type="image" name="boton"
src="http://html.hazunaweb.com/html/imagenes/boton.jpg" align="middle">
</form>
file
El atributo file permite al usuario subir archivos. Por supuesto necesitaremos un
programa que gestione estos archivos mediante un lenguaje diferente al html.
Aquí te hemos escrito un formulario con este tipo de type (type=“file”) para que veas
las diferencias con los otros que habíamos visto hasta ahora
<form method="post" enctype="multipart/form-data"><br>
<input type=file size=60 name="file1"><br><br>

<input type=file size=60 name="file2"><br><br>
<input type=submit value="subir"><br>
</form><br>
Fíjate como tenemos que cambiar el enctype, la forma de enviar la información, ya que
ahora no vamos a enviar texto plano, sino archivos.
Nosotros tenemos que definir el tamaño del campo y su nombre. El botón "Examinar"
es creado automáticamente por el navegador. Al pinchar en él, podremos examinar
nuestro disco duro para encontrar la imagen que deseemos subir.
Formularios VI: ejemplo de formulario.
Como ejercicio final hemos hecho un formulario intentando reunir en él todo lo que
hemos dado y, sobre todo, todas las opciones que tenemos a la hora de confeccionar un
formulario.
Lo idóneo es que lo observes y trates de hacerlo tú, sin tener que mirar el código que
nosotros hemos utilizado. Por si necesitarás hacerlo, aquí te dejamos el código:
<form action="mailto:emaildelaempresaquehaceelformulario@email.com"
method="post" enctype="text/plain">
Nombre: <input type="text" name="nombre" size="25" maxlength="50"><br><br>
Apellidos: <input type="text" name="apellidos" size="35" maxlength="100">
<br><br>
Correo electrónico: <input type="text" value="@" name="correo" size="40"
maxlength="100">
<br><br>
Población: <input type="text" name="poblacion" size="15" maxlength="50">
<br><br>
Provincia: <input type="text" name="provincia" size="15" maxlength="50">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>Edad:
<br>
<input type="radio" name="edad" value="020"> 0-20
<br>
<input type="radio" name="edad" value="2040" checked> 20-40
<br>
<input type="radio" name="edad" value="4060"> 40-60
<br>
<input type="radio" name="edad" value="60100"> 60-100</td>
<td>¿Cómo nos conociste?<br>
<input type="checkbox" name="conocer">
A través de un amigo.<br>
A través de un buscador.<br>
Navegando por la red.<br>

Otros</td>
</tr>
</table>
Opinión sobre nuestra página web<br>
<textarea cols="40" rows="5" name="opinion">Escriba aquí su opinión...</textarea>
<br><br>
Tiene alguna sugerencia...
<br>
<textarea cols="40" rows="5" name="sugerencias">Escriba aquí sus
sugerencias...</textarea>
<br><br>
¿Cúanto navegas por intenet? (Señala la opción que
más se acerque)<br>
<select name="frecuencia" size="2">
<option value="1">2 horas al día.
<option value="2">4 horas al día.
<option value="3">10 horas a la semana.
<option value="4">20 horas al mes.
</select>
<br>
<br>
<table width="50%" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td><div align="center">
<input type="submit" value="Enviar formulario">
</div></td>
<td><div align="center">
<input type="Reset" value="Borrar formulario">
</div></td>
</tr>
</table>
</form>
Marquee.
La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página
Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a
los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio "<marquee>"
y su cierre "</marquee>".
El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es
configurable gracias a los siguientes atributos:
align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona
alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").
bgcolor: Con este atributo definiremos el color de fondo que le queremos dar a la

marquesina donde está el texto en movimiento.
height y width: El primero marca la altura que tendrá la marquesina y el segundo la
anchura de la misma.
scrollamount: Este atributo define la cantidad de píxeles que queremos que se desplace
el texto en cada movimiento. Por ejemplo: <marquee scrollamount="3"> </marquee>
significará que el texto que vaya dentro de esa etiqueta se moverá a razón de tres píxeles
por movimiento.
scrolldelay: Éste nos define la velocidad del texto que está dentro de la marquesina. A
menor numeración, mayor velocidad. Es decir, un texto irá más rápido si el scrolldelay
es 5, que si el scrolldelay es 20.
loop: Este atributo nos determina si el movimiento se repetirá o no. Si queremos que el
movimiento sólo se repita unas veces determinadas debemos indicárselo con un
número, que será el número de veces que se repita. Si queremos que se repita sólo 10
veces, su loop será el siguiente: <marquee loop="10"> </marquee>
Si queremos que se repita debemos usar "infinite" o "-1". Si no especificamos nada, se
repetirá constantemente.
direction: Sirve para definir la dirección del movimiento: "left" para la izquierda,
"right" para la derecha, "top" para arriba y "down" para abajo.
behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no
especificamos este atributo, el texto se moverá de forma circular en el sentido que le
hayamos marcado. Con behavior="scroll" conseguiremos el mismo efecto: el texto se
moverá circularmente.
Con behavior="slide" haremos que el texto se detenga al llegar al final de la
marquesina. Y con el behavior="alternate" el texto irá y volverá de un lado a otro de la
marquesina.
Nosotros hemos querido mostrarte un ejemplo de marquee
Y el código de nuestro marquee es el siguiente:
<marquee bgcolor="#FFFFFF" width="50%" scrolldelay="100" scrollamount="5"
direction="left" loop="infinite">Estás viendo el ejemplo que hemos hecho nosotros.
</marquee>

Otras etiquetas:
center
La etiqueta <center> nos permite centrar párrafos, imágenes o tablas dentro de nuestra
Web. Para centrar un elemento, éste debe estar entre las etiquetas de apertura y cierre.
Este sería el código de un texto centrado:
<center> Este texto está centrado en la página. </center>
span
La etiqueta <span> nos permite agrupar un conjunto de elementos y así poder establecer
unas reglas de estilo comunes para el conjunto. Los elementos que queramos agrupar
con “span” deben ir dentro entre <span> y </span>, su etiqueta de apertura y cierre
respectivamente.
Como podemos comprobar la etiqueta <span> se parece mucho a la etiqueta <div> ya
que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas
características comunes para todos esos elementos. Tanto uno como el otro son
etiquetas más propias de css. Hay una diferencia clara entre ambas.
Con la etiqueta span podemos agrupar unos elementos, sin que éstos sufran ninguna
variación respecto al resto del texto, a no ser que le indiquemos un estilo al span. En
cambio con div los elementos que forman parte de un grupo sufren una variación de
salto de línea con respecto a los demás elementos. <div> crea un salto de línea al
principio y otro al final.
Vamos a ver el código del ejemplo del efecto del span en un grupo de elementos
Esto es un párrafo <span style="color:red">con unas letras en rojo</span> para que
veas lo que se puede hacer con la etiqueta span.
Y aquí podemos ver el resultado del efecto:
Esto es un párrafo con unas letras en rojo para que veas lo que se puede hacer con la
etiqueta span.
CSS.
Las hojas de estilo completan Html, dándole mayores posibilidades. Nosotros te
explicamos CSS en su tutorial específico, pero en este artículo queríamos mostrarte
algunas de las posibilidades que nos ofrecen las hojas de estilo.
Observa el siguiente texto de Gustavo Adolfo Becquer:
Volverán las oscuras golondrinas
en tu balcón sus nidos a colgar,
y otra vez con el ala a sus cristales

jugando llamarán.
Volverán las tupidas madreselvas
de tu jardín las tapias a escalar,
y otra vez a la tarde aún más hermosas
sus flores se abrirán.
Pero aquellas, cuajadas de rocío
cuyas gotas mirábamos temblar
y caer como lágrimas del día...
¡esas... no volverán!
Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se
pueden llegar hacer. Si quieres saber cómo lo hemos hecho, aquí te dejamos el código
para que lo observes.
<p style="font-size:20px;color:#FF0000;">Volverán las oscuras
golondrinas<br>
en tu balcón sus nidos a colgar,<br>
y otra vez con el ala a sus cristales<br>
jugando llamarán.</p>
<p> <span style="background-color:#00FF00;font-
style:italic;color:#0000FF">Volverán
las tupidas madreselvas<br>
de tu jardín las tapias a escalar,<br>
y otra vez a la tarde aún más hermosas<br>
sus flores se abrirán.<br>
<br>
</span>
<span style="border-bottom:1px #000000 dashed;"> Pero aquellas, cuajadas
de rocío<br>
cuyas gotas mirábamos temblar<br>
y caer como lágrimas del día...<br>
¡esas... no volverán!</span></p>
Javascript.
Como hemos visto a lo largo del tutorial, el html tiene una importante limitación: es un
lenguaje estático, sin interactividad con el usuario. Javascript es un lenguaje que nos
ayuda a salvar esa barrera y que nos ofrece un mayor dinamismo.
Los programas del lenguaje Javascript se escriben dentro del html. Nosotros no vamos a
enseñarte a utilizar este lenguaje, pero sí queremos mostrarte como incluirlo en tu
página Web, dentro del lenguaje html.
Aunque existen diferentes formas de incluir Javascript en un documento html, nosotros
vamos a mostrarte la más común: mediante la etiqueta <script> y su correspondiente
cierre: </script>. Además deberemos indicar dentro de esa etiqueta el lenguaje

(language="Javascript") y el tipo (type="text/javascript").Dentro de esta etiqueta irá el
programa Javascript. En un mismo documento html podemos incluir varias etiquetas
<script>. El único requisito es que todas ellas estén convenientemente cerradas.
En el siguiente ejemplo verás una de las muchas cosas que se pueden hacer mediante el
Javascript. Nosotros hemos hecho una ventana de alerta. Ejemplo de Javascript. Y a
continuación te mostramos el código:
<html>
<head>
<title>Alerta en Javasrcipt.</title>
</head>
<body>
Aquí tienes nuestra ventana de alerta en Javascript. ¿Qué
te parece?
<script language="Javascript" type="text/javascript">
window.alert("Esta alerta la hemos hecho con Javascript")
</script>
</body>
</html>
Viendo detenidamente el código nos damos cuenta de cómo el programa Javascript está
escrito dentro de las etiquetas <script> correspondientes. Este programa en concreto es
una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente.

Etiquetas HTML
Apertura Acción Atributos Cierre
< ! Comentario. Ninguno -->
<A> Hipervínculo.
HREF, NAME, REL,
REV, TITLE
</A>
<ADDRESS>
Formato para
dirección del
autor.
Ninguno </ADDRESS>
<BASE>
Url del autor;
contexto del
documento.
HREF </BASE>
<BASEFONT
SIZE>
Tamaño de la
fuente base.
Ninguno NO
<BGSOUND> Sonido de fondo. SRC, LOOP.
NO - Internet
Explorer
<BIG>
Aumenta el
tamaño.
Ninguno </BIG>
<BLINK>
Hace parpadear el
texto.
Ninguno
</BLINK> -
Netscape
<BLOCKQUOTE>
Da formato con
sangría a un
párrafo
Ninguno </BLOCKQUOTE>
<BODY>
Cuerpo del
documento.
BGCOLOR,
BACKGROUND,
TEXT, LINK,
VLINK, ALINK
</BODY>
<BR> Retorno de línea.
CLEAR: Se utiliza en
combinación con
ALIGN de IMAGE.
NO
<CAPTION>
Posición de la
leyenda en una
tabla.
ALIGN:
TOP/BOTTOM.
Internet Explorer:
LEFT, RIGHT,
CENTER
</CAPTION>
<CENTER> Centrar. Ninguno </CENTER>
<CITE> Formato para Ninguno </CITE>

citas en itálicas.
<CODE>
Formato en tipo
código.
Ninguno </CODE>
<DD>
Definiciones
marcadas, para
Lista de
Definiciones
<DL>.
Ninguno NO
<DFN<
Formato en
itálica.
Internet Explorer </DFN<
<DIR>
Lista de
directorio, con
elementos
marcados con
<LI>.
Ninguno </DIR>
<DL>
Lista de
Definiciones, con
términos
marcados con
<DT> y
definiciones
marcadas con
<DD>.
Ninguno </DL>
<DT>
Términos
marcados, para
Lista de
Definiciones
<DL>.
Ninguno NO
<EM>
Formato
enfatizado en
itálica.
Ninguno </EM></TD< tr>
<EMBED> Sonido de Fondo.
SRC, WIDTH,
HEIGHT,
AUTOSTART,
LOOP.
NO -
Netscape</TD< tr>
<FONT>
Definición de la
fuente.
SIZE, COLOR.
Internet Explorer:
FACE.
</FONT>
<FORM>
Para ingreso de
datos del usuario
en un formulario.
ACTION, METHOD </FORM>

<H1 ...H6>
Tamaño de letras
del 1 al 6.
HTML 3.0: LEFT,
CENTER, RIGHT
</H1 .../H6>
<HEAD>
Encabezamiento
del documento.
BASE, TITLE,
ISINDEX, NEXTID,
META
</HEAD>
<HR> Línea horizontal.
NOSHADE, SIZE,
WIDTH, ALIGN.
Internet Explorer:
COLOR
NO
<HTML>
Al principio y al
fin de todo
documento.
HEAD, BODY </HTML>
<I> Itálica (Cursiva). Ninguno </I>
<IMG> Cargar imágenes.
ALIGN, SRC, ALT,
ISMAP, WIDTH,
HEIGHT, VSPACE,
HSPACE
NO
<INPUT>
Define un objeto
de ingreso en un
formulario.
TYPE, NAME,
VALUE, SIZE,
MAXLENGHT,
ALIGN, SRC,
CHECKED
</INPUT>
<ISINDEX>
Indica que existe
un index en el
server para el
documento.
Netscape: PROMPT NO
<ISMAP>
Activa la
selección de
imágenes para el
usuario.
Ninguno NO
<KBD>
Formato
monoespaciado.
Ninguno </KBD>
<LI> Ítem de lista.
Netscape: VALUE,
TYPE
NO
<LISTING> Listados Ninguno. Obsoleto. </LISTING>
<LIT>
Literal. Como
PRE, pero usa
letra
proporcional.
Ninguno </LIT>

<MARQUEE> Marquesina.
ALIGN, BEHAVIOR,
BGCOLOR,
DIRECTION,
HEIGHT, WIDTH,
HSPACE, VSPACE,
LOOP,
SCROLLAMOUNT,
SCROLLDELAY.
</MARQUEE> -
Internet Explorer
<MENU> Lista menú. Ninguno </MENU>
<META>
Metainformación
ubicada en
HEAD.
EQUIV, CONTENT,
NAME
NO
<NEXTID>
Es un parámetro
que identifica al
documento.
NO NO
<NOBR>
Elimina los saltos
de líneas.
Ninguno NO
<OL>
Lista ordenada,
con elementos
marcados con
<LI>.
TYPE, START,
VALUE.
</OL>
<OPTION>
Opción de
selección dentro
de un formulario.
VALUE, SELECTED
VALUE
NO
<P>
Retorno de línea,
con un espacio.
Ninguno NO
<P ALIGN>
Alineación de
texto.
LEFT, CENTER,
RIGHT
</P>
<PLAINTEXT>
Pasaje de texto
plano.
Ninguno. Obsoleto. </PLAINTEXT>
<PRE>
Visualiza el texto
en su formato
original.
WIDTH </PRE>
<S> Texto tachado. Ninguno </S>
<SAMP>
Formato tipo
ejemplo.
Ninguno </SAMP>
<SELECT>
Para selección de
opciones dentro
de un formulario.
NAME, SIZE,
MULTIPLE
</SELECT>

<SMALL>
Disminuye el
tamaño.
Ninguno </SMALL>
<STRONG>
Formato
enfatizado más
fuerte que <EM>.
Ninguno </STRONG>
<SUB> Subíndice. Ninguno </SUB>
<SUP> Superíndice. Ninguno </SUP>
<TABLE> Tabla.
BORDER,
CELLPADDING,
CELLSPACING,
HEIGTH, WIDTH.
Internet Explorer:
COLOR
</TABLE>
<TD>
Celdas de una fila
en una tabla,
dentro de <TR>.
ALIGN, VALIGN,
NOWRAP,
COLSPAN,
ROWSPAN,
HEIGTH, WIDTH
</TD>
<TEXTAREA>
Área para ingreso
de texto dentro de
un formulario.
NAME, ROWS,
COLS.
</TEXTAREA>
<TH> Título de Tabla.
ROWSPAN,
COLSPAN, ALIGN,
VALIGN, NOWRAP,
HEIGHT, WIDTH
</TH>
<TITLE>
Título dentro de
HEAD.
Ninguno </TITLE>
<TR> Fila de una Tabla. ALIGN, VALIGN </TR>
<TT>
Formato tipo
máquina.
Ninguno </TT>
<UL>
Lista no
ordenada, con
elementos
marcados con
<LI> .
COMPACT, TYPE </UL>
<VAR>
Formato tipo
variable.
Ninguno </VAR>
<WBR>
Se usa con NOBR
para una sección
Ninguno NO

que deba ser
separada.
<XMP> Similar a PRE. Ninguno </XMP>
Atributos
Nombre Etiqueta Acción Valor
HREF<A>
Dirección del
URL local o
remoto.
href="www.hp.com"
LOOP
<BGSOUND>
Número de veces que se
reproduce el archivo de
sonido. Para permanente
se usa INFINITE o -1.
loop=infinite
SRC
Nombre del archivo de
sonido (Internet
Explorer)
src="sonido.wav"
LOOP
<EMBED>
Número de veces que se
reproduce el archivo de
sonido. Para permanente
se usa INFINITE o -1.
loop=-1
SRC
Nombre del archivo de
sonido (con Crescendo)
src="sonido.mid"
SRC
<IMAGE>
Nombre del gráfico src="imagen.gif"
ALT
Nombre que reemplaza
a la imágen cuando ésta
no puede ser cargada.
alt="Nombre de
Imágen"
BGCOLOR
<BODY>
Color de fondo
bgcolor="#FFFFFF"
(blanco)
BACKGROUND Imágen de fondo background="foto.gif"
TEXT Color del texto
text="#000000"
(negro)
LINK Color de vínculo link="#0000FF" (azul)
VLINK
Color de vínculo
visitado
vlink="#FF0000"
(rojo)
ALINK
Color de vínculo
presionado
alink="#00FF00"
(verde)
ALIGN <CAPTION> Colocar título arriba align=top

dentro de
<TABLE>
(TOP) o debajo
(BOTTOM) de la tabla.
ALIGN
<H1..H6>, <P
ALIGN>, <TD>,
<TH>, <TR>,
<DIV>,
Alinear el texto: LEFT,
RIGHT, CENTER
align=center
ALIGN
<HR>
Alinear el texto: LEFT,
RIGHT, CENTER
align=center
SIZE
Valor de la altura en
pixels o porcentaje
size=3
WIDTH
Valor del ancho en
pixels o porcentaje
width=50%
SIZE
<FONT>
Tamaño de la letra de 1
a 7
size=6
COLOR Color de la letra
color="#000000"
(negro)
FACE
Fuente del texto
(Internet Explorer)
face="helv"
(helvética)
HEIGHT <EMBED>,
<IMAGE>,
<MARQUEE>,
<TD>, <TH>
pixels o porcentaje
heigth=80
WIDTH
Valor del ancho en
pixels o porcentaje
width=50%
BORDER
<TABLE>
Borde y ancho del borde
en la tabla
border=5
CELLPADDING
Espacio entre el borde y
el texto
cellpadding=10
CELLSPACING
Espacio entre las líneas
interna y externa del
borde
cellspacing=3
HEIGHT
pixels o porcentaje
heigth=80
WIDTH
Valor del ancho en
pixels o porcentaje
width=50%
COLSPAN
<TD> dentro de
<TABLE>
Expandir una celda
varias columnas
colspan=4
ROWSPAN
Expandir una celda
varias filas
rowspan=4

Tag Vacío Descripción corta
 Inserta comentarios ocultos
<!DOCTYPE> Establece el tipo de documento
<a> Inserta vínculos o marcadores
<abbr> Explica abreviaciones
<acronym> Explica acrónimos
<address> Provee información de contacto
<applet> Inserta un applet (scripts)
<area> Define sectores para mapas de imagen
<b> Texto en negrita
<base> URI base para resolver URIs relativas
<basefont> Tamaño de la fuente predeterminado
<bdo> Suprime el algoritmo bidireccional
<big> Texto en tamaño "grande".
<blockquote> Citar párrafos
<body> Contiene los elementos a mostrar
<br> Fuerza un quiebre de línea
<button> Crea un botón
<caption> Establece un título para una tabla
<center> Centra su contenido
<cite> Inserta una cita o referencia
<code> Representa texto de computadora
<col> Da atributos a columnas en una tabla
<colgroup> Agrupa columnas en una tabla
<dd> Define descripciones en una lista
<del> Indica texto eliminado
<dfn> Asigna una definición a un término
<dir> Inserta una lista de directorios (árbol)
<div> Define un bloque de contenido
<dl> Define una lista
<dt> Inserta un término en una lista
<em> Indica énfasis

<fieldset> Agrupa controles en un formulario
<font> Establece el estilo de fuente
<form> Inserta un formulario
<frame> Inserta un marco
<frameset> Inserta un grupo de frames
<h1> Encabezado de nivel 1
<head> Define el bloque de encabezado
<hr> Dibuja una línea o regla horizontal
<html> Contiene al documento
<i> Muestra texto en itálica
<iframe> Inserta un marco dentro del documento
<img> Inserta una imagen
<input> Muestra controles de entrada
<ins> Indica texto insertado
<isindex> Entrada de línea simple
<kbd> Indica texto a ingresarse por el usuario
<label> Establece una etiqueta para un control
<legend> Asigna un título a un "fieldset"
<li> Define un artículo en una lista
<link> Ofrece informacón relacional
<map> Define un mapa de imagen
<menu> Lista menú
<meta> Da información sobre el documento
<noframes> Contenido alternativo para marcos
<noscript> Contenido alternativo para scripts
<object> Ejecuta aplicaciones externas
<ol> Inserta una lista ordenada
<optgroup> Agrupa opciones en un control select

<option> Define una opción en un control select
<p> Define un párrafo
<param> Da un parámetro para un objeto
<pre> Bloque de texto preformateado
<q> Inserta una cita en una línea
<s> Muestra texto tachado
<samp> Representa texto de programas
<script> Contiene scripts
<select> Crea un control select
<small> Muestra texto en letra "pequeña"
<span> Asigna atributos al texto en líneas
<strike> Muestra texto tachado
<strong> Indica énfasis fuerte
<style> Define atributos visuales (hojas estilo)
<sub> Define texto en sub-índice
<sup> Define texto en super-índice
<table> Inserta una tabla
<tbody> Define un cuerpo en una tabla
<td> Celda regular de una tabla
<textarea> Entrada de texto de líneas múltiples
<tfoot> Define un pie en una tabla
<th> Celda de encabezado de una tabla
<thead> Define un encabezado de tabla
<title> Define el título del documento
<tr> Inserta una fila en una tabla
<tt> Muestra texto en "teletype"
<u> Muestra texto subrayado
<ul> Inserta una lista sin orden
<var> Indica una instancia de una variable

Mi primera página
El código
primera.html
<codigo><HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi Primera pagina</H1></CENTER>
<HR>
<P>Esta es mi primera pagina (chispas). Por el
momento no se que tendra, pero dentro de poco
pondre aqui muchas cosas interesantes.
</BODY>
</HTML>

Formato del párrafo
Estas son las etiquetas más importantes (excluyendo algunas que veremos más adelante):
Etiqueta Utilidad Resultado
<P>
Sirve para delimitar un párrafo.
Inserta una línea en blanco antes del
texto.
Soy un párrafo
<CENTER> ...
</CENTER>
Permite centrar todo el texto del
párrafo.
Yo soy normal
Yo estoy centrado
<PRE WIDTH=x>
... </PRE>
Representa el texto encerrado en ella
con un tipo de letra de paso fijo. Muy
útil a la hora de representar código
fuente. El parámetro WIDTH
especifica el número máximo de
caracteres en una línea.
Estoy en paso fijo
<DIV ALIGN=x>
... </DIV>
Permite justificar el texto del párrafo
a la izquierda (ALIGN=LEFT), derecha
(RIGHT), al centro (CENTER) o a ambos
márgenes (JUSTIFY)
Yo estoy a la izquierda
Yo al centro
Y yo a la derecha
(recuerda a la política
esto, oye)
Yo soy el más chulo,
porque estoy en todos
los lados.
<ADDRESS> ...
</ADDRESS>
Para escribir direcciones (de esas
donde vive la gente, no electrónicas).
Daniel Rodríguez
Herrera
C/Ecuador 9, 1ºB
28220 Majadahonda
<BLOCKQUOTE>
...
</BLOCKQUOTE>
Para citar un texto ajeno. Se suele
implementar dejando márgenes tanto
a izquierda como a derecha, razón
por la que se usa habitualmente.
Me gustaría
reencarnarme en las
yemas de los dedos de
Warren Beatty (Woody
Allen)

Las 6 cabeceras
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son éstas:
Etiqueta Resultado
<H1> ... </H1> Cabecera de nivel 1

Cambiando el tipo de letra
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de
letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un
párrafo.
Etiqueta Utilidad Resultado
<B> ... </B> Pone el texto en negrita.
Soy un texto
negro como el
tizón
<I> ... </I>
Representa el texto en
cursiva.
Estoy ladeado
<U> ... </U> Para subrayar algo.
Como soy muy
importante estoy
subrayado
<S> ... </S><imagenenlinea
direccion="graficos/32.gif"
descripcion="HTML 3.2"/>
Para tachar.
A mí, en cambio,
nadie me quiere
<TT> ... </TT>
Permite representar el
texto en un tipo de letra
de paso fijo.
No soy variable
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
<BIG> ... </BIG>
Incrementa el tamaño
del tipo de letra.
Soy GRANDE
<SMALL> ... </SMALL>
Disminuye el tamaño
del tipo de letra.
Creí ver un lindo
gatito
<BLINK> ... </BLINK>
Hace parpadear el texto.
Resulta algo irritante.
¿Molesto?

Introducción a HTML básico

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Introducción a HTML básico

Similar a Introducción a HTML básico (20)

Más de mantenimientosecc022

Más de mantenimientosecc022 (10)

Último

Último (20)

Introducción a HTML básico