Guia de html

53
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&aacute;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).

description

Etiquetas HTML,

Transcript of Guia de html

Page 1: Guia de  html

Introduccioacuten al HTML

HTML (HyperText Markup Language) no es un lenguaje de programacioacuten sino un

lenguaje descriptivo una serie de etiquetas que el navegador interpretaraacute de una u otra

forma para mostrar distintos contenidos por pantalla Por ejemplo si creamos un

documento de texto que se llame ejemplohtml y que contenga el siguiente texto

lthtmlgt

ltheadgtltheadgt

ltbodygt

Hola mundoltbrgt

ltbgtEsto es negritaltbgtltbrgt

ltigtY esto itampaacutelicaltigtltbrgt

ltbodygt

lthtmlgt

generaraacute el siguiente resultado

Hola mundo

Esto es negrita Y esto itaacutelica

Por tanto aprender HTML consiste en conocer y saber utilizar dichas etiquetas

Para realizar paginas web no necesitas ninguacuten software especifico sino que tan soacutelo

necesitas un editor de texto como puede ser el bloc de notas de Windows aunque se

recomienda usar alguacuten otro editor maacutes especializado que te ayude en la escritura del

coacutedigo como puede ser el Macromedia Dreamweaver

Estructura baacutesica de una paacutegina web

La estructura baacutesica de una paacutegina web es la siguiente

lthtmlgt

ltheadgtltheadgt

ltbodygt

ltbodygt

lthtmlgt

Una estructura HTML se empieza con la etiqueta lthtmlgt y acaba con lthtmlgt Todo lo

que esteacute en medio seraacute la paacutegina web Dentro de lthtmlgtlthtmlgt se encuentran 2 partes

diferenciadas

La primera ltheadgtltheadgt es la cabecera de la paacutegina Aquiacute iraacuten cierta informacioacuten

que no es directamente el contenido de la paacutegina Aquiacute se pone el tiacutetulo de la paacutegina los

metadatos estilos coacutedigo javascript La primera que se suele estudiar es lttitlegtlttitlegt

que indica el tiacutetulo de la paacutegina (lo que el navegador pone en la parte superior

izquierda)

La segunda parte es ltbodygtltbodygt Aquiacute va propiamente el contenido de la paacutegina

fotos paacuterrafos formularios etc Por ejemplo siguiendo con el ejemplo de la paacutegina

anterior el siguiente coacutedigo

lthtmlgt

ltheadgt

lttitlegtEsto es el tampiacutetulo de la pampaacuteginalttitlegt

ltheadgt

ltbodygt

Hola mundoltbrgt

ltbgtEsto es negritaltbgtltbrgt

ltigtY esto itampaacutelicaltigtltbrgt

ltbodygt

lthtmlgt

Generaraacute el siguiente resultado

Hola mundo

Esto es negrita Y esto itaacutelica

Observe el tiacutetulo en la parte superior izquierda de la paacutegina Ademaacutes dentro de ltbodygt

ltbodygt distinguimos varias etiquetas

ltbrgt =gt Indica salto de liacutenea En HTML un salto de liacutenea normal (pulsando la tecla

Enter) no produce un salto de liacutenea en el resultado Es necesario escribir ltbrgt (u otra

etiqueta similar)

ltbgtltbgt =gt Indica comienzo y fin de negrita

ltigtltbgt =gt Itaacutelica

Tambieacuten observamos el coacutedigo ampiaacute =gt Esto indica que queremos poner una i

con acento es decir iacute

Es importante mencionar que las etiquetas se pueden escribir indistintamente en

mayuacutesculas o minuacutesculas es decir ltbgtEsto es negritaltbgt y ltBgtEsto es negritaltBgt

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 siacutembolo ) si

no el navegador podriacutea dar resultados inesperados Excepciones a esto son algunas

etiquetas que no lo necesitan como ltbrgt o lthrgt

Etiqueta body

Anteriormente os hemos explicado que todo lo que queramos que se vea en nuestra

paacutegina 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 tambieacuten podemos personalizarla para darle el aspecto que nosotros

deseemos

Esta personalizacioacuten la conseguiremos a traveacutes de una serie de paraacutemetros que a

continuacioacuten te presentaremos Bien pues vamos a empezar

Color de fondo bgcolor

El primer paraacutemetro que debes conocer es el del color de fondo el bgcolor A traveacutes

de este paraacutemetro podremos definir el color de fondo que queramos que tenga nuestra

paacutegina Un ejemplo muy simple es el siguiente Si queremos que nuestra paacutegina quede

con un fondo rojo deberemos escribir

ltbody bgcolor=FF0000gtltbodygt

Imagen de fondo background

Puede que no quieres que tu paacutegina tenga un color soacutelo de fondo sino que quieras que

tu paacutegina tenga una imagen En ese caso deberaacutes indicarlo con la etiqueta background

La etiqueta quedariacutea de la siguiente manera

ltbody background=URLgt ltbodygt

Doacutende leemos URL deberemos escribir la direccioacuten 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 paacutegina la imagen se repetiraacute 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 queacute color queremos que

sea nuestro texto Esto lo definiremos con el paraacutemetro text

Como ejemplo vamos a poner que queremos que nuestro texto sea en negro con lo que

escribiremos lo siguiente

ltbody text= 000000gtltbodygt

Maacutergenes leftmargin topmargin rightmargin y bottommargin

Ya sabemos de queacute color seraacute nuestro fondo y nuestro texto pero tambieacuten podemos

predefinir los maacutergenes de nuestra paacutegina web para que queda mucho mejor Porque no

queremos que nuestro texto se quede muy pegada a los maacutergenes iquestverdad

Para especificar los maacutergenes utilizaremos el paraacutemetro margin con su correspondiente

indicacioacuten delante Asiacute 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 maacutergenes sean de 10 piacutexeles por todas partes escribiremos lo

siguiente

ltbody leftmargin=10px topmargin=10px rightmargin=10px

bottommargin=10pxgtltbodygt

Color de links link alink y vlink

En body tambieacuten podemos ( y de hecho debemos hacerlo) definir el color de los

viacutenculos de nuestra paacuteginas definir el color con el que se mostraran los links Aquiacute

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)

Asiacute pues si queremos que nuestra paacutegina tenga un color de enlaces (de links) de color

rojo y que esos enlaces sean rojos cuando esteacuten activos y se queden en azul cuando

esteacuten inactivos deberemos escribir lo siguiente

ltbody link= FF0000 alink= FF0000 vlink= 0000FFgtltbodygt

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 pequentildeo texto introductorio como se poniacutea la

negrita y la itaacutelica Pero eso era solamente introductorio A continuacioacuten lo vamos a

explicar de una forma maacutes 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 abririacutea ltbgt y se cerrariacutea ltbgt

Se pueden combinar diferentes formatos o sea diferentes etiquetas Por ejemplo si

queremos que un texto esteacute en negrita y en cursiva escribiriacuteamos esto

ltbgtltigtEste texto estaacute escrito en negrita y en cursivaltigtltbgtCuando combines ten

cuidado a la hora de cerrar las etiquetas Debes cerrar las etiquetas por orden de la maacutes

interior a la maacutes exterior Por uacuteltimo recordad que podeacuteis escribir las etiquetas en

minuacutesculas o en mayuacutesculas

Vamos con los diferentes formateos html que podemos encontrar

Negrita

Existen dos etiquetas que haraacuten que nuestro texto se convierta en negrita La utilizacioacuten

de cualquiera de ellas es indiferente Puedes usar la que prefieras

La primera es la etiqueta ltbgt y la otra es la etiqueta ltstronggt Aquiacute va un ejemplo

Este palabra la vamos a poner en ltbgtnegritaltbgt y esta otra

ltstronggttambieacutenltstronggt

Este palabra la vamos a poner en negrita y esta otra tambieacuten

Cursiva

Para escribir un texto en cursiva debemos utilizar la etiqueta ltigt (y por supuesto

cerrarla con la etiqueta ltigt)

Tambieacuten podemos utilizar la etiqueta ltemgt Como en el caso de la negrita es

indiferente el uso de una u otra Aquiacute os dejo un ejemplo

Este palabra la vamos a poner en ltigtcursivaltigt y esta otra

ltemgttambieacutenltemgt

Este palabra la vamos a poner en cursiva y esta otra tambieacuten

Subrayado

Si queremos que la palabra o el texto quede subrayado deberemos rodearlo con la

etiqueta ltugt y cerrarlo con su correspondiente etiqueta O sea ltugt Asiacute subrayariacuteamos

una frase importante

ltugtAsiacute subrayariacuteamos una frase importanteltugt

Asiacute subrayariacuteamos una frase importante

Texto con espaciado simple o TT

TT son las iniciales de ldquoteletyperdquo Utilizando esta etiqueta conseguiremos un espaciado

simple entre las diferentes letras del texto Abriremos la etiqueta con ltttgt y la

cerraremos con ltttgt

ltttgtEsta frase la vamos a escribir de forma espaciada ltttgt

Esta frase la vamos a escribir de forma espaciada

Palabras maacutes grandes o maacutes pequentildeas

Puede que en una frase queramos destacar un palabra por medio de una variacioacuten de

tamantildeo sin necesidad de utilizar los encabezados(los explicaremos maacutes adelante) Pues

esta variacioacuten de tamantildeo la conseguiremos gracias a las etiquetas ltbiggt y ltsmallgt

Sus propios nombres en ingleacutes nos indican cuaacuteles seraacuten sus funciones ltbiggt agrandaraacute

el texto y ltsmallgt lo disminuiraacute

Cada vez que escribamos una etiqueta haremos el texto un punto maacutes grande Pero

estas etiquetas tambieacuten la podemos combinar por lo que si escribimos dos veces la

etiqueta ltbiggt haremos crecer la palabra dos puntos

Un ejemplo seriacutea el siguiente

Esta palabra se va a escribir ltsmallgtpequentildeitaltsmallgt esta se va a

escribir ltbiggtmaacutes grandeltbiggt y eacutesta ltbiggtltbiggtmaacutes grande

auacutenltbiggtltbiggt

Esta palabra se va a escribir pequentildeita esta se va a escribir maacutes

grande y eacutesta maacutes grande auacuten

Superiacutendices y subiacutendices

Mediante el Html tambieacuten podemos escribir foacutermulas matemaacuteticas Gracias a las

etiquetas siguientes podraacutes escribir subiacutendices y superiacutendices faacutecilmente La etiqueta

ltsubgt te serviraacute para escribir un subiacutendice y ltsupgt seraacute tu etiqueta para un superiacutendice

Asiacute nos queda un ejemplo como el siguiente

Gracias a estas etiquetas podemos escribir cualquier foacutermula

matemaacutetica como esta H ltsubgt2ltsubgt O o nuacutemeros elevados a

potencias 7ltsupgt3ltsupgt

Gracias a estas etiquetas podemos escribir cualquier formula

matemaacutetica como esta H 2 O o nuacutemeros elevados a potencias 73

Texto tachado

Existen tres etiquetas diferentes que nos serviraacuten para conseguir que nuestro texto se

quede tacahado Hablamos de las etiquetas ltstrikegt ltsgt y ltdelgt Ambas nos ofrecen el

mismo resultado Aquiacute tienes la muestra

Si la palabra no me gusta la puedo tachar ltstrikegtasiacuteltstrikegt

ltsgtasiacuteltsgt o ltdelgtasiacuteltdelgt iexclLo mismo me da

Si la palabra no me gusta la puedo tachar asiacute asiacute o iexclLo mismo me

da

Paacuterrafos y saltos de liacutenea

En este tema vamos a tratar y a explicaros los paacuterrafos y los saltos de liacutenea en html

Porque debemos saber que el html los saltos de liacutenea es decir los espacios que

hagamos en el coacutedigo no son interpretados te tal forma

En html para dejar un salto de liacutenea debemos utilizar una serie de etiquetas de coacutedigo

que el navegador interpretaraacute coacutemo tal Esas etiquetas son ltbrgt ltpgt o ltpregt A

continuacioacuten te explicaremos cada una de ellas

Saltos de liacutenea

Ya os hemos comentado anteriormente que en html los saltos de liacutenea escritos en coacutedigo

no son tal una vez el navegador interpreta el coacutedigo Vamos a explicaros esto con un

claro ejemplo

Puedes escribir un texto como este

y el navegador no lo interpretaraacute asiacute

Y se veraacute asiacute

Puedes escribir un texto como este y el navegador no lo interpretaraacute

asiacute

Existen dos etiquetas para indicar que queremos hacer un salto de liacutenea normal Son las

etiquetas ltbrgt y ltbrgt ambas son interpretadas igual por el navegador Esta etiqueta no

hace falta abrirla y cerrarla soacutelo con escribirla el navegador ya la interpreta

Asiacute pues el texto anterior deberiacuteamos escribirlo de la siguiente forma

Puedes escribir un texto como este ltbrgt

y el navegador no lo interpretaraacute asiacute

Paacuterrafos

Para indicarle al navegador que queremos poner ese texto en un paacuterrafo debemos

escribirlo entre las etiquetas ltpgt y su cierre ltpgt

Asiacute el texto quedaraacute dentro de un paacuterrafo separado por un espacio en blanco por encima

y uno por abajo

El texto del paacuterrafo lo puedes alinear utilizando la etiqueta align utilizando los

paraacutemetros ldquocenterrdquo (para alinearlo al centro) ldquorightrdquo (para alinearlo a la derecha)

ldquoleftrdquo (para alinearlo a la izquierda) y ldquojustifyrdquo (para justificar el texto)

Un ejemplo de esta etiqueta con sus respectivos paraacutemetros es el siguiente

ltp align=centergtEste texto se alinearaacute al centroltpgt

ltp align=rightgtEste texto se alinearaacute a la derechaltpgt

ltp align=leftgtEste texto se alinearaacute a la izquierdaltpgt

que se veraacute asiacute

Este texto se alinearaacute al centro

Este texto se alinearaacute a la derecha

Este texto se alinearaacute a la izquierda

La etiqueta ltpregt

La etiqueta ltpregt la puedes utilizar para que el navegador interprete el texto escrito tal

y como estaacute

Como ejemplo es mostraremos este texto

Escribo esta liacutenea asiacute

Dejo dos liacuteneas de separacioacuten

y escribo tres maacutes

Sin poner ninguna etiqueta el navegador responderiacutea asiacute

ldquoEscribo esta liacutenea asiacute Dejo dos liacuteneas de separacioacuten y escribo tres maacutesrdquo

En cambio utilizando la etiqueta ltpregt y cerraacutendola con su correspondiente etiqueta el

texto se veriacutea como queremos

Comentarios

Los comentarios html son textos que van dentro del coacutedigo fuente pero que no son

mostrados por los navegadores Estos comentarios son muy uacutetiles para los editores de la

paacutegina ya que ayudan a una mayor comprensioacuten del coacutedigo

La forma correcta de escribir un comentario html es la siguiente

lt--Esto es un comentario--gt

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo

el html aunque la estructura es praacutecticamente la misma Hay una apertura y un cierre y

todo lo que va dentro de estos dos elementos es el comentario

El coacutedigo de apertura es el siguiente lt-- y el cierre del comentario se escribe asiacute --gt

Mira el coacutedigo del siguiente ejemplo

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porqueltbrgt

lt--este es el primer comentario que hemos escrito--gt

los comentarios no son visibles para el usuario ltbrgt

lt--otro comentario para editores--gt

soacutelo para los editores de la paacutegina

Y comprueba a continuacioacuten como no vamos a poder ver los comentarios escritos Soacutelo

podremos hacerlo a traveacutes del coacutedigo fuente de la paacutegina

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porque

los comentarios no son visibles para el usuario

soacutelo para los editores de la paacutegina

Separadores Etiqueta hr

Separadores en html La etiqueta lthrgt

Para separar un texto de otro o un paacuterrafo de otro podemos utilizar una liacutenea horizontal

de un tamantildeo o un grosor determinado por nosotros Esa franja la escribimos con la

etiqueta lthrgt La contrario que muchas etiquetas html eacutesta no necesita ser cerrada Soacutelo

con escribir la etiqueta anterior ya la escribimos

La etiqueta lthrgt como muchas otras etiquetas puede variar de aspecto dependiendo de

una serie de caracteres o paraacutemetros que podemos predefinir Por ejemplo podemos

definir su grosor mediante el paraacutemetro size Para escribir este paraacutemetro en la etiqueta

escribiremos ldquosize=xrdquo siendo ldquoxrdquo el nuacutemero del grosor de la franja A continuacioacuten te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 2: Guia de  html

La segunda parte es ltbodygtltbodygt Aquiacute va propiamente el contenido de la paacutegina

fotos paacuterrafos formularios etc Por ejemplo siguiendo con el ejemplo de la paacutegina

anterior el siguiente coacutedigo

lthtmlgt

ltheadgt

lttitlegtEsto es el tampiacutetulo de la pampaacuteginalttitlegt

ltheadgt

ltbodygt

Hola mundoltbrgt

ltbgtEsto es negritaltbgtltbrgt

ltigtY esto itampaacutelicaltigtltbrgt

ltbodygt

lthtmlgt

Generaraacute el siguiente resultado

Hola mundo

Esto es negrita Y esto itaacutelica

Observe el tiacutetulo en la parte superior izquierda de la paacutegina Ademaacutes dentro de ltbodygt

ltbodygt distinguimos varias etiquetas

ltbrgt =gt Indica salto de liacutenea En HTML un salto de liacutenea normal (pulsando la tecla

Enter) no produce un salto de liacutenea en el resultado Es necesario escribir ltbrgt (u otra

etiqueta similar)

ltbgtltbgt =gt Indica comienzo y fin de negrita

ltigtltbgt =gt Itaacutelica

Tambieacuten observamos el coacutedigo ampiaacute =gt Esto indica que queremos poner una i

con acento es decir iacute

Es importante mencionar que las etiquetas se pueden escribir indistintamente en

mayuacutesculas o minuacutesculas es decir ltbgtEsto es negritaltbgt y ltBgtEsto es negritaltBgt

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 siacutembolo ) si

no el navegador podriacutea dar resultados inesperados Excepciones a esto son algunas

etiquetas que no lo necesitan como ltbrgt o lthrgt

Etiqueta body

Anteriormente os hemos explicado que todo lo que queramos que se vea en nuestra

paacutegina 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 tambieacuten podemos personalizarla para darle el aspecto que nosotros

deseemos

Esta personalizacioacuten la conseguiremos a traveacutes de una serie de paraacutemetros que a

continuacioacuten te presentaremos Bien pues vamos a empezar

Color de fondo bgcolor

El primer paraacutemetro que debes conocer es el del color de fondo el bgcolor A traveacutes

de este paraacutemetro podremos definir el color de fondo que queramos que tenga nuestra

paacutegina Un ejemplo muy simple es el siguiente Si queremos que nuestra paacutegina quede

con un fondo rojo deberemos escribir

ltbody bgcolor=FF0000gtltbodygt

Imagen de fondo background

Puede que no quieres que tu paacutegina tenga un color soacutelo de fondo sino que quieras que

tu paacutegina tenga una imagen En ese caso deberaacutes indicarlo con la etiqueta background

La etiqueta quedariacutea de la siguiente manera

ltbody background=URLgt ltbodygt

Doacutende leemos URL deberemos escribir la direccioacuten 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 paacutegina la imagen se repetiraacute 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 queacute color queremos que

sea nuestro texto Esto lo definiremos con el paraacutemetro text

Como ejemplo vamos a poner que queremos que nuestro texto sea en negro con lo que

escribiremos lo siguiente

ltbody text= 000000gtltbodygt

Maacutergenes leftmargin topmargin rightmargin y bottommargin

Ya sabemos de queacute color seraacute nuestro fondo y nuestro texto pero tambieacuten podemos

predefinir los maacutergenes de nuestra paacutegina web para que queda mucho mejor Porque no

queremos que nuestro texto se quede muy pegada a los maacutergenes iquestverdad

Para especificar los maacutergenes utilizaremos el paraacutemetro margin con su correspondiente

indicacioacuten delante Asiacute 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 maacutergenes sean de 10 piacutexeles por todas partes escribiremos lo

siguiente

ltbody leftmargin=10px topmargin=10px rightmargin=10px

bottommargin=10pxgtltbodygt

Color de links link alink y vlink

En body tambieacuten podemos ( y de hecho debemos hacerlo) definir el color de los

viacutenculos de nuestra paacuteginas definir el color con el que se mostraran los links Aquiacute

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)

Asiacute pues si queremos que nuestra paacutegina tenga un color de enlaces (de links) de color

rojo y que esos enlaces sean rojos cuando esteacuten activos y se queden en azul cuando

esteacuten inactivos deberemos escribir lo siguiente

ltbody link= FF0000 alink= FF0000 vlink= 0000FFgtltbodygt

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 pequentildeo texto introductorio como se poniacutea la

negrita y la itaacutelica Pero eso era solamente introductorio A continuacioacuten lo vamos a

explicar de una forma maacutes 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 abririacutea ltbgt y se cerrariacutea ltbgt

Se pueden combinar diferentes formatos o sea diferentes etiquetas Por ejemplo si

queremos que un texto esteacute en negrita y en cursiva escribiriacuteamos esto

ltbgtltigtEste texto estaacute escrito en negrita y en cursivaltigtltbgtCuando combines ten

cuidado a la hora de cerrar las etiquetas Debes cerrar las etiquetas por orden de la maacutes

interior a la maacutes exterior Por uacuteltimo recordad que podeacuteis escribir las etiquetas en

minuacutesculas o en mayuacutesculas

Vamos con los diferentes formateos html que podemos encontrar

Negrita

Existen dos etiquetas que haraacuten que nuestro texto se convierta en negrita La utilizacioacuten

de cualquiera de ellas es indiferente Puedes usar la que prefieras

La primera es la etiqueta ltbgt y la otra es la etiqueta ltstronggt Aquiacute va un ejemplo

Este palabra la vamos a poner en ltbgtnegritaltbgt y esta otra

ltstronggttambieacutenltstronggt

Este palabra la vamos a poner en negrita y esta otra tambieacuten

Cursiva

Para escribir un texto en cursiva debemos utilizar la etiqueta ltigt (y por supuesto

cerrarla con la etiqueta ltigt)

Tambieacuten podemos utilizar la etiqueta ltemgt Como en el caso de la negrita es

indiferente el uso de una u otra Aquiacute os dejo un ejemplo

Este palabra la vamos a poner en ltigtcursivaltigt y esta otra

ltemgttambieacutenltemgt

Este palabra la vamos a poner en cursiva y esta otra tambieacuten

Subrayado

Si queremos que la palabra o el texto quede subrayado deberemos rodearlo con la

etiqueta ltugt y cerrarlo con su correspondiente etiqueta O sea ltugt Asiacute subrayariacuteamos

una frase importante

ltugtAsiacute subrayariacuteamos una frase importanteltugt

Asiacute subrayariacuteamos una frase importante

Texto con espaciado simple o TT

TT son las iniciales de ldquoteletyperdquo Utilizando esta etiqueta conseguiremos un espaciado

simple entre las diferentes letras del texto Abriremos la etiqueta con ltttgt y la

cerraremos con ltttgt

ltttgtEsta frase la vamos a escribir de forma espaciada ltttgt

Esta frase la vamos a escribir de forma espaciada

Palabras maacutes grandes o maacutes pequentildeas

Puede que en una frase queramos destacar un palabra por medio de una variacioacuten de

tamantildeo sin necesidad de utilizar los encabezados(los explicaremos maacutes adelante) Pues

esta variacioacuten de tamantildeo la conseguiremos gracias a las etiquetas ltbiggt y ltsmallgt

Sus propios nombres en ingleacutes nos indican cuaacuteles seraacuten sus funciones ltbiggt agrandaraacute

el texto y ltsmallgt lo disminuiraacute

Cada vez que escribamos una etiqueta haremos el texto un punto maacutes grande Pero

estas etiquetas tambieacuten la podemos combinar por lo que si escribimos dos veces la

etiqueta ltbiggt haremos crecer la palabra dos puntos

Un ejemplo seriacutea el siguiente

Esta palabra se va a escribir ltsmallgtpequentildeitaltsmallgt esta se va a

escribir ltbiggtmaacutes grandeltbiggt y eacutesta ltbiggtltbiggtmaacutes grande

auacutenltbiggtltbiggt

Esta palabra se va a escribir pequentildeita esta se va a escribir maacutes

grande y eacutesta maacutes grande auacuten

Superiacutendices y subiacutendices

Mediante el Html tambieacuten podemos escribir foacutermulas matemaacuteticas Gracias a las

etiquetas siguientes podraacutes escribir subiacutendices y superiacutendices faacutecilmente La etiqueta

ltsubgt te serviraacute para escribir un subiacutendice y ltsupgt seraacute tu etiqueta para un superiacutendice

Asiacute nos queda un ejemplo como el siguiente

Gracias a estas etiquetas podemos escribir cualquier foacutermula

matemaacutetica como esta H ltsubgt2ltsubgt O o nuacutemeros elevados a

potencias 7ltsupgt3ltsupgt

Gracias a estas etiquetas podemos escribir cualquier formula

matemaacutetica como esta H 2 O o nuacutemeros elevados a potencias 73

Texto tachado

Existen tres etiquetas diferentes que nos serviraacuten para conseguir que nuestro texto se

quede tacahado Hablamos de las etiquetas ltstrikegt ltsgt y ltdelgt Ambas nos ofrecen el

mismo resultado Aquiacute tienes la muestra

Si la palabra no me gusta la puedo tachar ltstrikegtasiacuteltstrikegt

ltsgtasiacuteltsgt o ltdelgtasiacuteltdelgt iexclLo mismo me da

Si la palabra no me gusta la puedo tachar asiacute asiacute o iexclLo mismo me

da

Paacuterrafos y saltos de liacutenea

En este tema vamos a tratar y a explicaros los paacuterrafos y los saltos de liacutenea en html

Porque debemos saber que el html los saltos de liacutenea es decir los espacios que

hagamos en el coacutedigo no son interpretados te tal forma

En html para dejar un salto de liacutenea debemos utilizar una serie de etiquetas de coacutedigo

que el navegador interpretaraacute coacutemo tal Esas etiquetas son ltbrgt ltpgt o ltpregt A

continuacioacuten te explicaremos cada una de ellas

Saltos de liacutenea

Ya os hemos comentado anteriormente que en html los saltos de liacutenea escritos en coacutedigo

no son tal una vez el navegador interpreta el coacutedigo Vamos a explicaros esto con un

claro ejemplo

Puedes escribir un texto como este

y el navegador no lo interpretaraacute asiacute

Y se veraacute asiacute

Puedes escribir un texto como este y el navegador no lo interpretaraacute

asiacute

Existen dos etiquetas para indicar que queremos hacer un salto de liacutenea normal Son las

etiquetas ltbrgt y ltbrgt ambas son interpretadas igual por el navegador Esta etiqueta no

hace falta abrirla y cerrarla soacutelo con escribirla el navegador ya la interpreta

Asiacute pues el texto anterior deberiacuteamos escribirlo de la siguiente forma

Puedes escribir un texto como este ltbrgt

y el navegador no lo interpretaraacute asiacute

Paacuterrafos

Para indicarle al navegador que queremos poner ese texto en un paacuterrafo debemos

escribirlo entre las etiquetas ltpgt y su cierre ltpgt

Asiacute el texto quedaraacute dentro de un paacuterrafo separado por un espacio en blanco por encima

y uno por abajo

El texto del paacuterrafo lo puedes alinear utilizando la etiqueta align utilizando los

paraacutemetros ldquocenterrdquo (para alinearlo al centro) ldquorightrdquo (para alinearlo a la derecha)

ldquoleftrdquo (para alinearlo a la izquierda) y ldquojustifyrdquo (para justificar el texto)

Un ejemplo de esta etiqueta con sus respectivos paraacutemetros es el siguiente

ltp align=centergtEste texto se alinearaacute al centroltpgt

ltp align=rightgtEste texto se alinearaacute a la derechaltpgt

ltp align=leftgtEste texto se alinearaacute a la izquierdaltpgt

que se veraacute asiacute

Este texto se alinearaacute al centro

Este texto se alinearaacute a la derecha

Este texto se alinearaacute a la izquierda

La etiqueta ltpregt

La etiqueta ltpregt la puedes utilizar para que el navegador interprete el texto escrito tal

y como estaacute

Como ejemplo es mostraremos este texto

Escribo esta liacutenea asiacute

Dejo dos liacuteneas de separacioacuten

y escribo tres maacutes

Sin poner ninguna etiqueta el navegador responderiacutea asiacute

ldquoEscribo esta liacutenea asiacute Dejo dos liacuteneas de separacioacuten y escribo tres maacutesrdquo

En cambio utilizando la etiqueta ltpregt y cerraacutendola con su correspondiente etiqueta el

texto se veriacutea como queremos

Comentarios

Los comentarios html son textos que van dentro del coacutedigo fuente pero que no son

mostrados por los navegadores Estos comentarios son muy uacutetiles para los editores de la

paacutegina ya que ayudan a una mayor comprensioacuten del coacutedigo

La forma correcta de escribir un comentario html es la siguiente

lt--Esto es un comentario--gt

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo

el html aunque la estructura es praacutecticamente la misma Hay una apertura y un cierre y

todo lo que va dentro de estos dos elementos es el comentario

El coacutedigo de apertura es el siguiente lt-- y el cierre del comentario se escribe asiacute --gt

Mira el coacutedigo del siguiente ejemplo

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porqueltbrgt

lt--este es el primer comentario que hemos escrito--gt

los comentarios no son visibles para el usuario ltbrgt

lt--otro comentario para editores--gt

soacutelo para los editores de la paacutegina

Y comprueba a continuacioacuten como no vamos a poder ver los comentarios escritos Soacutelo

podremos hacerlo a traveacutes del coacutedigo fuente de la paacutegina

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porque

los comentarios no son visibles para el usuario

soacutelo para los editores de la paacutegina

Separadores Etiqueta hr

Separadores en html La etiqueta lthrgt

Para separar un texto de otro o un paacuterrafo de otro podemos utilizar una liacutenea horizontal

de un tamantildeo o un grosor determinado por nosotros Esa franja la escribimos con la

etiqueta lthrgt La contrario que muchas etiquetas html eacutesta no necesita ser cerrada Soacutelo

con escribir la etiqueta anterior ya la escribimos

La etiqueta lthrgt como muchas otras etiquetas puede variar de aspecto dependiendo de

una serie de caracteres o paraacutemetros que podemos predefinir Por ejemplo podemos

definir su grosor mediante el paraacutemetro size Para escribir este paraacutemetro en la etiqueta

escribiremos ldquosize=xrdquo siendo ldquoxrdquo el nuacutemero del grosor de la franja A continuacioacuten te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 3: Guia de  html

Color de fondo bgcolor

El primer paraacutemetro que debes conocer es el del color de fondo el bgcolor A traveacutes

de este paraacutemetro podremos definir el color de fondo que queramos que tenga nuestra

paacutegina Un ejemplo muy simple es el siguiente Si queremos que nuestra paacutegina quede

con un fondo rojo deberemos escribir

ltbody bgcolor=FF0000gtltbodygt

Imagen de fondo background

Puede que no quieres que tu paacutegina tenga un color soacutelo de fondo sino que quieras que

tu paacutegina tenga una imagen En ese caso deberaacutes indicarlo con la etiqueta background

La etiqueta quedariacutea de la siguiente manera

ltbody background=URLgt ltbodygt

Doacutende leemos URL deberemos escribir la direccioacuten 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 paacutegina la imagen se repetiraacute 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 queacute color queremos que

sea nuestro texto Esto lo definiremos con el paraacutemetro text

Como ejemplo vamos a poner que queremos que nuestro texto sea en negro con lo que

escribiremos lo siguiente

ltbody text= 000000gtltbodygt

Maacutergenes leftmargin topmargin rightmargin y bottommargin

Ya sabemos de queacute color seraacute nuestro fondo y nuestro texto pero tambieacuten podemos

predefinir los maacutergenes de nuestra paacutegina web para que queda mucho mejor Porque no

queremos que nuestro texto se quede muy pegada a los maacutergenes iquestverdad

Para especificar los maacutergenes utilizaremos el paraacutemetro margin con su correspondiente

indicacioacuten delante Asiacute 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 maacutergenes sean de 10 piacutexeles por todas partes escribiremos lo

siguiente

ltbody leftmargin=10px topmargin=10px rightmargin=10px

bottommargin=10pxgtltbodygt

Color de links link alink y vlink

En body tambieacuten podemos ( y de hecho debemos hacerlo) definir el color de los

viacutenculos de nuestra paacuteginas definir el color con el que se mostraran los links Aquiacute

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)

Asiacute pues si queremos que nuestra paacutegina tenga un color de enlaces (de links) de color

rojo y que esos enlaces sean rojos cuando esteacuten activos y se queden en azul cuando

esteacuten inactivos deberemos escribir lo siguiente

ltbody link= FF0000 alink= FF0000 vlink= 0000FFgtltbodygt

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 pequentildeo texto introductorio como se poniacutea la

negrita y la itaacutelica Pero eso era solamente introductorio A continuacioacuten lo vamos a

explicar de una forma maacutes 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 abririacutea ltbgt y se cerrariacutea ltbgt

Se pueden combinar diferentes formatos o sea diferentes etiquetas Por ejemplo si

queremos que un texto esteacute en negrita y en cursiva escribiriacuteamos esto

ltbgtltigtEste texto estaacute escrito en negrita y en cursivaltigtltbgtCuando combines ten

cuidado a la hora de cerrar las etiquetas Debes cerrar las etiquetas por orden de la maacutes

interior a la maacutes exterior Por uacuteltimo recordad que podeacuteis escribir las etiquetas en

minuacutesculas o en mayuacutesculas

Vamos con los diferentes formateos html que podemos encontrar

Negrita

Existen dos etiquetas que haraacuten que nuestro texto se convierta en negrita La utilizacioacuten

de cualquiera de ellas es indiferente Puedes usar la que prefieras

La primera es la etiqueta ltbgt y la otra es la etiqueta ltstronggt Aquiacute va un ejemplo

Este palabra la vamos a poner en ltbgtnegritaltbgt y esta otra

ltstronggttambieacutenltstronggt

Este palabra la vamos a poner en negrita y esta otra tambieacuten

Cursiva

Para escribir un texto en cursiva debemos utilizar la etiqueta ltigt (y por supuesto

cerrarla con la etiqueta ltigt)

Tambieacuten podemos utilizar la etiqueta ltemgt Como en el caso de la negrita es

indiferente el uso de una u otra Aquiacute os dejo un ejemplo

Este palabra la vamos a poner en ltigtcursivaltigt y esta otra

ltemgttambieacutenltemgt

Este palabra la vamos a poner en cursiva y esta otra tambieacuten

Subrayado

Si queremos que la palabra o el texto quede subrayado deberemos rodearlo con la

etiqueta ltugt y cerrarlo con su correspondiente etiqueta O sea ltugt Asiacute subrayariacuteamos

una frase importante

ltugtAsiacute subrayariacuteamos una frase importanteltugt

Asiacute subrayariacuteamos una frase importante

Texto con espaciado simple o TT

TT son las iniciales de ldquoteletyperdquo Utilizando esta etiqueta conseguiremos un espaciado

simple entre las diferentes letras del texto Abriremos la etiqueta con ltttgt y la

cerraremos con ltttgt

ltttgtEsta frase la vamos a escribir de forma espaciada ltttgt

Esta frase la vamos a escribir de forma espaciada

Palabras maacutes grandes o maacutes pequentildeas

Puede que en una frase queramos destacar un palabra por medio de una variacioacuten de

tamantildeo sin necesidad de utilizar los encabezados(los explicaremos maacutes adelante) Pues

esta variacioacuten de tamantildeo la conseguiremos gracias a las etiquetas ltbiggt y ltsmallgt

Sus propios nombres en ingleacutes nos indican cuaacuteles seraacuten sus funciones ltbiggt agrandaraacute

el texto y ltsmallgt lo disminuiraacute

Cada vez que escribamos una etiqueta haremos el texto un punto maacutes grande Pero

estas etiquetas tambieacuten la podemos combinar por lo que si escribimos dos veces la

etiqueta ltbiggt haremos crecer la palabra dos puntos

Un ejemplo seriacutea el siguiente

Esta palabra se va a escribir ltsmallgtpequentildeitaltsmallgt esta se va a

escribir ltbiggtmaacutes grandeltbiggt y eacutesta ltbiggtltbiggtmaacutes grande

auacutenltbiggtltbiggt

Esta palabra se va a escribir pequentildeita esta se va a escribir maacutes

grande y eacutesta maacutes grande auacuten

Superiacutendices y subiacutendices

Mediante el Html tambieacuten podemos escribir foacutermulas matemaacuteticas Gracias a las

etiquetas siguientes podraacutes escribir subiacutendices y superiacutendices faacutecilmente La etiqueta

ltsubgt te serviraacute para escribir un subiacutendice y ltsupgt seraacute tu etiqueta para un superiacutendice

Asiacute nos queda un ejemplo como el siguiente

Gracias a estas etiquetas podemos escribir cualquier foacutermula

matemaacutetica como esta H ltsubgt2ltsubgt O o nuacutemeros elevados a

potencias 7ltsupgt3ltsupgt

Gracias a estas etiquetas podemos escribir cualquier formula

matemaacutetica como esta H 2 O o nuacutemeros elevados a potencias 73

Texto tachado

Existen tres etiquetas diferentes que nos serviraacuten para conseguir que nuestro texto se

quede tacahado Hablamos de las etiquetas ltstrikegt ltsgt y ltdelgt Ambas nos ofrecen el

mismo resultado Aquiacute tienes la muestra

Si la palabra no me gusta la puedo tachar ltstrikegtasiacuteltstrikegt

ltsgtasiacuteltsgt o ltdelgtasiacuteltdelgt iexclLo mismo me da

Si la palabra no me gusta la puedo tachar asiacute asiacute o iexclLo mismo me

da

Paacuterrafos y saltos de liacutenea

En este tema vamos a tratar y a explicaros los paacuterrafos y los saltos de liacutenea en html

Porque debemos saber que el html los saltos de liacutenea es decir los espacios que

hagamos en el coacutedigo no son interpretados te tal forma

En html para dejar un salto de liacutenea debemos utilizar una serie de etiquetas de coacutedigo

que el navegador interpretaraacute coacutemo tal Esas etiquetas son ltbrgt ltpgt o ltpregt A

continuacioacuten te explicaremos cada una de ellas

Saltos de liacutenea

Ya os hemos comentado anteriormente que en html los saltos de liacutenea escritos en coacutedigo

no son tal una vez el navegador interpreta el coacutedigo Vamos a explicaros esto con un

claro ejemplo

Puedes escribir un texto como este

y el navegador no lo interpretaraacute asiacute

Y se veraacute asiacute

Puedes escribir un texto como este y el navegador no lo interpretaraacute

asiacute

Existen dos etiquetas para indicar que queremos hacer un salto de liacutenea normal Son las

etiquetas ltbrgt y ltbrgt ambas son interpretadas igual por el navegador Esta etiqueta no

hace falta abrirla y cerrarla soacutelo con escribirla el navegador ya la interpreta

Asiacute pues el texto anterior deberiacuteamos escribirlo de la siguiente forma

Puedes escribir un texto como este ltbrgt

y el navegador no lo interpretaraacute asiacute

Paacuterrafos

Para indicarle al navegador que queremos poner ese texto en un paacuterrafo debemos

escribirlo entre las etiquetas ltpgt y su cierre ltpgt

Asiacute el texto quedaraacute dentro de un paacuterrafo separado por un espacio en blanco por encima

y uno por abajo

El texto del paacuterrafo lo puedes alinear utilizando la etiqueta align utilizando los

paraacutemetros ldquocenterrdquo (para alinearlo al centro) ldquorightrdquo (para alinearlo a la derecha)

ldquoleftrdquo (para alinearlo a la izquierda) y ldquojustifyrdquo (para justificar el texto)

Un ejemplo de esta etiqueta con sus respectivos paraacutemetros es el siguiente

ltp align=centergtEste texto se alinearaacute al centroltpgt

ltp align=rightgtEste texto se alinearaacute a la derechaltpgt

ltp align=leftgtEste texto se alinearaacute a la izquierdaltpgt

que se veraacute asiacute

Este texto se alinearaacute al centro

Este texto se alinearaacute a la derecha

Este texto se alinearaacute a la izquierda

La etiqueta ltpregt

La etiqueta ltpregt la puedes utilizar para que el navegador interprete el texto escrito tal

y como estaacute

Como ejemplo es mostraremos este texto

Escribo esta liacutenea asiacute

Dejo dos liacuteneas de separacioacuten

y escribo tres maacutes

Sin poner ninguna etiqueta el navegador responderiacutea asiacute

ldquoEscribo esta liacutenea asiacute Dejo dos liacuteneas de separacioacuten y escribo tres maacutesrdquo

En cambio utilizando la etiqueta ltpregt y cerraacutendola con su correspondiente etiqueta el

texto se veriacutea como queremos

Comentarios

Los comentarios html son textos que van dentro del coacutedigo fuente pero que no son

mostrados por los navegadores Estos comentarios son muy uacutetiles para los editores de la

paacutegina ya que ayudan a una mayor comprensioacuten del coacutedigo

La forma correcta de escribir un comentario html es la siguiente

lt--Esto es un comentario--gt

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo

el html aunque la estructura es praacutecticamente la misma Hay una apertura y un cierre y

todo lo que va dentro de estos dos elementos es el comentario

El coacutedigo de apertura es el siguiente lt-- y el cierre del comentario se escribe asiacute --gt

Mira el coacutedigo del siguiente ejemplo

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porqueltbrgt

lt--este es el primer comentario que hemos escrito--gt

los comentarios no son visibles para el usuario ltbrgt

lt--otro comentario para editores--gt

soacutelo para los editores de la paacutegina

Y comprueba a continuacioacuten como no vamos a poder ver los comentarios escritos Soacutelo

podremos hacerlo a traveacutes del coacutedigo fuente de la paacutegina

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porque

los comentarios no son visibles para el usuario

soacutelo para los editores de la paacutegina

Separadores Etiqueta hr

Separadores en html La etiqueta lthrgt

Para separar un texto de otro o un paacuterrafo de otro podemos utilizar una liacutenea horizontal

de un tamantildeo o un grosor determinado por nosotros Esa franja la escribimos con la

etiqueta lthrgt La contrario que muchas etiquetas html eacutesta no necesita ser cerrada Soacutelo

con escribir la etiqueta anterior ya la escribimos

La etiqueta lthrgt como muchas otras etiquetas puede variar de aspecto dependiendo de

una serie de caracteres o paraacutemetros que podemos predefinir Por ejemplo podemos

definir su grosor mediante el paraacutemetro size Para escribir este paraacutemetro en la etiqueta

escribiremos ldquosize=xrdquo siendo ldquoxrdquo el nuacutemero del grosor de la franja A continuacioacuten te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 4: Guia de  html

ltbody leftmargin=10px topmargin=10px rightmargin=10px

bottommargin=10pxgtltbodygt

Color de links link alink y vlink

En body tambieacuten podemos ( y de hecho debemos hacerlo) definir el color de los

viacutenculos de nuestra paacuteginas definir el color con el que se mostraran los links Aquiacute

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)

Asiacute pues si queremos que nuestra paacutegina tenga un color de enlaces (de links) de color

rojo y que esos enlaces sean rojos cuando esteacuten activos y se queden en azul cuando

esteacuten inactivos deberemos escribir lo siguiente

ltbody link= FF0000 alink= FF0000 vlink= 0000FFgtltbodygt

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 pequentildeo texto introductorio como se poniacutea la

negrita y la itaacutelica Pero eso era solamente introductorio A continuacioacuten lo vamos a

explicar de una forma maacutes 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 abririacutea ltbgt y se cerrariacutea ltbgt

Se pueden combinar diferentes formatos o sea diferentes etiquetas Por ejemplo si

queremos que un texto esteacute en negrita y en cursiva escribiriacuteamos esto

ltbgtltigtEste texto estaacute escrito en negrita y en cursivaltigtltbgtCuando combines ten

cuidado a la hora de cerrar las etiquetas Debes cerrar las etiquetas por orden de la maacutes

interior a la maacutes exterior Por uacuteltimo recordad que podeacuteis escribir las etiquetas en

minuacutesculas o en mayuacutesculas

Vamos con los diferentes formateos html que podemos encontrar

Negrita

Existen dos etiquetas que haraacuten que nuestro texto se convierta en negrita La utilizacioacuten

de cualquiera de ellas es indiferente Puedes usar la que prefieras

La primera es la etiqueta ltbgt y la otra es la etiqueta ltstronggt Aquiacute va un ejemplo

Este palabra la vamos a poner en ltbgtnegritaltbgt y esta otra

ltstronggttambieacutenltstronggt

Este palabra la vamos a poner en negrita y esta otra tambieacuten

Cursiva

Para escribir un texto en cursiva debemos utilizar la etiqueta ltigt (y por supuesto

cerrarla con la etiqueta ltigt)

Tambieacuten podemos utilizar la etiqueta ltemgt Como en el caso de la negrita es

indiferente el uso de una u otra Aquiacute os dejo un ejemplo

Este palabra la vamos a poner en ltigtcursivaltigt y esta otra

ltemgttambieacutenltemgt

Este palabra la vamos a poner en cursiva y esta otra tambieacuten

Subrayado

Si queremos que la palabra o el texto quede subrayado deberemos rodearlo con la

etiqueta ltugt y cerrarlo con su correspondiente etiqueta O sea ltugt Asiacute subrayariacuteamos

una frase importante

ltugtAsiacute subrayariacuteamos una frase importanteltugt

Asiacute subrayariacuteamos una frase importante

Texto con espaciado simple o TT

TT son las iniciales de ldquoteletyperdquo Utilizando esta etiqueta conseguiremos un espaciado

simple entre las diferentes letras del texto Abriremos la etiqueta con ltttgt y la

cerraremos con ltttgt

ltttgtEsta frase la vamos a escribir de forma espaciada ltttgt

Esta frase la vamos a escribir de forma espaciada

Palabras maacutes grandes o maacutes pequentildeas

Puede que en una frase queramos destacar un palabra por medio de una variacioacuten de

tamantildeo sin necesidad de utilizar los encabezados(los explicaremos maacutes adelante) Pues

esta variacioacuten de tamantildeo la conseguiremos gracias a las etiquetas ltbiggt y ltsmallgt

Sus propios nombres en ingleacutes nos indican cuaacuteles seraacuten sus funciones ltbiggt agrandaraacute

el texto y ltsmallgt lo disminuiraacute

Cada vez que escribamos una etiqueta haremos el texto un punto maacutes grande Pero

estas etiquetas tambieacuten la podemos combinar por lo que si escribimos dos veces la

etiqueta ltbiggt haremos crecer la palabra dos puntos

Un ejemplo seriacutea el siguiente

Esta palabra se va a escribir ltsmallgtpequentildeitaltsmallgt esta se va a

escribir ltbiggtmaacutes grandeltbiggt y eacutesta ltbiggtltbiggtmaacutes grande

auacutenltbiggtltbiggt

Esta palabra se va a escribir pequentildeita esta se va a escribir maacutes

grande y eacutesta maacutes grande auacuten

Superiacutendices y subiacutendices

Mediante el Html tambieacuten podemos escribir foacutermulas matemaacuteticas Gracias a las

etiquetas siguientes podraacutes escribir subiacutendices y superiacutendices faacutecilmente La etiqueta

ltsubgt te serviraacute para escribir un subiacutendice y ltsupgt seraacute tu etiqueta para un superiacutendice

Asiacute nos queda un ejemplo como el siguiente

Gracias a estas etiquetas podemos escribir cualquier foacutermula

matemaacutetica como esta H ltsubgt2ltsubgt O o nuacutemeros elevados a

potencias 7ltsupgt3ltsupgt

Gracias a estas etiquetas podemos escribir cualquier formula

matemaacutetica como esta H 2 O o nuacutemeros elevados a potencias 73

Texto tachado

Existen tres etiquetas diferentes que nos serviraacuten para conseguir que nuestro texto se

quede tacahado Hablamos de las etiquetas ltstrikegt ltsgt y ltdelgt Ambas nos ofrecen el

mismo resultado Aquiacute tienes la muestra

Si la palabra no me gusta la puedo tachar ltstrikegtasiacuteltstrikegt

ltsgtasiacuteltsgt o ltdelgtasiacuteltdelgt iexclLo mismo me da

Si la palabra no me gusta la puedo tachar asiacute asiacute o iexclLo mismo me

da

Paacuterrafos y saltos de liacutenea

En este tema vamos a tratar y a explicaros los paacuterrafos y los saltos de liacutenea en html

Porque debemos saber que el html los saltos de liacutenea es decir los espacios que

hagamos en el coacutedigo no son interpretados te tal forma

En html para dejar un salto de liacutenea debemos utilizar una serie de etiquetas de coacutedigo

que el navegador interpretaraacute coacutemo tal Esas etiquetas son ltbrgt ltpgt o ltpregt A

continuacioacuten te explicaremos cada una de ellas

Saltos de liacutenea

Ya os hemos comentado anteriormente que en html los saltos de liacutenea escritos en coacutedigo

no son tal una vez el navegador interpreta el coacutedigo Vamos a explicaros esto con un

claro ejemplo

Puedes escribir un texto como este

y el navegador no lo interpretaraacute asiacute

Y se veraacute asiacute

Puedes escribir un texto como este y el navegador no lo interpretaraacute

asiacute

Existen dos etiquetas para indicar que queremos hacer un salto de liacutenea normal Son las

etiquetas ltbrgt y ltbrgt ambas son interpretadas igual por el navegador Esta etiqueta no

hace falta abrirla y cerrarla soacutelo con escribirla el navegador ya la interpreta

Asiacute pues el texto anterior deberiacuteamos escribirlo de la siguiente forma

Puedes escribir un texto como este ltbrgt

y el navegador no lo interpretaraacute asiacute

Paacuterrafos

Para indicarle al navegador que queremos poner ese texto en un paacuterrafo debemos

escribirlo entre las etiquetas ltpgt y su cierre ltpgt

Asiacute el texto quedaraacute dentro de un paacuterrafo separado por un espacio en blanco por encima

y uno por abajo

El texto del paacuterrafo lo puedes alinear utilizando la etiqueta align utilizando los

paraacutemetros ldquocenterrdquo (para alinearlo al centro) ldquorightrdquo (para alinearlo a la derecha)

ldquoleftrdquo (para alinearlo a la izquierda) y ldquojustifyrdquo (para justificar el texto)

Un ejemplo de esta etiqueta con sus respectivos paraacutemetros es el siguiente

ltp align=centergtEste texto se alinearaacute al centroltpgt

ltp align=rightgtEste texto se alinearaacute a la derechaltpgt

ltp align=leftgtEste texto se alinearaacute a la izquierdaltpgt

que se veraacute asiacute

Este texto se alinearaacute al centro

Este texto se alinearaacute a la derecha

Este texto se alinearaacute a la izquierda

La etiqueta ltpregt

La etiqueta ltpregt la puedes utilizar para que el navegador interprete el texto escrito tal

y como estaacute

Como ejemplo es mostraremos este texto

Escribo esta liacutenea asiacute

Dejo dos liacuteneas de separacioacuten

y escribo tres maacutes

Sin poner ninguna etiqueta el navegador responderiacutea asiacute

ldquoEscribo esta liacutenea asiacute Dejo dos liacuteneas de separacioacuten y escribo tres maacutesrdquo

En cambio utilizando la etiqueta ltpregt y cerraacutendola con su correspondiente etiqueta el

texto se veriacutea como queremos

Comentarios

Los comentarios html son textos que van dentro del coacutedigo fuente pero que no son

mostrados por los navegadores Estos comentarios son muy uacutetiles para los editores de la

paacutegina ya que ayudan a una mayor comprensioacuten del coacutedigo

La forma correcta de escribir un comentario html es la siguiente

lt--Esto es un comentario--gt

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo

el html aunque la estructura es praacutecticamente la misma Hay una apertura y un cierre y

todo lo que va dentro de estos dos elementos es el comentario

El coacutedigo de apertura es el siguiente lt-- y el cierre del comentario se escribe asiacute --gt

Mira el coacutedigo del siguiente ejemplo

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porqueltbrgt

lt--este es el primer comentario que hemos escrito--gt

los comentarios no son visibles para el usuario ltbrgt

lt--otro comentario para editores--gt

soacutelo para los editores de la paacutegina

Y comprueba a continuacioacuten como no vamos a poder ver los comentarios escritos Soacutelo

podremos hacerlo a traveacutes del coacutedigo fuente de la paacutegina

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porque

los comentarios no son visibles para el usuario

soacutelo para los editores de la paacutegina

Separadores Etiqueta hr

Separadores en html La etiqueta lthrgt

Para separar un texto de otro o un paacuterrafo de otro podemos utilizar una liacutenea horizontal

de un tamantildeo o un grosor determinado por nosotros Esa franja la escribimos con la

etiqueta lthrgt La contrario que muchas etiquetas html eacutesta no necesita ser cerrada Soacutelo

con escribir la etiqueta anterior ya la escribimos

La etiqueta lthrgt como muchas otras etiquetas puede variar de aspecto dependiendo de

una serie de caracteres o paraacutemetros que podemos predefinir Por ejemplo podemos

definir su grosor mediante el paraacutemetro size Para escribir este paraacutemetro en la etiqueta

escribiremos ldquosize=xrdquo siendo ldquoxrdquo el nuacutemero del grosor de la franja A continuacioacuten te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 5: Guia de  html

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 pequentildeo texto introductorio como se poniacutea la

negrita y la itaacutelica Pero eso era solamente introductorio A continuacioacuten lo vamos a

explicar de una forma maacutes 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 abririacutea ltbgt y se cerrariacutea ltbgt

Se pueden combinar diferentes formatos o sea diferentes etiquetas Por ejemplo si

queremos que un texto esteacute en negrita y en cursiva escribiriacuteamos esto

ltbgtltigtEste texto estaacute escrito en negrita y en cursivaltigtltbgtCuando combines ten

cuidado a la hora de cerrar las etiquetas Debes cerrar las etiquetas por orden de la maacutes

interior a la maacutes exterior Por uacuteltimo recordad que podeacuteis escribir las etiquetas en

minuacutesculas o en mayuacutesculas

Vamos con los diferentes formateos html que podemos encontrar

Negrita

Existen dos etiquetas que haraacuten que nuestro texto se convierta en negrita La utilizacioacuten

de cualquiera de ellas es indiferente Puedes usar la que prefieras

La primera es la etiqueta ltbgt y la otra es la etiqueta ltstronggt Aquiacute va un ejemplo

Este palabra la vamos a poner en ltbgtnegritaltbgt y esta otra

ltstronggttambieacutenltstronggt

Este palabra la vamos a poner en negrita y esta otra tambieacuten

Cursiva

Para escribir un texto en cursiva debemos utilizar la etiqueta ltigt (y por supuesto

cerrarla con la etiqueta ltigt)

Tambieacuten podemos utilizar la etiqueta ltemgt Como en el caso de la negrita es

indiferente el uso de una u otra Aquiacute os dejo un ejemplo

Este palabra la vamos a poner en ltigtcursivaltigt y esta otra

ltemgttambieacutenltemgt

Este palabra la vamos a poner en cursiva y esta otra tambieacuten

Subrayado

Si queremos que la palabra o el texto quede subrayado deberemos rodearlo con la

etiqueta ltugt y cerrarlo con su correspondiente etiqueta O sea ltugt Asiacute subrayariacuteamos

una frase importante

ltugtAsiacute subrayariacuteamos una frase importanteltugt

Asiacute subrayariacuteamos una frase importante

Texto con espaciado simple o TT

TT son las iniciales de ldquoteletyperdquo Utilizando esta etiqueta conseguiremos un espaciado

simple entre las diferentes letras del texto Abriremos la etiqueta con ltttgt y la

cerraremos con ltttgt

ltttgtEsta frase la vamos a escribir de forma espaciada ltttgt

Esta frase la vamos a escribir de forma espaciada

Palabras maacutes grandes o maacutes pequentildeas

Puede que en una frase queramos destacar un palabra por medio de una variacioacuten de

tamantildeo sin necesidad de utilizar los encabezados(los explicaremos maacutes adelante) Pues

esta variacioacuten de tamantildeo la conseguiremos gracias a las etiquetas ltbiggt y ltsmallgt

Sus propios nombres en ingleacutes nos indican cuaacuteles seraacuten sus funciones ltbiggt agrandaraacute

el texto y ltsmallgt lo disminuiraacute

Cada vez que escribamos una etiqueta haremos el texto un punto maacutes grande Pero

estas etiquetas tambieacuten la podemos combinar por lo que si escribimos dos veces la

etiqueta ltbiggt haremos crecer la palabra dos puntos

Un ejemplo seriacutea el siguiente

Esta palabra se va a escribir ltsmallgtpequentildeitaltsmallgt esta se va a

escribir ltbiggtmaacutes grandeltbiggt y eacutesta ltbiggtltbiggtmaacutes grande

auacutenltbiggtltbiggt

Esta palabra se va a escribir pequentildeita esta se va a escribir maacutes

grande y eacutesta maacutes grande auacuten

Superiacutendices y subiacutendices

Mediante el Html tambieacuten podemos escribir foacutermulas matemaacuteticas Gracias a las

etiquetas siguientes podraacutes escribir subiacutendices y superiacutendices faacutecilmente La etiqueta

ltsubgt te serviraacute para escribir un subiacutendice y ltsupgt seraacute tu etiqueta para un superiacutendice

Asiacute nos queda un ejemplo como el siguiente

Gracias a estas etiquetas podemos escribir cualquier foacutermula

matemaacutetica como esta H ltsubgt2ltsubgt O o nuacutemeros elevados a

potencias 7ltsupgt3ltsupgt

Gracias a estas etiquetas podemos escribir cualquier formula

matemaacutetica como esta H 2 O o nuacutemeros elevados a potencias 73

Texto tachado

Existen tres etiquetas diferentes que nos serviraacuten para conseguir que nuestro texto se

quede tacahado Hablamos de las etiquetas ltstrikegt ltsgt y ltdelgt Ambas nos ofrecen el

mismo resultado Aquiacute tienes la muestra

Si la palabra no me gusta la puedo tachar ltstrikegtasiacuteltstrikegt

ltsgtasiacuteltsgt o ltdelgtasiacuteltdelgt iexclLo mismo me da

Si la palabra no me gusta la puedo tachar asiacute asiacute o iexclLo mismo me

da

Paacuterrafos y saltos de liacutenea

En este tema vamos a tratar y a explicaros los paacuterrafos y los saltos de liacutenea en html

Porque debemos saber que el html los saltos de liacutenea es decir los espacios que

hagamos en el coacutedigo no son interpretados te tal forma

En html para dejar un salto de liacutenea debemos utilizar una serie de etiquetas de coacutedigo

que el navegador interpretaraacute coacutemo tal Esas etiquetas son ltbrgt ltpgt o ltpregt A

continuacioacuten te explicaremos cada una de ellas

Saltos de liacutenea

Ya os hemos comentado anteriormente que en html los saltos de liacutenea escritos en coacutedigo

no son tal una vez el navegador interpreta el coacutedigo Vamos a explicaros esto con un

claro ejemplo

Puedes escribir un texto como este

y el navegador no lo interpretaraacute asiacute

Y se veraacute asiacute

Puedes escribir un texto como este y el navegador no lo interpretaraacute

asiacute

Existen dos etiquetas para indicar que queremos hacer un salto de liacutenea normal Son las

etiquetas ltbrgt y ltbrgt ambas son interpretadas igual por el navegador Esta etiqueta no

hace falta abrirla y cerrarla soacutelo con escribirla el navegador ya la interpreta

Asiacute pues el texto anterior deberiacuteamos escribirlo de la siguiente forma

Puedes escribir un texto como este ltbrgt

y el navegador no lo interpretaraacute asiacute

Paacuterrafos

Para indicarle al navegador que queremos poner ese texto en un paacuterrafo debemos

escribirlo entre las etiquetas ltpgt y su cierre ltpgt

Asiacute el texto quedaraacute dentro de un paacuterrafo separado por un espacio en blanco por encima

y uno por abajo

El texto del paacuterrafo lo puedes alinear utilizando la etiqueta align utilizando los

paraacutemetros ldquocenterrdquo (para alinearlo al centro) ldquorightrdquo (para alinearlo a la derecha)

ldquoleftrdquo (para alinearlo a la izquierda) y ldquojustifyrdquo (para justificar el texto)

Un ejemplo de esta etiqueta con sus respectivos paraacutemetros es el siguiente

ltp align=centergtEste texto se alinearaacute al centroltpgt

ltp align=rightgtEste texto se alinearaacute a la derechaltpgt

ltp align=leftgtEste texto se alinearaacute a la izquierdaltpgt

que se veraacute asiacute

Este texto se alinearaacute al centro

Este texto se alinearaacute a la derecha

Este texto se alinearaacute a la izquierda

La etiqueta ltpregt

La etiqueta ltpregt la puedes utilizar para que el navegador interprete el texto escrito tal

y como estaacute

Como ejemplo es mostraremos este texto

Escribo esta liacutenea asiacute

Dejo dos liacuteneas de separacioacuten

y escribo tres maacutes

Sin poner ninguna etiqueta el navegador responderiacutea asiacute

ldquoEscribo esta liacutenea asiacute Dejo dos liacuteneas de separacioacuten y escribo tres maacutesrdquo

En cambio utilizando la etiqueta ltpregt y cerraacutendola con su correspondiente etiqueta el

texto se veriacutea como queremos

Comentarios

Los comentarios html son textos que van dentro del coacutedigo fuente pero que no son

mostrados por los navegadores Estos comentarios son muy uacutetiles para los editores de la

paacutegina ya que ayudan a una mayor comprensioacuten del coacutedigo

La forma correcta de escribir un comentario html es la siguiente

lt--Esto es un comentario--gt

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo

el html aunque la estructura es praacutecticamente la misma Hay una apertura y un cierre y

todo lo que va dentro de estos dos elementos es el comentario

El coacutedigo de apertura es el siguiente lt-- y el cierre del comentario se escribe asiacute --gt

Mira el coacutedigo del siguiente ejemplo

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porqueltbrgt

lt--este es el primer comentario que hemos escrito--gt

los comentarios no son visibles para el usuario ltbrgt

lt--otro comentario para editores--gt

soacutelo para los editores de la paacutegina

Y comprueba a continuacioacuten como no vamos a poder ver los comentarios escritos Soacutelo

podremos hacerlo a traveacutes del coacutedigo fuente de la paacutegina

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porque

los comentarios no son visibles para el usuario

soacutelo para los editores de la paacutegina

Separadores Etiqueta hr

Separadores en html La etiqueta lthrgt

Para separar un texto de otro o un paacuterrafo de otro podemos utilizar una liacutenea horizontal

de un tamantildeo o un grosor determinado por nosotros Esa franja la escribimos con la

etiqueta lthrgt La contrario que muchas etiquetas html eacutesta no necesita ser cerrada Soacutelo

con escribir la etiqueta anterior ya la escribimos

La etiqueta lthrgt como muchas otras etiquetas puede variar de aspecto dependiendo de

una serie de caracteres o paraacutemetros que podemos predefinir Por ejemplo podemos

definir su grosor mediante el paraacutemetro size Para escribir este paraacutemetro en la etiqueta

escribiremos ldquosize=xrdquo siendo ldquoxrdquo el nuacutemero del grosor de la franja A continuacioacuten te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 6: Guia de  html

ltemgttambieacutenltemgt

Este palabra la vamos a poner en cursiva y esta otra tambieacuten

Subrayado

Si queremos que la palabra o el texto quede subrayado deberemos rodearlo con la

etiqueta ltugt y cerrarlo con su correspondiente etiqueta O sea ltugt Asiacute subrayariacuteamos

una frase importante

ltugtAsiacute subrayariacuteamos una frase importanteltugt

Asiacute subrayariacuteamos una frase importante

Texto con espaciado simple o TT

TT son las iniciales de ldquoteletyperdquo Utilizando esta etiqueta conseguiremos un espaciado

simple entre las diferentes letras del texto Abriremos la etiqueta con ltttgt y la

cerraremos con ltttgt

ltttgtEsta frase la vamos a escribir de forma espaciada ltttgt

Esta frase la vamos a escribir de forma espaciada

Palabras maacutes grandes o maacutes pequentildeas

Puede que en una frase queramos destacar un palabra por medio de una variacioacuten de

tamantildeo sin necesidad de utilizar los encabezados(los explicaremos maacutes adelante) Pues

esta variacioacuten de tamantildeo la conseguiremos gracias a las etiquetas ltbiggt y ltsmallgt

Sus propios nombres en ingleacutes nos indican cuaacuteles seraacuten sus funciones ltbiggt agrandaraacute

el texto y ltsmallgt lo disminuiraacute

Cada vez que escribamos una etiqueta haremos el texto un punto maacutes grande Pero

estas etiquetas tambieacuten la podemos combinar por lo que si escribimos dos veces la

etiqueta ltbiggt haremos crecer la palabra dos puntos

Un ejemplo seriacutea el siguiente

Esta palabra se va a escribir ltsmallgtpequentildeitaltsmallgt esta se va a

escribir ltbiggtmaacutes grandeltbiggt y eacutesta ltbiggtltbiggtmaacutes grande

auacutenltbiggtltbiggt

Esta palabra se va a escribir pequentildeita esta se va a escribir maacutes

grande y eacutesta maacutes grande auacuten

Superiacutendices y subiacutendices

Mediante el Html tambieacuten podemos escribir foacutermulas matemaacuteticas Gracias a las

etiquetas siguientes podraacutes escribir subiacutendices y superiacutendices faacutecilmente La etiqueta

ltsubgt te serviraacute para escribir un subiacutendice y ltsupgt seraacute tu etiqueta para un superiacutendice

Asiacute nos queda un ejemplo como el siguiente

Gracias a estas etiquetas podemos escribir cualquier foacutermula

matemaacutetica como esta H ltsubgt2ltsubgt O o nuacutemeros elevados a

potencias 7ltsupgt3ltsupgt

Gracias a estas etiquetas podemos escribir cualquier formula

matemaacutetica como esta H 2 O o nuacutemeros elevados a potencias 73

Texto tachado

Existen tres etiquetas diferentes que nos serviraacuten para conseguir que nuestro texto se

quede tacahado Hablamos de las etiquetas ltstrikegt ltsgt y ltdelgt Ambas nos ofrecen el

mismo resultado Aquiacute tienes la muestra

Si la palabra no me gusta la puedo tachar ltstrikegtasiacuteltstrikegt

ltsgtasiacuteltsgt o ltdelgtasiacuteltdelgt iexclLo mismo me da

Si la palabra no me gusta la puedo tachar asiacute asiacute o iexclLo mismo me

da

Paacuterrafos y saltos de liacutenea

En este tema vamos a tratar y a explicaros los paacuterrafos y los saltos de liacutenea en html

Porque debemos saber que el html los saltos de liacutenea es decir los espacios que

hagamos en el coacutedigo no son interpretados te tal forma

En html para dejar un salto de liacutenea debemos utilizar una serie de etiquetas de coacutedigo

que el navegador interpretaraacute coacutemo tal Esas etiquetas son ltbrgt ltpgt o ltpregt A

continuacioacuten te explicaremos cada una de ellas

Saltos de liacutenea

Ya os hemos comentado anteriormente que en html los saltos de liacutenea escritos en coacutedigo

no son tal una vez el navegador interpreta el coacutedigo Vamos a explicaros esto con un

claro ejemplo

Puedes escribir un texto como este

y el navegador no lo interpretaraacute asiacute

Y se veraacute asiacute

Puedes escribir un texto como este y el navegador no lo interpretaraacute

asiacute

Existen dos etiquetas para indicar que queremos hacer un salto de liacutenea normal Son las

etiquetas ltbrgt y ltbrgt ambas son interpretadas igual por el navegador Esta etiqueta no

hace falta abrirla y cerrarla soacutelo con escribirla el navegador ya la interpreta

Asiacute pues el texto anterior deberiacuteamos escribirlo de la siguiente forma

Puedes escribir un texto como este ltbrgt

y el navegador no lo interpretaraacute asiacute

Paacuterrafos

Para indicarle al navegador que queremos poner ese texto en un paacuterrafo debemos

escribirlo entre las etiquetas ltpgt y su cierre ltpgt

Asiacute el texto quedaraacute dentro de un paacuterrafo separado por un espacio en blanco por encima

y uno por abajo

El texto del paacuterrafo lo puedes alinear utilizando la etiqueta align utilizando los

paraacutemetros ldquocenterrdquo (para alinearlo al centro) ldquorightrdquo (para alinearlo a la derecha)

ldquoleftrdquo (para alinearlo a la izquierda) y ldquojustifyrdquo (para justificar el texto)

Un ejemplo de esta etiqueta con sus respectivos paraacutemetros es el siguiente

ltp align=centergtEste texto se alinearaacute al centroltpgt

ltp align=rightgtEste texto se alinearaacute a la derechaltpgt

ltp align=leftgtEste texto se alinearaacute a la izquierdaltpgt

que se veraacute asiacute

Este texto se alinearaacute al centro

Este texto se alinearaacute a la derecha

Este texto se alinearaacute a la izquierda

La etiqueta ltpregt

La etiqueta ltpregt la puedes utilizar para que el navegador interprete el texto escrito tal

y como estaacute

Como ejemplo es mostraremos este texto

Escribo esta liacutenea asiacute

Dejo dos liacuteneas de separacioacuten

y escribo tres maacutes

Sin poner ninguna etiqueta el navegador responderiacutea asiacute

ldquoEscribo esta liacutenea asiacute Dejo dos liacuteneas de separacioacuten y escribo tres maacutesrdquo

En cambio utilizando la etiqueta ltpregt y cerraacutendola con su correspondiente etiqueta el

texto se veriacutea como queremos

Comentarios

Los comentarios html son textos que van dentro del coacutedigo fuente pero que no son

mostrados por los navegadores Estos comentarios son muy uacutetiles para los editores de la

paacutegina ya que ayudan a una mayor comprensioacuten del coacutedigo

La forma correcta de escribir un comentario html es la siguiente

lt--Esto es un comentario--gt

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo

el html aunque la estructura es praacutecticamente la misma Hay una apertura y un cierre y

todo lo que va dentro de estos dos elementos es el comentario

El coacutedigo de apertura es el siguiente lt-- y el cierre del comentario se escribe asiacute --gt

Mira el coacutedigo del siguiente ejemplo

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porqueltbrgt

lt--este es el primer comentario que hemos escrito--gt

los comentarios no son visibles para el usuario ltbrgt

lt--otro comentario para editores--gt

soacutelo para los editores de la paacutegina

Y comprueba a continuacioacuten como no vamos a poder ver los comentarios escritos Soacutelo

podremos hacerlo a traveacutes del coacutedigo fuente de la paacutegina

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porque

los comentarios no son visibles para el usuario

soacutelo para los editores de la paacutegina

Separadores Etiqueta hr

Separadores en html La etiqueta lthrgt

Para separar un texto de otro o un paacuterrafo de otro podemos utilizar una liacutenea horizontal

de un tamantildeo o un grosor determinado por nosotros Esa franja la escribimos con la

etiqueta lthrgt La contrario que muchas etiquetas html eacutesta no necesita ser cerrada Soacutelo

con escribir la etiqueta anterior ya la escribimos

La etiqueta lthrgt como muchas otras etiquetas puede variar de aspecto dependiendo de

una serie de caracteres o paraacutemetros que podemos predefinir Por ejemplo podemos

definir su grosor mediante el paraacutemetro size Para escribir este paraacutemetro en la etiqueta

escribiremos ldquosize=xrdquo siendo ldquoxrdquo el nuacutemero del grosor de la franja A continuacioacuten te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 7: Guia de  html

Superiacutendices y subiacutendices

Mediante el Html tambieacuten podemos escribir foacutermulas matemaacuteticas Gracias a las

etiquetas siguientes podraacutes escribir subiacutendices y superiacutendices faacutecilmente La etiqueta

ltsubgt te serviraacute para escribir un subiacutendice y ltsupgt seraacute tu etiqueta para un superiacutendice

Asiacute nos queda un ejemplo como el siguiente

Gracias a estas etiquetas podemos escribir cualquier foacutermula

matemaacutetica como esta H ltsubgt2ltsubgt O o nuacutemeros elevados a

potencias 7ltsupgt3ltsupgt

Gracias a estas etiquetas podemos escribir cualquier formula

matemaacutetica como esta H 2 O o nuacutemeros elevados a potencias 73

Texto tachado

Existen tres etiquetas diferentes que nos serviraacuten para conseguir que nuestro texto se

quede tacahado Hablamos de las etiquetas ltstrikegt ltsgt y ltdelgt Ambas nos ofrecen el

mismo resultado Aquiacute tienes la muestra

Si la palabra no me gusta la puedo tachar ltstrikegtasiacuteltstrikegt

ltsgtasiacuteltsgt o ltdelgtasiacuteltdelgt iexclLo mismo me da

Si la palabra no me gusta la puedo tachar asiacute asiacute o iexclLo mismo me

da

Paacuterrafos y saltos de liacutenea

En este tema vamos a tratar y a explicaros los paacuterrafos y los saltos de liacutenea en html

Porque debemos saber que el html los saltos de liacutenea es decir los espacios que

hagamos en el coacutedigo no son interpretados te tal forma

En html para dejar un salto de liacutenea debemos utilizar una serie de etiquetas de coacutedigo

que el navegador interpretaraacute coacutemo tal Esas etiquetas son ltbrgt ltpgt o ltpregt A

continuacioacuten te explicaremos cada una de ellas

Saltos de liacutenea

Ya os hemos comentado anteriormente que en html los saltos de liacutenea escritos en coacutedigo

no son tal una vez el navegador interpreta el coacutedigo Vamos a explicaros esto con un

claro ejemplo

Puedes escribir un texto como este

y el navegador no lo interpretaraacute asiacute

Y se veraacute asiacute

Puedes escribir un texto como este y el navegador no lo interpretaraacute

asiacute

Existen dos etiquetas para indicar que queremos hacer un salto de liacutenea normal Son las

etiquetas ltbrgt y ltbrgt ambas son interpretadas igual por el navegador Esta etiqueta no

hace falta abrirla y cerrarla soacutelo con escribirla el navegador ya la interpreta

Asiacute pues el texto anterior deberiacuteamos escribirlo de la siguiente forma

Puedes escribir un texto como este ltbrgt

y el navegador no lo interpretaraacute asiacute

Paacuterrafos

Para indicarle al navegador que queremos poner ese texto en un paacuterrafo debemos

escribirlo entre las etiquetas ltpgt y su cierre ltpgt

Asiacute el texto quedaraacute dentro de un paacuterrafo separado por un espacio en blanco por encima

y uno por abajo

El texto del paacuterrafo lo puedes alinear utilizando la etiqueta align utilizando los

paraacutemetros ldquocenterrdquo (para alinearlo al centro) ldquorightrdquo (para alinearlo a la derecha)

ldquoleftrdquo (para alinearlo a la izquierda) y ldquojustifyrdquo (para justificar el texto)

Un ejemplo de esta etiqueta con sus respectivos paraacutemetros es el siguiente

ltp align=centergtEste texto se alinearaacute al centroltpgt

ltp align=rightgtEste texto se alinearaacute a la derechaltpgt

ltp align=leftgtEste texto se alinearaacute a la izquierdaltpgt

que se veraacute asiacute

Este texto se alinearaacute al centro

Este texto se alinearaacute a la derecha

Este texto se alinearaacute a la izquierda

La etiqueta ltpregt

La etiqueta ltpregt la puedes utilizar para que el navegador interprete el texto escrito tal

y como estaacute

Como ejemplo es mostraremos este texto

Escribo esta liacutenea asiacute

Dejo dos liacuteneas de separacioacuten

y escribo tres maacutes

Sin poner ninguna etiqueta el navegador responderiacutea asiacute

ldquoEscribo esta liacutenea asiacute Dejo dos liacuteneas de separacioacuten y escribo tres maacutesrdquo

En cambio utilizando la etiqueta ltpregt y cerraacutendola con su correspondiente etiqueta el

texto se veriacutea como queremos

Comentarios

Los comentarios html son textos que van dentro del coacutedigo fuente pero que no son

mostrados por los navegadores Estos comentarios son muy uacutetiles para los editores de la

paacutegina ya que ayudan a una mayor comprensioacuten del coacutedigo

La forma correcta de escribir un comentario html es la siguiente

lt--Esto es un comentario--gt

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo

el html aunque la estructura es praacutecticamente la misma Hay una apertura y un cierre y

todo lo que va dentro de estos dos elementos es el comentario

El coacutedigo de apertura es el siguiente lt-- y el cierre del comentario se escribe asiacute --gt

Mira el coacutedigo del siguiente ejemplo

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porqueltbrgt

lt--este es el primer comentario que hemos escrito--gt

los comentarios no son visibles para el usuario ltbrgt

lt--otro comentario para editores--gt

soacutelo para los editores de la paacutegina

Y comprueba a continuacioacuten como no vamos a poder ver los comentarios escritos Soacutelo

podremos hacerlo a traveacutes del coacutedigo fuente de la paacutegina

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porque

los comentarios no son visibles para el usuario

soacutelo para los editores de la paacutegina

Separadores Etiqueta hr

Separadores en html La etiqueta lthrgt

Para separar un texto de otro o un paacuterrafo de otro podemos utilizar una liacutenea horizontal

de un tamantildeo o un grosor determinado por nosotros Esa franja la escribimos con la

etiqueta lthrgt La contrario que muchas etiquetas html eacutesta no necesita ser cerrada Soacutelo

con escribir la etiqueta anterior ya la escribimos

La etiqueta lthrgt como muchas otras etiquetas puede variar de aspecto dependiendo de

una serie de caracteres o paraacutemetros que podemos predefinir Por ejemplo podemos

definir su grosor mediante el paraacutemetro size Para escribir este paraacutemetro en la etiqueta

escribiremos ldquosize=xrdquo siendo ldquoxrdquo el nuacutemero del grosor de la franja A continuacioacuten te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 8: Guia de  html

Paacuterrafos y saltos de liacutenea

En este tema vamos a tratar y a explicaros los paacuterrafos y los saltos de liacutenea en html

Porque debemos saber que el html los saltos de liacutenea es decir los espacios que

hagamos en el coacutedigo no son interpretados te tal forma

En html para dejar un salto de liacutenea debemos utilizar una serie de etiquetas de coacutedigo

que el navegador interpretaraacute coacutemo tal Esas etiquetas son ltbrgt ltpgt o ltpregt A

continuacioacuten te explicaremos cada una de ellas

Saltos de liacutenea

Ya os hemos comentado anteriormente que en html los saltos de liacutenea escritos en coacutedigo

no son tal una vez el navegador interpreta el coacutedigo Vamos a explicaros esto con un

claro ejemplo

Puedes escribir un texto como este

y el navegador no lo interpretaraacute asiacute

Y se veraacute asiacute

Puedes escribir un texto como este y el navegador no lo interpretaraacute

asiacute

Existen dos etiquetas para indicar que queremos hacer un salto de liacutenea normal Son las

etiquetas ltbrgt y ltbrgt ambas son interpretadas igual por el navegador Esta etiqueta no

hace falta abrirla y cerrarla soacutelo con escribirla el navegador ya la interpreta

Asiacute pues el texto anterior deberiacuteamos escribirlo de la siguiente forma

Puedes escribir un texto como este ltbrgt

y el navegador no lo interpretaraacute asiacute

Paacuterrafos

Para indicarle al navegador que queremos poner ese texto en un paacuterrafo debemos

escribirlo entre las etiquetas ltpgt y su cierre ltpgt

Asiacute el texto quedaraacute dentro de un paacuterrafo separado por un espacio en blanco por encima

y uno por abajo

El texto del paacuterrafo lo puedes alinear utilizando la etiqueta align utilizando los

paraacutemetros ldquocenterrdquo (para alinearlo al centro) ldquorightrdquo (para alinearlo a la derecha)

ldquoleftrdquo (para alinearlo a la izquierda) y ldquojustifyrdquo (para justificar el texto)

Un ejemplo de esta etiqueta con sus respectivos paraacutemetros es el siguiente

ltp align=centergtEste texto se alinearaacute al centroltpgt

ltp align=rightgtEste texto se alinearaacute a la derechaltpgt

ltp align=leftgtEste texto se alinearaacute a la izquierdaltpgt

que se veraacute asiacute

Este texto se alinearaacute al centro

Este texto se alinearaacute a la derecha

Este texto se alinearaacute a la izquierda

La etiqueta ltpregt

La etiqueta ltpregt la puedes utilizar para que el navegador interprete el texto escrito tal

y como estaacute

Como ejemplo es mostraremos este texto

Escribo esta liacutenea asiacute

Dejo dos liacuteneas de separacioacuten

y escribo tres maacutes

Sin poner ninguna etiqueta el navegador responderiacutea asiacute

ldquoEscribo esta liacutenea asiacute Dejo dos liacuteneas de separacioacuten y escribo tres maacutesrdquo

En cambio utilizando la etiqueta ltpregt y cerraacutendola con su correspondiente etiqueta el

texto se veriacutea como queremos

Comentarios

Los comentarios html son textos que van dentro del coacutedigo fuente pero que no son

mostrados por los navegadores Estos comentarios son muy uacutetiles para los editores de la

paacutegina ya que ayudan a una mayor comprensioacuten del coacutedigo

La forma correcta de escribir un comentario html es la siguiente

lt--Esto es un comentario--gt

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo

el html aunque la estructura es praacutecticamente la misma Hay una apertura y un cierre y

todo lo que va dentro de estos dos elementos es el comentario

El coacutedigo de apertura es el siguiente lt-- y el cierre del comentario se escribe asiacute --gt

Mira el coacutedigo del siguiente ejemplo

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porqueltbrgt

lt--este es el primer comentario que hemos escrito--gt

los comentarios no son visibles para el usuario ltbrgt

lt--otro comentario para editores--gt

soacutelo para los editores de la paacutegina

Y comprueba a continuacioacuten como no vamos a poder ver los comentarios escritos Soacutelo

podremos hacerlo a traveacutes del coacutedigo fuente de la paacutegina

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porque

los comentarios no son visibles para el usuario

soacutelo para los editores de la paacutegina

Separadores Etiqueta hr

Separadores en html La etiqueta lthrgt

Para separar un texto de otro o un paacuterrafo de otro podemos utilizar una liacutenea horizontal

de un tamantildeo o un grosor determinado por nosotros Esa franja la escribimos con la

etiqueta lthrgt La contrario que muchas etiquetas html eacutesta no necesita ser cerrada Soacutelo

con escribir la etiqueta anterior ya la escribimos

La etiqueta lthrgt como muchas otras etiquetas puede variar de aspecto dependiendo de

una serie de caracteres o paraacutemetros que podemos predefinir Por ejemplo podemos

definir su grosor mediante el paraacutemetro size Para escribir este paraacutemetro en la etiqueta

escribiremos ldquosize=xrdquo siendo ldquoxrdquo el nuacutemero del grosor de la franja A continuacioacuten te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 9: Guia de  html

Un ejemplo de esta etiqueta con sus respectivos paraacutemetros es el siguiente

ltp align=centergtEste texto se alinearaacute al centroltpgt

ltp align=rightgtEste texto se alinearaacute a la derechaltpgt

ltp align=leftgtEste texto se alinearaacute a la izquierdaltpgt

que se veraacute asiacute

Este texto se alinearaacute al centro

Este texto se alinearaacute a la derecha

Este texto se alinearaacute a la izquierda

La etiqueta ltpregt

La etiqueta ltpregt la puedes utilizar para que el navegador interprete el texto escrito tal

y como estaacute

Como ejemplo es mostraremos este texto

Escribo esta liacutenea asiacute

Dejo dos liacuteneas de separacioacuten

y escribo tres maacutes

Sin poner ninguna etiqueta el navegador responderiacutea asiacute

ldquoEscribo esta liacutenea asiacute Dejo dos liacuteneas de separacioacuten y escribo tres maacutesrdquo

En cambio utilizando la etiqueta ltpregt y cerraacutendola con su correspondiente etiqueta el

texto se veriacutea como queremos

Comentarios

Los comentarios html son textos que van dentro del coacutedigo fuente pero que no son

mostrados por los navegadores Estos comentarios son muy uacutetiles para los editores de la

paacutegina ya que ayudan a una mayor comprensioacuten del coacutedigo

La forma correcta de escribir un comentario html es la siguiente

lt--Esto es un comentario--gt

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo

el html aunque la estructura es praacutecticamente la misma Hay una apertura y un cierre y

todo lo que va dentro de estos dos elementos es el comentario

El coacutedigo de apertura es el siguiente lt-- y el cierre del comentario se escribe asiacute --gt

Mira el coacutedigo del siguiente ejemplo

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porqueltbrgt

lt--este es el primer comentario que hemos escrito--gt

los comentarios no son visibles para el usuario ltbrgt

lt--otro comentario para editores--gt

soacutelo para los editores de la paacutegina

Y comprueba a continuacioacuten como no vamos a poder ver los comentarios escritos Soacutelo

podremos hacerlo a traveacutes del coacutedigo fuente de la paacutegina

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porque

los comentarios no son visibles para el usuario

soacutelo para los editores de la paacutegina

Separadores Etiqueta hr

Separadores en html La etiqueta lthrgt

Para separar un texto de otro o un paacuterrafo de otro podemos utilizar una liacutenea horizontal

de un tamantildeo o un grosor determinado por nosotros Esa franja la escribimos con la

etiqueta lthrgt La contrario que muchas etiquetas html eacutesta no necesita ser cerrada Soacutelo

con escribir la etiqueta anterior ya la escribimos

La etiqueta lthrgt como muchas otras etiquetas puede variar de aspecto dependiendo de

una serie de caracteres o paraacutemetros que podemos predefinir Por ejemplo podemos

definir su grosor mediante el paraacutemetro size Para escribir este paraacutemetro en la etiqueta

escribiremos ldquosize=xrdquo siendo ldquoxrdquo el nuacutemero del grosor de la franja A continuacioacuten te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 10: Guia de  html

Comentarios

Los comentarios html son textos que van dentro del coacutedigo fuente pero que no son

mostrados por los navegadores Estos comentarios son muy uacutetiles para los editores de la

paacutegina ya que ayudan a una mayor comprensioacuten del coacutedigo

La forma correcta de escribir un comentario html es la siguiente

lt--Esto es un comentario--gt

Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo

el html aunque la estructura es praacutecticamente la misma Hay una apertura y un cierre y

todo lo que va dentro de estos dos elementos es el comentario

El coacutedigo de apertura es el siguiente lt-- y el cierre del comentario se escribe asiacute --gt

Mira el coacutedigo del siguiente ejemplo

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porqueltbrgt

lt--este es el primer comentario que hemos escrito--gt

los comentarios no son visibles para el usuario ltbrgt

lt--otro comentario para editores--gt

soacutelo para los editores de la paacutegina

Y comprueba a continuacioacuten como no vamos a poder ver los comentarios escritos Soacutelo

podremos hacerlo a traveacutes del coacutedigo fuente de la paacutegina

A continuacioacuten vamos a escribir un comentario pero aquiacute no lo

podremos ver porque

los comentarios no son visibles para el usuario

soacutelo para los editores de la paacutegina

Separadores Etiqueta hr

Separadores en html La etiqueta lthrgt

Para separar un texto de otro o un paacuterrafo de otro podemos utilizar una liacutenea horizontal

de un tamantildeo o un grosor determinado por nosotros Esa franja la escribimos con la

etiqueta lthrgt La contrario que muchas etiquetas html eacutesta no necesita ser cerrada Soacutelo

con escribir la etiqueta anterior ya la escribimos

La etiqueta lthrgt como muchas otras etiquetas puede variar de aspecto dependiendo de

una serie de caracteres o paraacutemetros que podemos predefinir Por ejemplo podemos

definir su grosor mediante el paraacutemetro size Para escribir este paraacutemetro en la etiqueta

escribiremos ldquosize=xrdquo siendo ldquoxrdquo el nuacutemero del grosor de la franja A continuacioacuten te

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 11: Guia de  html

vamos a ofrecer dos ejemplos de franjas con diferentes grosores siendo la primera 10 y

la segunda dos La diferencia es abismal

lthr size=20 gt

lthr size=2 gt

Y el resultado seriacutea el siguiente

Otro paraacutemetro que podemos definir es la anchura de la franja mediante el paraacutemetro

width El paraacutemetro seraacute ldquowidth=x rdquo siendo ldquoxrdquo el tanto por cien que queremos que

ocupe nuestra fnarja

En el caso de no escribir nada (como en los ejemplos anteriores) la franja seraacute

predeterminada del 100 Si queremos que ocupe maacutes o menos tendremos que

escribirlo con el paraacutemetro width

A continuacioacuten vamos a escribir una franja de 75 de ancho

lthr width=75gt

Que quedariacutea 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 deberaacutes escribir el

paraacutemetro ldquonoshaderdquo

Tambieacuten 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

soacutelo debemos ponerle la etiqueta lthr color=FF0000gt

Por uacuteltimo puedes hacer que la franja quede alineada a un lado a otro o al centro del

paacuterrafo mediante el paraacutemetro que ya vimos con anterioridad ldquoalignrdquo ldquoalign = centerrdquo

para el centro ldquoalign = rightrdquo para la derecha y ldquoalign = leftrdquo 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

lthr size=3 width= 50 align=centergt

La siguiente va a ser una franja de grosor 2 de ancho 80 sin sombra y alineada a la

derecha

lthr size=2 width=80 noshade=ldquonoshaderdquo align= right gt

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 12: Guia de  html

Encabezados

Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando

el tiacutetulo del artiacuteculo categoriacutea etc Pues bien para escribir encabezados tenemos que

utilizar las etiquetas lthgt

Esta etiqueta viene acompantildeada de un nuacutemero desde el 1 hasta el 6 predefiniendo eacutestos

el tamantildeo del encabezado Asiacute lth1gt seriacutea el encabezado maacutes grande mientras que

lth6gt seriacutea el maacutes pequentildeo

A continuacioacuten vamos a mostraros el coacutedigo de los seis diferentes encabezados

lth1gt Texto muy grandelth1gt

lth2gtTexto grandelth2gt

lth3gtTexto algo maacutes grande de lo normallth3gt

lth4gtTexto normallth4gt

lth5gtTexto pequentildeolth5gt

lth6gtTexto muy pequentildeolth6gt

Si ya habeacuteis visto el ejemplo os dareacuteis cuenta que cada encabezado estaacute separado del

anterior y del siguiente por un salto de liacutenea y que nosotros en el coacutedigo no hemos

escrito nada Podeacuteis deducir pues que los encabezados generan por siacute solos uno salto de

liacutenea

Por uacuteltimo recordaros que la etiqueta lthgt podemos escribirla tanto en mayuacutesculas como

en minuacutesculas Es decir lo mismo dariacutea escribir lth1gt que ltH1gt

Caracteres especiales

Las paacuteginas Web estaacuten abiertas a todo el mundo y a todos los lenguajes Pero no todos

los lenguajes son iguales En espantildeol por ejemplo tenemos algunas letras que son

propias de nuestra lengua y que otras no poseen Por ello una ldquontilderdquo en un navegador de

un ordenador de fuera de Espantildea 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 siacute todos leen el mismo coacutedigo Un ldquontilderdquo escrita

como tal no se veraacute en muchos ordenadores del mundo pero si por el contrario

escribimos ampntilde (caraacutecter html para la ldquontilderdquo) seguro que se muestra correctamente

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 13: Guia de  html

Caracteres especiales baacutesicos

Estos caracteres son esenciales No porque no sean interpretados correctamente por el

navegador sino porque estos siacutembolos mal escritos pueden causar que nuestra web no

funcione correctamente

ampamp amp ampquot

amplt lt ampgt gt

Caracteres especiales

ampIuml Iuml ampIcirc Icirc

ampOuml Ouml ampOcirc Ocirc

ampUuml Uuml ampUcirc Ucirc

amptimes times ampcent cent

ampdivide divide ampeuro euro

amp147 ldquo amp153 trade

amp148 rdquo amp137 permil

ampAtilde Atilde amparing aring

ampNtilde Ntilde ampAring Aring

ampOtilde Otilde ampCcedil Ccedil

ampatilde atilde ampccedil ccedil

ampntilde ntilde ampYacute Yacute

ampotilde otilde ampyacute yacute

ampcedil cedil ampraquo raquo

ampAacute Aacute ampAgrave Agrave

ampEacute Eacute ampEgrave Egrave

ampIacute Iacute ampIgrave Igrave

amp140 Œ amp131 ƒ

amp135 Dagger amp134 dagger

ampauml auml ampacirc acirc

ampeuml euml ampecirc ecirc

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 14: Guia de  html

ampiuml iuml ampicirc icirc

ampouml ouml ampocirc ocirc

ampuuml uuml ampucirc ucirc

ampOacute Oacute ampOgrave Ograve

ampUacute Uacute ampUgrave Ugrave

ampaacute aacute ampagrave agrave

ampeacute eacute ampegrave egrave

ampOslash Oslash ampyuml yuml

amposlash oslash ampTHORN THORN

ampETH ETH ampthorn thorn

ampeth eth ampAElig AElig

ampszlig szlig ampaelig aelig

ampfrac14 frac14 ampnbsp

ampfrac12 frac12 ampiexcl iexcl

ampfrac34 frac34 amppound pound

ampcopy copy ampyen yen

ampreg reg ampsect sect

ampordf ordf ampcurren curren

ampsup2 sup2 ampbrvbar brvbar

ampsup3 sup3 amplaquo laquo

ampsup1 sup1 ampnot not

ampmacr macr ampshy

ampmicro micro ampordm ordm

amppara para ampacute acute

ampmiddot middot ampuml uml

ampdeg deg ampplusmn plusmn

ampEuml Euml ampEcirc Ecirc

ampiacute iacute ampigrave igrave

ampoacute oacute ampograve ograve

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 15: Guia de  html

ampuacute uacute ampugrave ugrave

ampAuml Auml ampAcirc Acirc

ampiquest iquest

Tablas

Una tabla en html viene marcada por las etiquetas lttablegt lttablegt Entre esas dos

etiquetas definiremos la tabla las celdas que queremos las columnas y las

caracteriacutesticas de cada uno de estos paraacutemetros Pero vamos a empezar explicaacutendote la

etiqueta lttablegt

Ya hemos dicho que esta etiqueta nos indica que empieza una tabla perohellip iquestpodemos

predefinir caracteriacutesticas de esa tabla Por supuesto que siacute Una tabla admite muchos

paraacutemetros Nosotros vamos a explicarte los principales

La tabla lttablegt

Como ya ocurre con la etiqueta body a una tabla tambieacuten lo podemos definir el fondo

de la misma Esto lo podemos conseguir con el paraacutemetro bgcolor que nos pondraacute un

color de fondo o background para poner una imagen de fondo Recuerda que si la

imagen es maacutes pequentildea que la tabla eacutesta se repetiraacute tanto a lo ancho como a lo largo

Otro aspecto que podemos definir de la tabla es el borde Esto lo haremos con el

paraacutemetro border Como en todas los paraacutemetros que ya hemos visto escribiremos

border= x siendo la x un nuacutemero Ese nuacutemero indicaraacute el grosor del borde Si no

ponemos borde o lo escribimos 0 la tabla no mostraraacute borde ninguno Por supuesto

tambieacuten podemos darle color al borde escribiendo la etiqueta bordercolor e indicando

el color que queramos para nuestro borde

El paraacutemetro width indircaraacute la anchura de la tabla Esta anchura la podemos poner en

piacutexeles (width= 300) o con porcentaje (width= 100)

Dos paraacutemetros maacutes 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 hipoteacutetico supuesto de querer una tabla que sea ancha al

100 con un borde azul de un piacutexel de grosor y con un cellpadding de 10 y con un

cellspacing de 10 El coacutedigo quedariacutea de la siguiente forma

lttable width=100 border=1 bordercolor=0000FF cellspacing=10

cellpadding=10gtlttablegt

Una vez explicadas las tablas vamos a pasar a explicarte las partes fundamentales de las

mismas

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 16: Guia de  html

Las filas lttrgt

Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas lttrgt con

su correspondiente cierre lttrgt El contenido de las columnas que estaacuten dentro de la fila

lo podemos aliacutenear 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 tambieacuten les podemos definir el color de fondo (bgcolor) y el

color del borde (bordercolor)

Las celdas lttdgt

Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta lttdgt y

su correspondiente cierre lttdgt

Al igual que en las filas en las celdas podemos definir el la alineacioacuten del contenido

que estaacute 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 eacutel Para agrupar celdas utilizariacuteamos el atributo

colspan y para agrupar celdas el atributo rowspan

Por ejemplo para agrupar en una celda 2 columnas tenemos que escribir lttd

colspan=2gtlttdgt Y para agrupar dos filas la indicacioacuten seriacutea la siguiente lttd

rowspan= 2gtlttdgt

Las celdas ltthgt

Las celdas escritas con la etiqueta ltthgt y su correspondiente cierre admiten los mismos

atributos que las etiquetas lttdgt y funcionan de la misma forma salvo que el contenido

que esteacute dentro de una etiqueta ltthgt estaacute considerado como el encabezado de la tabla

por lo que se crearaacute en negrita y centrado sin que nosotros se lo indiquemos

A continuacioacuten hay un ejemplo de una tabla que combina todas las cosas que hemos

ido viendo Escribe el siguiente coacutedigo

lttable width=100 border=1 cellpadding=0 cellspacing=0

bordercolor=000000gt

lttrgt

ltthgtEncabezado 1ltthgt

ltthgtEncabezado 2ltthgt

ltthgtEncabezado 3ltthgt

lttrgt

lttrgt

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 17: Guia de  html

lttd rowspan=2 valign=middle align=leftgtEste texto estaacute alineado al centro

verticalmente y a la izquierda horizontalmentelttdgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd colspan=2gtampnbsplttdgt

lttrgt

lttablegt

nowrap

nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligaraacute al

navegador a no romper esa liacutenea o sea a no hacer ninguacuten salto de liacutenea 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 maacutes larga que el ancho definido de la tabla eacutesta se estiraraacute todo

lo necesario para albergar la frase sin saltos de liacutenea El siguiente coacutedigo nos mostraraacute

como escribir este atributo en la etiqueta de la celda

lttable width=400 border=1 cellpadding=10 cellspacing=0

bordercolor=000000gt

lttrgt

lttd nowrapgtAunque este texto sea mampaacutes ancho que los 400 pampiacutexeles

de la tabla ampeacutesta no puede dividir mediante saltos de lampiacutenea

el contenido de la misma por lo que se estira para albergar toda la fraselttdgt

lttrgt

lttablegt

Etiqueta ldquocaptionrdquo

Esta etiqueta sirve para poder ponerle un tiacutetulo o encabezado a la tabla Puedes poder el

encabezado arriba o abajo doacutende 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

lttable width=50 border=1 align=center cellpadding=0 cellspacing=0

bordercolor=000000gt

ltcaption align=bottomgtEncabezado de la tablaltcaptiongt

lttrgt

lttd align=centergtTablita de ejmplo para la etiqueta captionlttdgt

lttrgt

lttablegt

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 18: Guia de  html

Listas

Listas no ordenadas ltulgt

Las listas no ordenadas van dentro de la etiqueta ltulgt y de su cierre ltulgt Cada punto

que queramos antildeadir a la lista lo haremos dentro de la etiqueta ltligt y su cierre

Si no le indicamos nada a la etiqueta ltligt eacutesta se generaraacute de forma automaacutetica Pero si

queremos definir nosotros mismo el siacutembolo del punto podemos gracias al atributo

ldquotyperdquo

Asiacute podemos hacer que la lista esteacute 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 dependeraacute del navegador Hay algunos navegadores que dan

otras apariencias a estos mismos atributos

Vamos con un pequentildeo ejemplo en coacutedigo

ltulgt

ltli type=circlegtEsto es un tipo de puntoltligt

ltli type=squaregtEste es otroltligt

ltli type=discgtY este es otro diferenteltligt

ltulgt

Cuyo resultado visual seraacute el que veremos a continuacioacuten

o Esto es un tipo de punto

Este es otro

Y este es otro diferente

Listas ordenadas ltolgt

Las listas ordenadas van enmarcadas dentro de las etiquetas ltolgt ltolgt Cada punto de

la lista se escribe con la misma etiqueta que en las no numeradas ltligt Pero al ser listas

ordenadas los siacutembolos seraacuten nuacutemeros y eacutestos se iraacuten generando automaacuteticamente por

orden conforme escribamos nuevos puntos

En las listas ordenadas podemos hacer que el primer punto comience con el nuacutemero que

nosotros queramos Lo conseguiremos gracias al atributo ldquovaluerdquo Los siguientes puntos

que escribamos se generaraacuten automaacuteticamente por orden partiendo de ese nuacutemero

Por ejemplo si queremos que nuestra lista empiece por el nuacutemero 20 soacutelo deberemos

escribir lo siguiente

ltolgt

ltli value=20gtEste seraacute el nuacutemero 20 ltligt

ltligtEste seraacute el 21 ltligt

ltligt Este seraacute el 22 Y asiacute sucesivamente ltligt

ltolgt

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 19: Guia de  html

Y el resultado seraacute el siguiente

20 Este seraacute el nuacutemero 20

21 Este seraacute el 21

22 Este seraacute el 22 Y asiacute sucesivamente

Listas de definiciones ltdlgt ltdtgt y ltddgt

Si lo que vamos a hacer es un listado de definiciones podemos usar las etiquetas ltdlgt

ltdtgt y ltddgt Vamos a explicarlas por partes

La etiqueta ltdlgt viene de los teacuterminos ingleses ldquoDefiniton listrdquo y nos indica que dentro

de ella entre ella y su cierre va a ir una definicioacuten

La etiqueta ltdtgt viene de los teacuterminos ldquoDefinition termrdquo y dentro de ella iraacute el teacutermino

que vamos a definir Para entendernos mejor dentro de ltdtgt iriacutea el tiacutetulo de la

definicioacuten

La etiqueta ltddgt viene de los teacuterminos ldquoDefinition descriptionrdquo y nos dice que dentro

de eacutesta iraacute la definicioacuten

Si escribimos varios listados de definicioacuten eacutestas se separaraacuten automaacuteticamente entre

ellas para facilitar su diferenciacioacuten

Aquiacute podemos ver un ejemplo de coacutedigo de dos listado de definicioacuten

ltdlgt

ltdtgtAquiacute va el teacutermino que definiremosltdtgt

ltddgtY aquiacute dentro iraacute la definicioacuten propiamente dichaltddgt

ltdlgt

ltdlgt

ltdtgtAquiacute va la segunda definicioacutenltdtgt

ltddgtY aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anteriorltddgt

ltdlgt

Cuyo resultado seraacute el siguiente

Aquiacute va el teacutermino que definiremos

Y aquiacute dentro iraacute la definicioacuten propiamente dicha

Aquiacute va la segunda definicioacuten

Y aquiacute dentro iraacute la segunda definicioacuten separada automaacuteticamente de la

anterior

Imaacutegenes

Poner imaacutegenes en nuestra web produce unos resultados asombrosos de una manera

muy faacutecil Vamos a mostrarte como puedes incluir una imagen y los atributos que

puedes darle a la misma

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 20: Guia de  html

El tag baacutesico para colocar una imagen es img Este tag a diferencia de la gran

mayoriacutea de los tags de html no necesita un cierre Va acompantildeado de diferentes

atributos que te vamos a explicar a continuacioacuten

El atributo src es imprescindible para poder colocar una imagen Este atributo es el

que indica doacutende se encuentra alojada la imagen que queremos mostrar Se escribe asiacute

ltimg src=xgt siendo x la direccioacuten o la url doacutende se encuentra situada la foto

La foto podemos alinearla en la paacutegina 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

Tambieacuten podemos poner una descripcioacuten de la imagen dentro de la misma para que la

gente puede leerla al mantener el ratoacuten encima de ella Esta descripcioacuten podemos

escribirla mediante el atributo alt y lo escribiriacuteamos de la siguiente manera alt= x

siendo x la descripcioacuten que le gente leeraacute al pasar el ratoacuten 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 asiacute ayudaremos al navegador a representar la imagen

Y por uacuteltimo tambieacuten queremos mostrarte que le puedes adjudicar un borde a la

fotografiacutea El atributo ya te lo sabes border Despueacutes solo tendraacutes que definir cuaacutel

quieres que sea el grosor del borde

Asiacute las cosas deberemos escribir este coacutedigo

ltimg src=htmlimagenespruebajpg border=1 alt=Este es el ejemplo de un texto

alternativo width=400 height=300gt

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 21: Guia de  html

Mapas de imaacutegenes

suponer ltmapgt es el tag necesario para poder crear un mapa de imaacutegenes en html Por

supuesto posee un cierre ltmapgt

Este tag debe ir acompantildeado del atributo name= ldquoxrdquo para indicar el nombre del mapa

Por tanto si queremos hacer un mapa que se llame ejemplo 1 escribiremos ltmap

name= ldquoejemplo1rdquogt

Atributo area

El mapa de imaacutegenes lleva un aacuterea dentro de la cual podremos pinchar para dirigirnos al

destino que hayamos preestablecido Pero por supuesto esa aacuterea 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 aacuterea Tambieacuten podemos escribirle un texto alternativo un ldquoaltrdquo al aacuterea

Existen tres tipos de aacutereas Vamos a explicaacutertelas a continuacioacuten

Atributo shape

Este atributo nos indicaraacute el tipo de aacuterea que es Como hemos dicho existen tres tipos

rectangular (rect) poligonal (poly) o circular (circle) y cada una de ellas tiene unas

caracteriacutesticas diferentes Vamos a profundizar un poco maacutes en ellas

shape=ldquorectrdquo Este tipo de aacuterea crea un mapa de imagen rectangular Para

definir la zona que incluiraacute ese mapa deberemos definir la esquina superior

izquierda del aacuterea y la esquina inferior derecha

shape=ldquocirclerdquo Este tipo de aacuterea crea un mapa de imagen circular Nosotros

soacutelo debemos indicarle el centro de la circunferencia y el radio del mismo

shape=ldquopolyrdquo Este tipo de aacuterea es la maacutes versaacutetil de todas la que maacutes

posibilidades nos ofrece ya que nos permite crear una zona personalizada Para

crearla debemos indicarle los diferentes puntos del poliacutegono que hagamos y de

una forma ordenada siguiendo el camino que nosotros hemos trazado para

hacerlo

Bien perohellipiquesty coacutemo indicamos las coordenadas Gracias al siguiente atributo

Atributo coords

El atributo coords se escribe de la siguiente forma coords= ldquoxxxxrdquo entendiendo que

cada ldquoxrdquo representa un punto en la imagen Cada coordenada debe ir separada por

comas

Y el doacutende nos dirigiraacute esa aacuterea nos lo indicaraacute el atributo ldquohrefrdquo

Atributo href

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 22: Guia de  html

Aquiacute deberemos indicar el destino del aacuterea

usemap

Hasta ahora te habiacuteamos indicado coacutemo podiacuteas escribir un mapa de imaacutegenes y coacutemo

definir su aacuterea pero no te habiacuteamos dicho coacutemo indicar queacute imagen es la que llevaraacute el

mapa Esta accioacuten se hace gracias al atributo usemap

Este atributo se escribe de la siguiente forma usemap=ldquoxrdquo siendo x el nombre del

mapa de imaacutegenes que queramos utilizar

Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver maacutes abajo

Dentro de estas bolas de billar nosotros hemos hecho un mapa de imaacutegenes con un aacuterea

circular que coincide con la bola amarilla Nuestra ldquohrefrdquo es la paacutegina de inicio de este

tutorial Tambieacuten hemos hecho un aacuterea poligonal en la bola negra del fondo que te

llevaraacute al inicio del tutorial de css y otro aacuterea rectangular en el centro de la imagen que

te redigiraacute al inicio del tutorial de php

El coacutedigo nos ha quedado de la siguiente manera

ltimg src=httphtmlhazunawebcomhtmlimagenesprueba-mapajpg alt=Prueba de

mapa de imaacutegenes width=300 height=214 border=0 usemap=billargt

ltmap name=billargt

ltarea alt=Si cliacutecas aquiacute iraacutes a la paacutegina de inicio del tutorial de html shape=circle

coords=14815444 href=httpwwwhazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de css shape=poly

coords=14859142491354112838121341252513516155111771918827187

3617739168461625216061 href=httpcsshazunawebcomgt

ltarea alt=Si cliacuteas aquiacute iraacutes a la paacutegina de inicio del tutorial de php shape=rect

coords=1177288105 href=httpphphazunawebcomgt

ltmapgt

Enlaces

Los enlaces nos permiten de una manera muy coacutemoda redirigir al usuario a otra parte

cuando eacuteste pinche en dicho enlace Podemos hacer que el usuario se vaya a otra url

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 23: Guia de  html

distinta a la que estaacute o podemos hacer que vaya a otra parte pero dentro del mismo

archivo en el que estaacute dentro de la misma url

Esta explicacioacuten la entenderaacutes maacutes faacutecilmente cuando te presentemos los tipos de

enlaces que hay y veas sus caracteriacutesticas Asiacute pues vamos a ello

La etiqueta ltagt

Es dentro de esta etiqueta y de su cierre (ltagt) doacutende encontraremos el enlace Todo lo

que esteacute dentro de ella ya sea texto o una imagen estaraacute considerado como un enlace y

el navegador lo interpretaraacute asiacute

Atributo href

Para que un enlace esteacute activo debemos indicar dentro de eacutel el destino del mismo Para

establecer este destino le colocamos a la etiqueta ltagt este atributo La etiqueta completa

nos quedariacutea asiacute

lta href=ldquoenlacerdquogtPincha aquiacute para ir al destino del enlaceltagt

Las urls pueden tener dos tipos de rutas o direcciones Las urls con direccioacuten relativa y

las urls con direccioacuten absoluta Vamos a explicarlas a continuacioacuten

Direcciones absolutas y relativas

Las direcciones absolutas son aquellas que contienen la url completa En estas

direcciones podemos ver todos los elementos de la direccioacuten Un ejemplo muy claro es

el siguiente

lta href=httphtmlhazunawebcom112phpgtArtiacuteculo de enlaces htmlltagt

Si pinchaacuteramos en el enlace iriacuteamos directamente al artiacuteculo de mapas de imaacutegenes del

tutorial Fijaros en lo que hablaacutebamos podemos apreciar todas las partes de la url

En las direcciones relativas vemos que no estaacute la url completa En este tipo de

direcciones las partes que faltan de la direccioacuten el navegador las genera de la propia

paacutegina en la que estaacute el enlace Por ejemplo si dentro de la paacutegina

httphtmlhazunawebcom112php encontraacuteramos la siguiente url

lta href=111phpgtArtiacuteculo de enlaces htmlltagt

hellipel navegador entiende que dentro de la paacutegina y de la carpeta en la que se encuntra

debe dirigirse al fichero ldquo111phprdquo

Protocolos

Los enlaces nos pueden llevar a url con diferentes protocolos Nosotros os vamos a

presentar los dos maacutes importantes

http Este es el protocolo baacutesico de los servidores webs

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 24: Guia de  html

https Este protocolo se diferencia del anterior en que es un protocolo cifrado Es

decir la informacioacuten que se enviacutea y se recibe con esa url esta siendo encriptada

para que nadie maacutes pueda interceptar y usar esa informacioacuten Las paacuteginas con

este protocolo son las conocidas como ldquopaacuteginas segurasrdquo Esta encriptacioacuten de

los datos produce una pequentildea ralentizacioacuten de la paacutegina debido a que los datos

se enviacutean cifrados

Mailto

La url mailto es aquella que te lleva directamente a una direccioacuten de correo y maacutes

concretamente a redactar un mensaje Una direccioacuten mailto seriacutea la siguiente

lta

href=ldquomailtocorreodeejemplocorreodeejemplocomgtcorreodeejemplocorreodeejem

plocomltagt

Fiacutejate en el ejemplo que acabamos de poner Nosotros como texto para albergar el

enlace hemos puesto la misma direccioacuten que la que va a abrir la url iquestPor queacute

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

direccioacuten de correo electroacutenico Windows por defecto tiene predeterminado el Outlook

y al pinchar en el enlace lo abre directamente Muchos usuarios prefieren copiar la

direccioacuten y pegarla en su programa de correo

La etiqueta target

La etiqueta sirve para definir la forma en la que se accederaacute 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 paraacutemetro target El enlace se abriraacute en el

mismo marco en el que estaacute alojado

_blank Para hacer que ese enlace se abra en una ventana a parte

_top Elimina todos los marcos existente y muestra la nueva paacutegina en la

ventana original sin marcos

_parent Muestra la nueva paacutegina en el ltframesetgt que contiene al marco

donde se encuentra alojado el enlace La etiqueta ltframesetgt la explicamos en

otro artiacuteculo

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

lta name=ldquoanclardquogt

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 25: Guia de  html

Y despueacutes debemos escribir un enlace con el coacutedigo siguiente

lta href= ldquoanclardquogtEnlace para acceder al anclaltagt

Yo he situado un ancla justo al principio de este artiacuteculo Si pinchas en el siguiente

enlace acudiraacutes a ella y veraacutes el efecto

Ir al principio del artiacuteculo 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 targetblank El coacutedigo es el siguiente

lta href=httphtmlhazunawebcomhtmlimagenespruebajpg target=_blankgtIr

a ver el ejemplo de prueba ltagt

Y terminamos con otro tipo de enlace Esta vez el enlace estaacute en la imagen Si pinchas

en ella iraacutes al artiacuteculo doacutende vimos por primera vez esa fotografiacutea Primero te

mostramos el coacutedigo

lta href=httphtmlhazunawebcom112php target=_blankgtltimg

src=httphtmlhazunawebcomhtmlimagenesprueba-enlacejpg alt=Pincha para ir

al enlace width=300 height=214 border=0gtltagt

Formularios I introduccioacuten

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos

permiten recibir informacioacuten de los usuarios de nuestro site Los formularios html estaacuten

compuestos por campos de texto y botones

Una vez el usuario ha rellenado el formulario e introducido los valores en los campos

eacutestos son enviados para poder procesarlos El enviacuteo de estos datos puede hacerse a un

correo electroacutenico o a un programa que procese toda la informacioacuten y nos ayude a hacer

un seguimiento

Los formularios son un tag maacutes de html y como todos los tags debe ir indicado

mediante una etiqueta La etiqueta de los formularios es ltformgt y su cierre ltformgt

Todo lo que vaya dentro de estas etiquetas seraacuten partes del formulario

La etiqueta ltformgt tiene una serie de atributos baacutesicos que vamos a pasarte a explicar a

continuacioacuten

action

El atributo ldquoactionrdquo indica el tipo de accioacuten que va a realizar el formulario

Anteriormente indicamos que la informacioacuten podiacutea enviarse a un correo electroacutenico o a

un programa que la gestione Es mediante esta etiqueta que se gestionan los formularios

Si queremos que el formulario se enviacutee a un correo la accioacuten quedariacutea escrita de la

siguiente manera ltform action=mailtodirecciondelcorreocorreocomhellipgtltformgt

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 26: Guia de  html

Este tipo de enviacuteos se utilizariacutean para casos de formularios de contacto de sugerencias

etc

Si lo que queremos es que la informacioacuten sea enviada a un programa que la gestione

debemos indicarle en la accioacuten la url del archivo donde se encuentra ubicado el

programa que la gestionaraacute Lo escribiriacuteamos de la siguiente manera ltform

action=direccioacuten completa del archivo que la gestionaraacute gt ltformgt Este tipo de

enviacuteos se utilizariacutean para casos de formularios de encuestas cuestionarios etc

method

Mediante este atributo le indicamos al formulario la forma en la que el formulario seraacute

enviado Existen dos valores posibles get y post

El valor get es el valor por defecto Si no concretamos el method la informacioacuten se

enviaraacute a traveacutes de este medio

ldquogetrdquo indica que los datos enviados se adjuntaraacuten en la barra de direcciones del cliente

al final de la url correspondiente y despueacutes de un signo de interrogacioacuten de cierre Si se

enviacutea maacutes de un dato eacutestos iraacuten separados por el siacutembolo amp

Un ejemplo de un formulario enviado por el method=ldquogetrdquo seriacutea el siguiente

httpwwwnombre1=valor1ampnombre2=valor2

El valor post indica que el meacutetodo de enviacuteo no se haraacute a traveacutes de la url sino formando

parte del cuerpo de la peticioacuten

enctype

Mediante este atributo indicaremos la forma en la que viajaraacute la informacioacuten que se

mande a traveacutes del formulario

La forma puede ser de varios tipos aunque el maacutes comuacuten es que la informacioacuten se enviacutee

como texto plano (enctype=textplain)

Una vez vistos estos tres atributos veremos como quedariacutea el coacutedigo de un formulario

estaacutendar a un correo eleacutectroacutenico

ltform action=mailtodirecciondelcorreocorreocom method=post

enctype=textplaingt ltformgt

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 27: Guia de  html

Formularios II campos de texto

Los campos de entrada de los formularios se definen mediante el tag ltinputgt y sus

diferentes valores Estos valores nos permiten utilizar varios tipos de cajas y de formas

Vamos a ver a continuacioacuten distintos tipos de cajas y veremos como variacutean sus

caracteriacutesticas

Las cajas de texto baacutesicas ltinput type= ldquotextrdquogt

La caja de texto baacutesica se escribiriacutea de la siguiente forma

ltinput type=text name=nombredelacajagt

su apariencia seriacutea la siguiente

Hemos visto como el type= ldquotextrdquo 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 tamantildeo de la caja Es decir la

apariencia de la misma Si el texto que vamos a escribir no cabe en la caja eacuteste se

desplazaraacute pero sin que la caja variacutee su tamantildeo El texto iraacute desapareciendo por la

izquierda

maxlength Este atributo nos sirve para definir la cantidad maacutexima de letras que se

pueden escribir en la caja No se podraacuten escribir en la caja maacutes 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 cuacuteal es el tipo de dato que te piden en ese campo

name para ponerle un nombre al campo Esto resulta muy uacutetil a la hora de gestionar la

informacioacuten que nos llegue

Mira el siguiente coacutedigo

ltinput type=text size=15 maxlength=30 value=Nombre name=nombregt

Aquiacute vemos un tipo de caja ldquotextrdquo con un tamantildeo de 15 y un liacutemite de caracteres de 30

Ademaacutes tiene un texto preescrito en eacutel El resultado seriacutea el siguiente

Nombre

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 28: Guia de  html

Campos de texto largo lttextareagt

Un lttextareagt es como una caja de texto sencilla tipo ldquotextrdquo pero en la que dejamos al

usuario espacio de sobra para poder escribir un texto largo Son uacutetiles para que el

usuario contacte con nosotros plantee sus dudas o sugerencias etc

Su etiqueta es lttextareagt y su correspondiente cierre lttextareagt Todo lo que vaya

dentro de estas etiquetas formaraacute parte del texto

Sus atributos baacutesicos son ldquorowsrdquo y ldquocolsrdquo que serviraacuten para definir el tamantildeo del

textarea Ademaacutes no debemos olvidar el atributo ldquonamerdquo que serviraacute para definir el

nombre de este campo

Un textarea llamado ldquocomentariosrdquo y con unas dimensiones de 10 filas y de 40

columnas tendriacutea el coacutedigo siguiente

lttextarea name=comentarios rows=10 cols=40gtEscribe aquiacute tus

comentarioslttextareagt

Y se veriacutea de la siguiente forma

Escribe aquiacute tus comentarios

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a

su alrededor contrasentildeas etc Para ello debemos crear una caja que no muestre los

datos que se escriben en ella y que los codifique Esto es maacutes sencillo de lo que parece

El siguiente coacutedigo es de un campo con datos codificados

ltinput type=password name=contrasentildeagt

Y este seriacutea 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 opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 29: Guia de  html

Formularios III listas de opciones

Las listas de opciones son de gran ayuda para los formularios en los que queremos saber

la opinioacuten de un aspecto concreto en nuestra Web dentro de diferentes opciones

planteadas previamente por nosotros Las listas de seleccioacuten u opciones se escriben

gracias a la etiqueta ltselectiongt y a su cierre

Vamos a ponerte un ejemplo de la lista de opciones baacutesica la maacutes sencilla Si queremos

preguntar por ejemplo cuaacutel es el medio de transporte favorito de nuestro usuarios el

coacutedigo de la lista de seleccioacuten podriacutea ser el siguiente

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y el resultado quedariacutea de la siguiente manera

Coche

Pero podemos personalizar esta lista de opciones mediante una serie de atributos Por

ejemplo podemos hacer que se vea maacutes de una opcioacuten a la vez en la lista Para ello

utilizaremos ldquosizerdquo indicando el nuacutemero de opciones que queremos que se muestren

En la lista anterior si quisieramos que se vieran dos opciones deberiacuteamos cambiar el

coacutedigo anterior por el siguiente

ltselect name=transporte size=2gt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Para obtener el siguiente resultado

Coche

Avioacuten

Tambieacuten podemos definir si queremos que se pueda elegir maacutes de una opcioacuten a la vez

mediante las teclas ctrl y shift Para ello utilizaremos el atributo multiple Mira primero

coacutemo quedariacutea nuestro coacutedigo

ltselect name=transporte size=2 multiplegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoptiongtTrenltoptiongt

ltselectgt

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 30: Guia de  html

Y aquiacute comprobaraacutes lo que nos permite hacer este atributo

Coche

Avioacuten

Otra cosa que podemos predefinir es que la opcioacuten que aparezca seleccionada al

principio no sea la primera que estaacute en la lista Esto se realiza gracias al atributo

selected y lo tenemos que poner en la opcioacuten que queramos que aparezca como

seleccionada En el coacutedigo siguiente queriacuteamos que apareciera seleccionada la opcioacuten

del tren

ltselect name=transportegt

ltoptiongtCocheltoptiongt

ltoptiongtAvioacutenltoptiongt

ltoption selectedgtTrenltoptiongt

ltselectgt

Y aquiacute puedes ver cual ha sido el resultado

Tren

Por uacuteltimo esta el atributo value Este atributo es muy uacutetil para gestionar los datos sobre

todo si le llega a un programa Con este atributo lo que se le hace es atribuir un nuacutemero

o una letra a cada opcioacuten

El atributo se escribe dentro de cada opcioacuten y se define el valor del mismo Por ejemplo

en la primera lista que te hemos presentado podriacuteamos valorar nuestras opciones de la

siguiente manera

ltselect name=transportegt

ltoption value=1gtCocheltoptiongt

ltoption value=2gtAvioacutenltoptiongt

ltoption value=3gtTrenltoptiongt

ltselectgt

Y en el supuesto de seleccionar por ejemplo la opcioacuten del avioacuten al programa (o al

correo electroacutenico) le llegariacutea el siguiente dato transporte=2 si te fijas transporte es el

nombre de esta lista de opciones

Listas de botones radio

A continuacioacuten vamos a ver otro tipo de listas de opciones o de seleccioacuten Son listas con

botones de tipo radio Estos botones se escriben mediente la etiqueta type=rdquoradiordquo

Vamos a transformar la lista anterior en este tipo de lista Fijaros que a cada opcioacuten le

vamos a atribuir una etiqueta nueva pero todas ellas van a tener el mismo nombre El

coacutedigo nuevo quedariacutea de la siguiente manera

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 31: Guia de  html

ltinput type=radio name=transporte value=2gtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y el cambio de aspecto es evidente Aquiacute lo teneacuteis

Coche

Avioacuten

Tren

Por defecto no saldraacute ninguna opcioacuten activada Pero si queremos activar alguna de ellas

podemos hacerlo mediante el atributo checked Por ejemplo en el coacutedigo siguiente la

lista de opciones tiene activada la opcioacuten avioacuten

ltinput type=radio name=transporte value=1gtCoche

ltbrgt

ltinput type=radio name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=radio name=transporte value=3gtTren

Y observa el resultado que obtenemoshellip

Coche

Avioacuten

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 continuacioacuten

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=ldquocheckboxrdquo

Otra diferencia es que asiacute como las listas de botones tipo ldquoradiordquo soacutelo permitiiacutean elegir

una opcioacuten (siempre y cuando los nombres de las opciones fueran los mismos) las listas

de cajas permiten seleccionar una o varias opciones

Aquiacute tienes el coacutedigo de una lista que hemos escrito para demostrarte todo lo que te

hemos explicado anteriormente

ltinput type=checkbox name=transporte value=1gtCoche

ltbrgt

ltinput type=checkbox name=transporte value=2 checkedgtAvioacuten

ltbrgt

ltinput type=checkbox name=transporte value=3gtTren

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 32: Guia de  html

observa a continuacioacuten el resultado

Coche

Avioacuten

Tren

Formularios IV botones submit y reset

Botoacuten de enviacuteo

Para enviar la informacioacuten el formulario necesita de un botoacuten que le indique que el

formulario ha concluido y que pueden enviar la informacioacuten

Los botones de enviacuteo se crean con la etiqueta ldquoinputrdquo de tipo ldquosubmitrdquo Ademaacutes hay

que definir el texto que queremos que esteacute escrito en el botoacuten Esto lo conseguimos con

el atributo ldquovaluerdquo Asiacute el coacutedigo de un botoacuten sencillo de formulario seriacutea el siguiente

ltinput type=submit value=Enviar informacioacutengt

Obteniendo el siguiente resultado en nuestra Web

Enviar informacioacuten

Botoacuten de resetear la informacioacuten

Es posible que el usuario una vez avanzado el formulario quiera reiniciarlo desde el

principio y volver a escribir la informacioacuten Para ello es muy uacutetil el botoacuten para borrar la

informacioacuten

El botoacuten se escribe casi igual que el anterior cambiando el type que en el caso de estos

botones es ldquoresetrdquo y cambiando el mensaje interno del botoacuten o sea el ldquovaluerdquo

El ejemplo sencillo de este botoacuten tendriacutea el siguiente coacutedigo

ltinput type=reset value=Borrar informacioacutengt

Y el resultado de ese coacutedigo seriacutea este botoacuten

Borrar informacioacuten

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 gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 33: Guia de  html

al programa de gestioacuten de datos aparte de los datos enviados por el propio usuario

datos predefinidos por nosotros mismos invisibles para el usuario Estos datos pueden

ser uacutetiles para ayudar al programa en su gestioacuten de los datos del formulario Lo que

hacen es comunicar cierta informacioacuten al servidor sobre coacutemo tratar los datos

mantenieacutendose ocultos a la vista de los usuarios

Este tipo de datos ocultos no se muestran en la paacutegina aunque siacute pueden ser detectados

solicitando el coacutedigo fuente El atributo hidden no se llega a usar en paacuteginas escritas en

html soacutelo en las que empleen tambieacuten otro tipo de lenguajes

Aquiacute podemos ver el coacutedigo de un ejemplo

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

ltform action=mailto nombredelcorreocorreocom method=post

enctype=textplain name=mihiddengt

ltinput type=hidden name=opcion value=sigt

ltformgt

image

El atributo ldquoimagerdquo sirve para personalizar un botoacuten Es decir este atributo introduce un

botoacuten en una imagen sustituyendo al formato estaacutendar de botones que ya hemos visto

en otros artiacuteculos del tutorial

La funcioacuten 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 seriacutea este

ltform action=mailtonombredelcorreocorreocom method=post

enctype=textplain name=imagegt

ltinput type=image name=boton

src=httphtmlhazunawebcomhtmlimagenesbotonjpg align=middlegt

ltformgt

file

El atributo file permite al usuario subir archivos Por supuesto necesitaremos un

programa que gestione estos archivos mediante un lenguaje diferente al html

Aquiacute te hemos escrito un formulario con este tipo de type (type=ldquofilerdquo) para que veas

las diferencias con los otros que habiacuteamos visto hasta ahora

ltform method=post enctype=multipartform-datagtltbrgt

ltinput type=file size=60 name=file1gtltbrgtltbrgt

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 34: Guia de  html

ltinput type=file size=60 name=file2gtltbrgtltbrgt

ltinput type=submit value=subirgtltbrgt

ltformgtltbrgt

Fiacutejate como tenemos que cambiar el enctype la forma de enviar la informacioacuten ya que

ahora no vamos a enviar texto plano sino archivos

Nosotros tenemos que definir el tamantildeo del campo y su nombre El botoacuten Examinar

es creado automaacuteticamente por el navegador Al pinchar en eacutel 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 eacutel todo lo que

hemos dado y sobre todo todas las opciones que tenemos a la hora de confeccionar un

formulario

Lo idoacuteneo es que lo observes y trates de hacerlo tuacute sin tener que mirar el coacutedigo que

nosotros hemos utilizado Por si necesitaraacutes hacerlo aquiacute te dejamos el coacutedigo

ltform action=mailtoemaildelaempresaquehaceelformularioemailcom

method=post enctype=textplaingt

Nombre ltinput type=text name=nombre size=25 maxlength=50gtltbrgtltbrgt

Apellidos ltinput type=text name=apellidos size=35 maxlength=100gt

ltbrgtltbrgt

Correo electroacutenico ltinput type=text value= name=correo size=40

maxlength=100gt

ltbrgtltbrgt

Poblacioacuten ltinput type=text name=poblacion size=15 maxlength=50gt

ltbrgtltbrgt

Provincia ltinput type=text name=provincia size=15 maxlength=50gt

lttable width=100 border=0 cellspacing=0 cellpadding=10gt

lttrgt

lttdgtEdad

ltbrgt

ltinput type=radio name=edad value=020gt 0-20

ltbrgt

ltinput type=radio name=edad value=2040 checkedgt 20-40

ltbrgt

ltinput type=radio name=edad value=4060gt 40-60

ltbrgt

ltinput type=radio name=edad value=60100gt 60-100lttdgt

lttdgtampiquestCampoacutemo nos conocisteltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un amigoltbrgt

ltinput type=checkbox name=conocergt

A travampeacutes de un buscadorltbrgt

ltinput type=checkbox name=conocergt

Navegando por la redltbrgt

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 35: Guia de  html

ltinput type=checkbox name=conocergt

Otroslttdgt

lttrgt

lttablegt

Opinioacuten sobre nuestra pampaacutegina webltbrgt

lttextarea cols=40 rows=5 name=opiniongtEscriba aquiacute su opinioacutenlttextareagt

ltbrgtltbrgt

Tiene alguna sugerencia

ltbrgt

lttextarea cols=40 rows=5 name=sugerenciasgtEscriba aquiacute sus

sugerenciaslttextareagt

ltbrgtltbrgt

ampiquestCampuacuteanto navegas por intenet (Seampntildeala la opciampoacuten que

mampaacutes se acerque)ltbrgt

ltselect name=frecuencia size=2gt

ltoption value=1gt2 horas al diacutea

ltoption value=2gt4 horas al diacutea

ltoption value=3gt10 horas a la semana

ltoption value=4gt20 horas al mes

ltselectgt

ltbrgt

ltbrgt

lttable width=50 border=0 align=center cellpadding=10 cellspacing=0gt

lttrgt

lttdgtltdiv align=centergt

ltinput type=submit value=Enviar formulariogt

ltdivgtlttdgt

lttdgtltdiv align=centergt

ltinput type=Reset value=Borrar formulariogt

ltdivgtlttdgt

lttrgt

lttablegt

ltformgt

Marquee

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra paacutegina

Web Gracias a ella podemos conseguir texto en movimiento Para aplicar este efecto a

los textos eacutestos deben estar dentro de la etiqueta marquee entre su inicio ltmarqueegt

y su cierre ltmarqueegt

El movimiento la direccioacuten de desplazamiento la velocidad del mismohelliptodo es

configurable gracias a los siguientes atributos

align Este atributo nos indicaraacute si el texto dentro de la etiqueta se alinearaacute 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 estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 36: Guia de  html

marquesina donde estaacute el texto en movimiento

height y width El primero marca la altura que tendraacute la marquesina y el segundo la

anchura de la misma

scrollamount Este atributo define la cantidad de piacutexeles que queremos que se desplace

el texto en cada movimiento Por ejemplo ltmarquee scrollamount=3gt ltmarqueegt

significaraacute que el texto que vaya dentro de esa etiqueta se moveraacute a razoacuten de tres piacutexeles

por movimiento

scrolldelay Eacuteste nos define la velocidad del texto que estaacute dentro de la marquesina A

menor numeracioacuten mayor velocidad Es decir un texto iraacute maacutes raacutepido si el scrolldelay

es 5 que si el scrolldelay es 20

loop Este atributo nos determina si el movimiento se repetiraacute o no Si queremos que el

movimiento soacutelo se repita unas veces determinadas debemos indicaacuterselo con un

nuacutemero que seraacute el nuacutemero de veces que se repita Si queremos que se repita soacutelo 10

veces su loop seraacute el siguiente ltmarquee loop=10gt ltmarqueegt

Si queremos que se repita debemos usar infinite o -1 Si no especificamos nada se

repetiraacute constantemente

direction Sirve para definir la direccioacuten 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 moveraacute de forma circular en el sentido que le

hayamos marcado Con behavior=scroll conseguiremos el mismo efecto el texto se

moveraacute circularmente

Con behavior=slide haremos que el texto se detenga al llegar al final de la

marquesina Y con el behavior=alternate el texto iraacute y volveraacute de un lado a otro de la

marquesina

Nosotros hemos querido mostrarte un ejemplo de marquee

Y el coacutedigo de nuestro marquee es el siguiente

ltmarquee bgcolor=FFFFFF width=50 scrolldelay=100 scrollamount=5

direction=left loop=infinitegtEstaacutes viendo el ejemplo que hemos hecho nosotros

ltmarqueegt

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 37: Guia de  html

Otras etiquetas

center

La etiqueta ltcentergt nos permite centrar paacuterrafos imaacutegenes o tablas dentro de nuestra

Web Para centrar un elemento eacuteste debe estar entre las etiquetas de apertura y cierre

Este seriacutea el coacutedigo de un texto centrado

ltcentergt Este texto estaacute centrado en la paacutegina ltcentergt

span

La etiqueta ltspangt nos permite agrupar un conjunto de elementos y asiacute poder establecer

unas reglas de estilo comunes para el conjunto Los elementos que queramos agrupar

con ldquospanrdquo deben ir dentro entre ltspangt y ltspangt su etiqueta de apertura y cierre

respectivamente

Como podemos comprobar la etiqueta ltspangt se parece mucho a la etiqueta ltdivgt ya

que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas

caracteriacutesticas comunes para todos esos elementos Tanto uno como el otro son

etiquetas maacutes propias de css Hay una diferencia clara entre ambas

Con la etiqueta span podemos agrupar unos elementos sin que eacutestos sufran ninguna

variacioacuten 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 variacioacuten de

salto de liacutenea con respecto a los demaacutes elementos ltdivgt crea un salto de liacutenea al

principio y otro al final

Vamos a ver el coacutedigo del ejemplo del efecto del span en un grupo de elementos

Esto es un paacuterrafo ltspan style=colorredgtcon unas letras en rojoltspangt para que

veas lo que se puede hacer con la etiqueta span

Y aquiacute podemos ver el resultado del efecto

Esto es un paacuterrafo con unas letras en rojo para que veas lo que se puede hacer con la

etiqueta span

CSS

Las hojas de estilo completan Html daacutendole mayores posibilidades Nosotros te

explicamos CSS en su tutorial especiacutefico pero en este artiacuteculo queriacuteamos mostrarte

algunas de las posibilidades que nos ofrecen las hojas de estilo

Observa el siguiente texto de Gustavo Adolfo Becquer

Volveraacuten las oscuras golondrinas

en tu balcoacuten sus nidos a colgar

y otra vez con el ala a sus cristales

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 38: Guia de  html

jugando llamaraacuten

Volveraacuten las tupidas madreselvas

de tu jardiacuten las tapias a escalar

y otra vez a la tarde auacuten maacutes hermosas

sus flores se abriraacuten

Pero aquellas cuajadas de rociacuteo

cuyas gotas miraacutebamos temblar

y caer como laacutegrimas del diacutea

iexclesas no volveraacuten

Le hemos aplicado unos cuantos estilos para que veas algunas de las cosas que se

pueden llegar hacer Si quieres saber coacutemo lo hemos hecho aquiacute te dejamos el coacutedigo

para que lo observes

ltp style=font-size20pxcolorFF0000gtVolverampaacuten las oscuras

golondrinasltbrgt

en tu balcampoacuten sus nidos a colgarltbrgt

y otra vez con el ala a sus cristalesltbrgt

jugando llamarampaacutenltpgt

ltpgt ltspan style=background-color00FF00font-

styleitaliccolor0000FFgtVolverampaacuten

las tupidas madreselvasltbrgt

de tu jardampiacuten las tapias a escalarltbrgt

y otra vez a la tarde aampuacuten mampaacutes hermosasltbrgt

sus flores se abrirampaacutenltbrgt

ltbrgt

ltspangt

ltspan style=border-bottom1px 000000 dashedgt Pero aquellas cuajadas

de rocampiacuteoltbrgt

cuyas gotas mirampaacutebamos temblarltbrgt

y caer como lampaacutegrimas del dampiacutealtbrgt

ampiexclesas no volverampaacutenltspangtltpgt

Javascript

Como hemos visto a lo largo del tutorial el html tiene una importante limitacioacuten es un

lenguaje estaacutetico 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

ensentildearte a utilizar este lenguaje pero siacute queremos mostrarte como incluirlo en tu

paacutegina Web dentro del lenguaje html

Aunque existen diferentes formas de incluir Javascript en un documento html nosotros

vamos a mostrarte la maacutes comuacuten mediante la etiqueta ltscriptgt y su correspondiente

cierre ltscriptgt Ademaacutes deberemos indicar dentro de esa etiqueta el lenguaje

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 39: Guia de  html

(language=Javascript) y el tipo (type=textjavascript)Dentro de esta etiqueta iraacute el

programa Javascript En un mismo documento html podemos incluir varias etiquetas

ltscriptgt El uacutenico requisito es que todas ellas esteacuten convenientemente cerradas

En el siguiente ejemplo veraacutes una de las muchas cosas que se pueden hacer mediante el

Javascript Nosotros hemos hecho una ventana de alerta Ejemplo de Javascript Y a

continuacioacuten te mostramos el coacutedigo

lthtmlgt

ltheadgt

lttitlegtAlerta en Javasrciptlttitlegt

ltheadgt

ltbodygt

Aquampiacute tienes nuestra ventana de alerta en Javascript ampiquestQuampeacute

te parece

ltscript language=Javascript type=textjavascriptgt

windowalert(Esta alerta la hemos hecho con Javascript)

ltscriptgt

ltbodygt

lthtmlgt

Viendo detenidamente el coacutedigo nos damos cuenta de coacutemo el programa Javascript estaacute

escrito dentro de las etiquetas ltscriptgt correspondientes Este programa en concreto es

una ventana de alerta que nos muestra un texto que nosotros hemos escrito previamente

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 40: Guia de  html

Etiquetas HTML

Apertura Accioacuten Atributos Cierre

lt Comentario Ninguno --gt

ltAgt Hiperviacutenculo HREF NAME REL

REV TITLE ltAgt

ltADDRESSgt

Formato para

direccioacuten del

autor

Ninguno ltADDRESSgt

ltBASEgt

Url del autor

contexto del

documento

HREF ltBASEgt

ltBASEFONT

SIZEgt

Tamantildeo de la

fuente base Ninguno NO

ltBGSOUNDgt Sonido de fondo SRC LOOP NO - Internet

Explorer

ltBIGgt Aumenta el

tamantildeo Ninguno ltBIGgt

ltBLINKgt Hace parpadear el

texto Ninguno

ltBLINKgt -

Netscape

ltBLOCKQUOTEgt

Da formato con

sangriacutea a un

paacuterrafo

Ninguno ltBLOCKQUOTEgt

ltBODYgt Cuerpo del

documento

BGCOLOR

BACKGROUND

TEXT LINK

VLINK ALINK

ltBODYgt

ltBRgt Retorno de liacutenea

CLEAR Se utiliza en

combinacioacuten con

ALIGN de IMAGE

NO

ltCAPTIONgt

Posicioacuten de la

leyenda en una

tabla

ALIGN

TOPBOTTOM

Internet Explorer

LEFT RIGHT

CENTER

ltCAPTIONgt

ltCENTERgt Centrar Ninguno ltCENTERgt

ltCITEgt Formato para Ninguno ltCITEgt

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 41: Guia de  html

citas en itaacutelicas

ltCODEgt Formato en tipo

coacutedigo Ninguno ltCODEgt

ltDDgt

Definiciones

marcadas para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltDFNlt Formato en

itaacutelica Internet Explorer ltDFNlt

ltDIRgt

Lista de

directorio con

elementos

marcados con

ltLIgt

Ninguno ltDIRgt

ltDLgt

Lista de

Definiciones con

teacuterminos

marcados con

ltDTgt y

definiciones

marcadas con

ltDDgt

Ninguno ltDLgt

ltDTgt

Teacuterminos

marcados para

Lista de

Definiciones

ltDLgt

Ninguno NO

ltEMgt

Formato

enfatizado en

itaacutelica

Ninguno ltEMgtltTDlt trgt

ltEMBEDgt Sonido de Fondo

SRC WIDTH

HEIGHT

AUTOSTART

LOOP

NO -

NetscapeltTDlt trgt

ltFONTgt Definicioacuten de la

fuente

SIZE COLOR

Internet Explorer

FACE

ltFONTgt

ltFORMgt

Para ingreso de

datos del usuario

en un formulario

ACTION METHOD ltFORMgt

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 42: Guia de  html

ltH1 H6gt Tamantildeo de letras

del 1 al 6

HTML 30 LEFT

CENTER RIGHT ltH1 H6gt

ltHEADgt Encabezamiento

del documento

BASE TITLE

ISINDEX NEXTID

META

ltHEADgt

ltHRgt Liacutenea horizontal

NOSHADE SIZE

WIDTH ALIGN

Internet Explorer

COLOR

NO

ltHTMLgt

Al principio y al

fin de todo

documento

HEAD BODY ltHTMLgt

ltIgt Itaacutelica (Cursiva) Ninguno ltIgt

ltIMGgt Cargar imaacutegenes

ALIGN SRC ALT

ISMAP WIDTH

HEIGHT VSPACE

HSPACE

NO

ltINPUTgt

Define un objeto

de ingreso en un

formulario

TYPE NAME

VALUE SIZE

MAXLENGHT

ALIGN SRC

CHECKED

ltINPUTgt

ltISINDEXgt

Indica que existe

un index en el

server para el

documento

Netscape PROMPT NO

ltISMAPgt

Activa la

seleccioacuten de

imaacutegenes para el

usuario

Ninguno NO

ltKBDgt Formato

monoespaciado Ninguno ltKBDgt

ltLIgt Iacutetem de lista Netscape VALUE

TYPE NO

ltLISTINGgt Listados Ninguno Obsoleto ltLISTINGgt

ltLITgt

Literal Como

PRE pero usa

letra

proporcional

Ninguno ltLITgt

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 43: Guia de  html

ltMARQUEEgt Marquesina

ALIGN BEHAVIOR

BGCOLOR

DIRECTION

HEIGHT WIDTH

HSPACE VSPACE

LOOP

SCROLLAMOUNT

SCROLLDELAY

ltMARQUEEgt -

Internet Explorer

ltMENUgt Lista menuacute Ninguno ltMENUgt

ltMETAgt

Metainformacioacuten

ubicada en

HEAD

EQUIV CONTENT

NAME NO

ltNEXTIDgt

Es un paraacutemetro

que identifica al

documento

NO NO

ltNOBRgt Elimina los saltos

de liacuteneas Ninguno NO

ltOLgt

Lista ordenada

con elementos

marcados con

ltLIgt

TYPE START

VALUE ltOLgt

ltOPTIONgt

Opcioacuten de

seleccioacuten dentro

de un formulario

VALUE SELECTED

VALUE NO

ltPgt Retorno de liacutenea

con un espacio Ninguno NO

ltP ALIGNgt Alineacioacuten de

texto

LEFT CENTER

RIGHT ltPgt

ltPLAINTEXTgt Pasaje de texto

plano Ninguno Obsoleto ltPLAINTEXTgt

ltPREgt

Visualiza el texto

en su formato

original

WIDTH ltPREgt

ltSgt Texto tachado Ninguno ltSgt

ltSAMPgt Formato tipo

ejemplo Ninguno ltSAMPgt

ltSELECTgt

Para seleccioacuten de

opciones dentro

de un formulario

NAME SIZE

MULTIPLE ltSELECTgt

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 44: Guia de  html

ltSMALLgt Disminuye el

tamantildeo Ninguno ltSMALLgt

ltSTRONGgt

Formato

enfatizado maacutes

fuerte que ltEMgt

Ninguno ltSTRONGgt

ltSUBgt Subiacutendice Ninguno ltSUBgt

ltSUPgt Superiacutendice Ninguno ltSUPgt

ltTABLEgt Tabla

BORDER

CELLPADDING

CELLSPACING

HEIGTH WIDTH

Internet Explorer

COLOR

ltTABLEgt

ltTDgt

Celdas de una fila

en una tabla

dentro de ltTRgt

ALIGN VALIGN

NOWRAP

COLSPAN

ROWSPAN

HEIGTH WIDTH

ltTDgt

ltTEXTAREAgt

Aacuterea para ingreso

de texto dentro de

un formulario

NAME ROWS

COLS ltTEXTAREAgt

ltTHgt Tiacutetulo de Tabla

ROWSPAN

COLSPAN ALIGN

VALIGN NOWRAP

HEIGHT WIDTH

ltTHgt

ltTITLEgt Tiacutetulo dentro de

HEAD Ninguno ltTITLEgt

ltTRgt Fila de una Tabla ALIGN VALIGN ltTRgt

ltTTgt Formato tipo

maacutequina Ninguno ltTTgt

ltULgt

Lista no

ordenada con

elementos

marcados con

ltLIgt

COMPACT TYPE ltULgt

ltVARgt Formato tipo

variable Ninguno ltVARgt

ltWBRgt Se usa con NOBR

para una seccioacuten Ninguno NO

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 45: Guia de  html

que deba ser

separada

ltXMPgt Similar a PRE Ninguno ltXMPgt

Atributos

Nombre Etiqueta Accioacuten Valor

HREFltAgt

Direccioacuten del

URL local o

remoto

href=wwwhpcom

LOOP

ltBGSOUNDgt

Nuacutemero 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=sonidowav

LOOP

ltEMBEDgt

Nuacutemero 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=sonidomid

SRC

ltIMAGEgt

Nombre del graacutefico src=imagengif

ALT

Nombre que reemplaza

a la imaacutegen cuando eacutesta

no puede ser cargada

alt=Nombre de

Imaacutegen

BGCOLOR

ltBODYgt

Color de fondo bgcolor=FFFFFF

(blanco)

BACKGROUND Imaacutegen de fondo background=fotogif

TEXT Color del texto text=000000

(negro)

LINK Color de viacutenculo link=0000FF (azul)

VLINK Color de viacutenculo

visitado

vlink=FF0000

(rojo)

ALINK Color de viacutenculo

presionado

alink=00FF00

(verde)

ALIGN ltCAPTIONgt Colocar tiacutetulo arriba align=top

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 46: Guia de  html

dentro de

ltTABLEgt

(TOP) o debajo

(BOTTOM) de la tabla

ALIGN

ltH1H6gt ltP

ALIGNgt ltTDgt

ltTHgt ltTRgt

ltDIVgt

Alinear el texto LEFT

RIGHT CENTER align=center

ALIGN

ltHRgt

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

ltFONTgt

Tamantildeo 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

(helveacutetica)

HEIGHT ltEMBEDgt

ltIMAGEgt

ltMARQUEEgt

ltTDgt ltTHgt

Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

BORDER

ltTABLEgt

Borde y ancho del borde

en la tabla border=5

CELLPADDING Espacio entre el borde y

el texto cellpadding=10

CELLSPACING

Espacio entre las liacuteneas

interna y externa del

borde

cellspacing=3

HEIGHT Valor de la altura en

pixels o porcentaje heigth=80

WIDTH Valor del ancho en

pixels o porcentaje width=50

COLSPAN ltTDgt dentro de

ltTABLEgt

Expandir una celda

varias columnas colspan=4

ROWSPAN Expandir una celda

varias filas rowspan=4

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 47: Guia de  html

Tag Vaciacuteo Descripcioacuten corta

lt-- --gt Inserta comentarios ocultos

ltDOCTYPEgt Establece el tipo de documento

ltagt Inserta viacutenculos o marcadores

ltabbrgt Explica abreviaciones

ltacronymgt Explica acroacutenimos

ltaddressgt Provee informacioacuten de contacto

ltappletgt Inserta un applet (scripts)

ltareagt Define sectores para mapas de imagen

ltbgt Texto en negrita

ltbasegt URI base para resolver URIs relativas

ltbasefontgt Tamantildeo de la fuente predeterminado

ltbdogt Suprime el algoritmo bidireccional

ltbiggt Texto en tamantildeo grande

ltblockquotegt Citar paacuterrafos

ltbodygt Contiene los elementos a mostrar

ltbrgt Fuerza un quiebre de liacutenea

ltbuttongt Crea un botoacuten

ltcaptiongt Establece un tiacutetulo para una tabla

ltcentergt Centra su contenido

ltcitegt Inserta una cita o referencia

ltcodegt Representa texto de computadora

ltcolgt Da atributos a columnas en una tabla

ltcolgroupgt Agrupa columnas en una tabla

ltddgt Define descripciones en una lista

ltdelgt Indica texto eliminado

ltdfngt Asigna una definicioacuten a un teacutermino

ltdirgt Inserta una lista de directorios (aacuterbol)

ltdivgt Define un bloque de contenido

ltdlgt Define una lista

ltdtgt Inserta un teacutermino en una lista

ltemgt Indica eacutenfasis

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 48: Guia de  html

ltfieldsetgt Agrupa controles en un formulario

ltfontgt Establece el estilo de fuente

ltformgt Inserta un formulario

ltframegt Inserta un marco

ltframesetgt Inserta un grupo de frames

lth1gt Encabezado de nivel 1

lth2gt Encabezado de nivel 2

lth3gt Encabezado de nivel 3

lth4gt Encabezado de nivel 4

lth5gt Encabezado de nivel 5

lth6gt Encabezado de nivel 6

ltheadgt Define el bloque de encabezado

lthrgt Dibuja una liacutenea o regla horizontal

lthtmlgt Contiene al documento

ltigt Muestra texto en itaacutelica

ltiframegt Inserta un marco dentro del documento

ltimggt Inserta una imagen

ltinputgt Muestra controles de entrada

ltinsgt Indica texto insertado

ltisindexgt Entrada de liacutenea simple

ltkbdgt Indica texto a ingresarse por el usuario

ltlabelgt Establece una etiqueta para un control

ltlegendgt Asigna un tiacutetulo a un fieldset

ltligt Define un artiacuteculo en una lista

ltlinkgt Ofrece informacoacuten relacional

ltmapgt Define un mapa de imagen

ltmenugt Lista menuacute

ltmetagt Da informacioacuten sobre el documento

ltnoframesgt Contenido alternativo para marcos

ltnoscriptgt Contenido alternativo para scripts

ltobjectgt Ejecuta aplicaciones externas

ltolgt Inserta una lista ordenada

ltoptgroupgt Agrupa opciones en un control select

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 49: Guia de  html

ltoptiongt Define una opcioacuten en un control select

ltpgt Define un paacuterrafo

ltparamgt Da un paraacutemetro para un objeto

ltpregt Bloque de texto preformateado

ltqgt Inserta una cita en una liacutenea

ltsgt Muestra texto tachado

ltsampgt Representa texto de programas

ltscriptgt Contiene scripts

ltselectgt Crea un control select

ltsmallgt Muestra texto en letra pequentildea

ltspangt Asigna atributos al texto en liacuteneas

ltstrikegt Muestra texto tachado

ltstronggt Indica eacutenfasis fuerte

ltstylegt Define atributos visuales (hojas estilo)

ltsubgt Define texto en sub-iacutendice

ltsupgt Define texto en super-iacutendice

lttablegt Inserta una tabla

lttbodygt Define un cuerpo en una tabla

lttdgt Celda regular de una tabla

lttextareagt Entrada de texto de liacuteneas muacuteltiples

lttfootgt Define un pie en una tabla

ltthgt Celda de encabezado de una tabla

lttheadgt Define un encabezado de tabla

lttitlegt Define el tiacutetulo del documento

lttrgt Inserta una fila en una tabla

ltttgt Muestra texto en teletype

ltugt Muestra texto subrayado

ltulgt Inserta una lista sin orden

ltvargt Indica una instancia de una variable

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 50: Guia de  html

Mi primera paacutegina

El coacutedigo

primerahtml ltcodigogtltHTMLgt

ltHEADgt

ltTITLEgtMi primera paginaltTITLEgt

ltHEADgt

ltBODYgt

ltCENTERgtltH1gtMi Primera paginaltH1gtltCENTERgt

ltHRgt

ltPgtEsta es mi primera pagina (chispas) Por el

momento no se que tendra pero dentro de poco

pondre aqui muchas cosas interesantes

ltBODYgt

ltHTMLgt

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 51: Guia de  html

Formato del paacuterrafo

Estas son las etiquetas maacutes importantes (excluyendo algunas que veremos maacutes adelante)

Etiqueta Utilidad Resultado

ltPgt Sirve para delimitar un paacuterrafo Inserta una liacutenea en blanco antes del texto

Soy un paacuterrafo

ltCENTERgt

ltCENTERgt Permite centrar todo el texto del paacuterrafo

Yo soy normal Yo estoy centrado

ltPRE WIDTH=xgt

ltPREgt

Representa el texto encerrado en ella con un tipo de letra de paso fijo Muy uacutetil a la hora de representar coacutedigo fuente El paraacutemetro WIDTH especifica el nuacutemero maacuteximo de caracteres en una liacutenea

Estoy en paso fijo

ltDIV ALIGN=xgt

ltDIVgt

Permite justificar el texto del paacuterrafo

a la izquierda (ALIGN=LEFT) derecha

(RIGHT) al centro (CENTER) o a ambos

maacutergenes (JUSTIFY)

Yo estoy a la izquierda Yo al centro Y yo a la derecha

(recuerda a la poliacutetica esto oye)

Yo soy el maacutes chulo porque estoy en todos los lados

ltADDRESSgt

ltADDRESSgt Para escribir direcciones (de esas donde vive la gente no electroacutenicas)

Daniel Rodriacuteguez Herrera CEcuador 9 1ordmB 28220 Majadahonda

ltBLOCKQUOTEgt

ltBLOCKQUOTEgt

Para citar un texto ajeno Se suele implementar dejando maacutergenes tanto a izquierda como a derecha razoacuten por la que se usa habitualmente

Me gustariacutea 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 eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 52: Guia de  html

Las 6 cabeceras

El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras Son eacutestas

Etiqueta Resultado

ltH1gt ltH1gt Cabecera de nivel 1

ltH2gt ltH2gt Cabecera de nivel 2

ltH3gt ltH3gt Cabecera de nivel 3

ltH4gt ltH4gt Cabecera de nivel 4

ltH5gt ltH5gt Cabecera de nivel 5

ltH6gt ltH6gt Cabecera de nivel 6

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto

Page 53: Guia de  html

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

paacuterrafo

Etiqueta Utilidad Resultado

ltBgt ltBgt Pone el texto en negrita Soy un texto

negro como el

tizoacuten

ltIgt ltIgt Representa el texto en

cursiva Estoy ladeado

ltUgt ltUgt Para subrayar algo

Como soy muy

importante estoy

subrayado

ltSgt ltSgtltimagenenlinea

direccion=graficos32gif

descripcion=HTML 32gt

Para tachar A miacute en cambio

nadie me quiere

ltTTgt ltTTgt

Permite representar el

texto en un tipo de letra

de paso fijo

No soy variable

ltSUPgt ltSUPgt Letra superiacutendice E=mc2

ltSUBgt ltSUBgt Letra subiacutendice aij=bij+1

ltBIGgt ltBIGgt Incrementa el tamantildeo

del tipo de letra Soy GRANDE

ltSMALLgt ltSMALLgt Disminuye el tamantildeo

del tipo de letra

Creiacute ver un lindo

gatito

ltBLINKgt ltBLINKgt Hace parpadear el texto

Resulta algo irritante iquestMolesto