Guia de html
-
Upload
mantenimientosecc022 -
Category
Education
-
view
100 -
download
2
description
Transcript of 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
(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
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
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
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
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
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
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
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
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
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
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
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
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
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
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