2. HTML, XML y CSS

(1)

(2)

(3)

2 HTML, XML Y CSS.

Conoce y aplica las

herramientas para

construir páginas

web, considerando la

interfaz gráca de

usuario, un lenguaje

de marcado y de

presentación.

(4)

2 HTML, XML Y CSS.

2.1 Introducción.

2.2 Estructura global de un documento eb.

2.! Elementos b"sicos# te$to, %&nculos, listas, tablas,

ob'etos, im"genes ( a)licaciones.

2.* +ormularios.

2. Lengua'es de )resentación en documentos eb.

2.- Selectores.

2. Modelo de ca'a.

(5)

2 LE/03E 4E M5C46. 7

CTI8I44ES

cti%idad

8alor

E$amen

teórico

29 :

;ro(ecto Integrador

29:

;r"cticas HTML# de los elementos b"sicos del

lengua'e de marcas, tales como# te$to,

%&nculos, listas, tablas, ob'etos ( <ormulario.

1:

;racticas

XML

1:

(6)

2.1 I/T564CCI=/.

HT! " #$Hiper Te%t ar& 'p

!anguage()

HTML es el lengua'e de marcado est"ndar

utili>ado )ara crear )"ginas ?eb ( sus

elementos <orman los blo@ues de

construcción de todos los sitios ?eb.

HT!* " Es el lengua'e de )ublicación de la orld ide eb. dem"s del te$to, multimedia ( <unciones de Ai)er%&nculo de las %ersiones anteriores de HTML BHTML !.2 HTML!2D ( HTML 2.9 5+C1--DF, HTML * es com)atible con m"s de o)ciones multimedia, lengua'es de scri)t, Ao'as de estilo, me'ores instalaciones de im)resión ( documentos @ue sean m"s a ccesibles a los usuarios con disca)acidad. HTML * tambiGn tiene grandes )asos Aacia la internacionali>ación de los documentos, con el ob'eti%o de Aacer la eb realmente todo el mundo.

HT!+ " s)ecica dos %ariantes de sinta$is )ara HTML# una cl"sicaJ, HTML Bte$tKAtmlF, conocida

como HTML5, ( una %ariante XHTML conocida como sinta$is XHTML5 @ue deber" ser%irse con sinta$is

(7)

2.1 I/T564CCI=/.

arcas

Las marcas delimitan elementos de un documento como cabeceras, )"rra<os,

etc ( son utili>adas )ara dar un tratamiento di<erente al te$to @ue se

encuentre entre las marcas.

El HTML es un lengua'e @ue basa su sinta$is en un elemento de base al

@ue llamamos eti@ueta. La eti@ueta )resenta <recuentemente dos

)artes# na a)ertura de <orma general n cierre de ti)o

...te$to normal

-marca

te$to a<ectado )or la marca

-/marca

resto del

te$to... n e'em)lo )odr&a ser resaltar un te$to en negrita, )ara ello se em)lea

la marca NO ( @uedar&a de la siguiente <orma# ...te$to normal NO

te%to en

negrita

KNO resto del te$to...

(8)

2.1 I/T564CCI=/.

0tributos de las marcas

lgunas marcas )ueden admitir atributos, )udiendo tener cada uno de estos

atributos un %alor. Este %alor ira entre comillas BPF si dicAo %alor es

al<anumGrico.

marca atributo1Qnumerico atributo2QPal<anumetricoPO

E'em)lo#

-table width12+32 height12432 border12532 -/table

-a href12/home/default.html2

(9)

2.1 I/T564CCI=/.

0tributos de las marcas

lgunas marcas )ueden admitir atributos, )udiendo tener cada uno de estos

atributos un %alor. Este %alor ira entre comillas BPF si dicAo %alor es

al<anumGrico.

marca atributo1Qnumerico atributo2QPal<anumetricoPO

E'em)lo#

-table width12+32 height12432 border12532 -/table

-a href12/home/default.html2

(10)

2.2 EST5CT5 0L6NL 4E / 46CME/T6

EN.

(11)

2.2 EST5CT5 0L6NL 4E / 46CME/T6

EN.

(12)

</head> <body>

<h1>)i sitio web</h1>

<p>)i sitio web creado en html*</p> </header>

<h2>Titilo de contenido<h2>

<p> +ontenido ,ademas de imagenes citas videos etc. </p> </article> </section> <aside> <h3>Titulo de contenido</h3> <p>contenido</p> </aside> <footer> +reado %or mi el 011 </footer>

(13)

2.2 EST5CT5 0L6NL 4E / 46CME/T6

EN.

R46CTY;E HTML ;NLIC P7KK!CKK4T4 HTML *.91KKE/P PAtt)#KK???.?!.orgKT5KAtml*Kstrict.dtdPO HTMLO HE4O

TITLEOMi )rimer documento HTMLKTITLEO KHE4O

N64YO

;OHola mundoR K)O KN64YO KHTMLO <!DOCTYPE html> <html lang="es"> <head> <title>Titulo de la web</title> <meta charset="utf-8" />

<h1>)i sitio web</h1>

<p>)i sitio web creado en html*</p> </header>

<h2>Titilo de contenido<h2>

<p> +ontenido ,ademas de imagenes citas videos etc. </p> </article> </section> <aside> <h3>Titulo de contenido</h3> <p>contenido</p> </aside> <footer> +reado %or mi el 011 </footer> </body> </html>

(14)

2.2 EST5CT5 0L6NL 4E / 46CME/T6

EN.

Cabecera

La cabecera se emplea para facilitar información acerca del documento y está delimitada por <HEAD> prólogo </HEAD>.

Dentro de la cabecera podemos destacar el título ue indica el nombre del documento <!"!LE> </!"!LE>.

<H!#L> <HEAD>

<!"!LE> $ien%enido a nuestra guía rápida </!"!LE> </HEAD>

&uerpo del documento '</H!#L>

(15)

2.2 EST5CT5 0L6NL 4E / 46CME/T6

EN

R46CTY;E HTML ;NLICQP7KKIET+KK4T4 HTML *.9KKE/PO

AtmlO

AeadO

titleO MI ;5IME5 ;0I/ KtitleO

MET nameQPe(?ordsP contentQPHTML,reali>ación )"ginas ?ebPO

MET nameQPdescri)cionP contentQPMi )rimera )ortada PO

MET nameQP0E/E5T65P contentQPN6C 4E /6TS inUPO

MET nameQPautAorP contentQP/ombre )ellidosPO

MET HTT;7EVI8QP5e<resAP contentQPPWurlQ)i))o.AtmO

lin relQPst(lesAeetP Are<QPcssKst(le.cssPO

scri)t srcQP'sK'@uer(.'sPOKscri)tO

KAeadO

(16)

2.2 EST5CT5 0L6NL 4E / 46CME/T6

EN.

Cuerpo

El resto del documento residir"

entre las marcas N64YO (

KN64YO. Esta es la estructura

m&nima @ue debe )oseer todo

documento HTML#

N64YO

4ocumento...

KN64YOKHTLMO

 continuación describiremos

algunos elementos @ue )ueden

(17)

2.2 EST5CT5 0L6NL 4E / 46CME/T6

EN.

ncabezado

Los encabe>ados se em)lean )ara di%idir los documentos en secciones o mas concretamente )ara marcar los t&tulos de esas secciones. Las marcas son del ti)o HO t&tulo KHO, donde  )uede ser un nmero cual@uiera entre 1 ( -. H1OTamaZo ma(orKH1OTama:o menor

(18)

2.! TI;6S 4E 4T6S N[SIC6S.

-;<=CT>? HT! ?'@!AC12B//AT//<T< HT! *.3//D2

<=CT>?" ;ro)orciona in<ormación al ser%idor de ?eb antrión de la )"gina

entregando los datos necesarios )ara la

Comunicación entre el na%egador ( el ser%idor. Bno es 6bligatorioF Su <orma est"ndar es la siguiente#

HT! ?'@!AC# El documento es )blico.

AT# El ti)o de HTML )blico est" gestionado )or la Internet Engineering Tas +orce.

<T< HT! *.3# La %ersión de HTML so)ortada es la *.9.

(19)

2.! TI;6S 4E 4T6S N[SIC6S.

T0" Son cadenas de códigos @ue son las )rimeras @ue leen Los buscadores. E>F=G<# Las )alabras cla%e son los tGrminos @ue, de manera resumida

describen el contenido de una )"gina ?eb.

0'TH=G# utor de la )"gina.

<CGA?CA=D# T&tulo @ue a)arecer" tras la bs@ueda.

IDG0T=G# /ombre del editor @ue se Aa generado el 4ocumento.

D=AD<J# Es cuando se desea @ue una )"gina /6 sea Indici>ada en los motores

de bs@ueda.

(20)

LE/03E HTML

?0G0<=G < @!=K'

-?

BSe)arador de )"rra<os, sus atributos son le<t, rigAt, centerF.

-@G

BSalto de l&neaF.

-@!=CEK'=T

B;"rra<os TabuladosF.

-HG

BL&nea Hori>ontal, atributos# nosAade, ?idtA, si>e, alignF.

-?G

BTe$to )re<ormateadoF.

(21)

LE/03E HTML

ondos y colores de te%to

n cierto nmero de atributos de la marca N64Y )ermiten controlar el color del <ondo de la %entana del bro?ser, el color de los caracteres del te$to, ( nalmente el color de los enlaces#

 N64Y atributo1 atributo2 atributo! ... atributo/ O

l atributo @IC=!=G

Este atributo )ermite escoger un color )ara el <ondo de la )"gina

N64Y N0C6L65SQPrrggbbPO donde PrrP PggP ( PbbP son %alores Ae$adecimales com)rendidos entre 99 ( ++ @ue es)ecican el grado de saturación de los colores ro'o, %erde ( a>ul.

l atributo @0CEIG='D<

Este atributo es)ecica una imagen residente en el ser%idor la cual se utili>ar" como <ondo de )"gina.

(22)

LE/03E HTML

ondos y colores de te%to l atributo TJT

;ermite controlar el color del te$to est"ndar, es decir, todo te$to @ue no es)eci@ue un enlace. N64Y TEXTQPrrggbbPO

!os atributos !ADE, L!ADE y 0!ADE

Controlan el color de los enlaces#

LI/\ color del enlace @ue an no Aa sido %isitado.N64Y LI/\QPrrggbbPO LI/\ color mu( <uga> @ue a)arece cuando se Aace clic sobre el enlace N64Y LI/\QPrrggbbPO

(23)

2.! TI;6S 4E 4T6S N[SIC6S.

R46CTY;E HTML ;NLICQP7KKIET+KK4T4 HTML *.9KKE/PO AtmlO

AeadO titleO MI ;5IME5 ;0I/ KtitleO

MET nameQPe(?ordsP contentQPHTML, reali>ación )"ginas ?ebPO MET nameQPdescri)cionP contentQPMi )rimera )ortada PO

MET nameQP0E/E5T65P contentQPN6C 4E /6TS inUPO MET nameQPautAorP contentQP/ombre )ellidosPO

MET HTT;7EVI8QP5e<resAP contentQPPWurlQ)i))o.AtmO KAeadO

bod( bgcolorQPEE++PO

Ti)o de letra NOnegritaKNO, letra IOcursi%aKIO ( letra TTOcourierKTTO. CE/TE5OEste te$to est" centradoKCE/TE5O

; lignQPle<tPOEste te$to est" alineado a la i>@uierdaK;O ; lignQPcenterPOEste te$to est" centradoK;O

; lignQPrigAtPOEste te$to est" alineado a la derecAaK;O <ont <aceQ"Arial“ si>eQ! colorQ99999O te$to... <ontO

(24)

2.! TI;6S 4E 4T6S N[SIC6S.

A1OCabecera ti)o 1KA1O

A2OCabecera ti)o 2KA2O

A!OCabecera ti)o !KA!O

AOCabecera ti)o KA*O

AOCabecera ti)o KAO

A-OCabecera ti)o -KA-O

Internetimg srcQPimagenesKinternet1.')gP ?idtAQPUP AeigAtQP122PO

)O se)aradorK)O

olO

liO+icAero de imagenKliO

liO+icAero de sonidoKliO

liO+icAero de %ideoKliO

olO

Kbod(O

KAtmlO

(25)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

7. ormato Te%to

El <ormateo del te$to, o sea, el <ormato del te$to, son una serie de eti@uetas @ue

escribimos en Atml rodeando la )alabra o el te$to ( @ue trans<orman ese te$to en el

<ormato @ue nosotros le Aemos @uerido dar.

Degrita

E$isten dos eti@uetas @ue Aar"n @ue nuestro te$to se con%ierta en negrita. La utili>ación de cual@uiera de ellas es indi<erente. ;uedes usar la @ue )reeras.

La )rimera es la eti@ueta bO ( la otra es la eti@ueta strongO. @u& %a un e'em)lo# Este )alabra la %amos a )oner en bOnegritaKbO ( esta otra

strongOtambiGnKstrongO

(26)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

Te%to

CursiNa"

;ara escribir un te$to en cursi%a debemos utili>ar la eti@ueta iO B( )or

su)uesto cerrarla con la eti@ueta KiOF.

TambiGn )odemos utili>ar la eti@ueta emO. Como en el caso de la negrita, es

indi<erente el uso de una u otra. @u& os de'o un e'em)lo#

Este )alabra la %amos a )oner en iOcursi%aKiO ( esta otra

emOtambiGnKemO

(27)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S,

LISTS, TNLS, 6N3ET6S, IM[0E/ES Y

;LICCI6/ES.

Te%to

ubrayado"

Si @ueremos @ue la )alabra o el te$to @uede subra(ado, deberemos

rodearlo con la eti@ueta uO ( cerrarlo con su corres)ondiente eti@ueta. 6 sea,

KuO. s& subra(ar&amos una <rase im)ortante#

uOs& subra(ar&amos una <rase im)ortanteKuO

s& subra(ar&amos una <rase im)ortante

(28)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

Te%to Cabeceras

A1OCabecera ti)o 1KA1O

A2OCabecera ti)o 2KA2O

A!OCabecera ti)o !KA!O

AOCabecera ti)o KA*O

AOCabecera ti)o KAO

A-OCabecera ti)o -KA-O #

0tributo face

4ene el ti)o de letra. Este atributo es inter)retado )or %ersiones de /etsca)e a )artir de la ! ( de MSIE ! o su)eriores. 6tros na%egadores las ignoran com)letamente ( muestran el te$to con la <uente @ue utili>an.

(29)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS, TNL

6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

0tributo face

4ene el ti)o de letra. Este atributo es inter)retado )or %ersiones de /etsca)e a )artir de la ! ( de MSIE ! o su)eriores. 6tros na%egadores las ignoran com)letamente (

muestran el te$to con la <uente @ue utili>an.

Color, tipo de letra y tama:o

<ont <aceQPComic Sans MS,arial,%erdanaPOEste te$to tiene otra ti)ogra<&aK<ontO

(30)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS, TNL

6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

0tributo size

4ene el tamaZo de la letra. Este tamaZo )uede ser absoluto o relati%o.Si Aablamos en tGrminos absolutos, e$isten  ni%eles de tamaZo distintos numerados de 1 a  )or orden creciente. Elegiremos )or tanto un %alor si>eQP1P )ara la letra m"s )e@ueZa o si>eQPP )ara la m"s grande.

<ont si>eQ*OEste te$to es tamaZo *K<ontO <ont si>eQ12OEste te$to es tamaZo 12K<ontO

(31)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS,

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

0tributo color

El color del te$to )uede ser denido mediante el atributo color. Cada color es a su %e> denido )or un nmero Ae$adecimal @ue esta com)uesto a su %e> de tres )artes. Cada una de estas )artes re)resenta la contribución del ro'o, %erde ( a>ul al color en cuestion.

<ont colorQPredPOEste te$to est" en ro'oK<ontO

(32)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS, TNL

6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

;ara indicarle al na%egador @ue @ueremos )oner ese te$to en un )"rra<o, debemos escribirlo entre las eti@uetas )O ( su cierre K)O.

s& el te$to @uedar" dentro de un )"rra<o, se)arado )or un es)acio en blanco )or encima ( uno )or aba'o.

El te$to del )"rra<o lo )uedes alinear utili>ando la eti@ueta align utili>ando los

)ar"metros ^center` B)ara alinearlo al centroF, ^rigAt` B)ara alinearlo a la derecAaF, ^le<t` B)ara alinearlo a la i>@uierdaF ( ^'usti<(` B)ara 'usticar el te$toF.

n e'em)lo de esta eti@ueta con sus res)ecti%os )ar"metros es el siguiente#

5. ormato ?arrafos

) alignQPcenterPOEste te$to se alinear" al centroK)O ) alignQPrigAtPOEste te$to se alinear" a la derecAaK)O ) alignQPle<tPOEste te$to se alinear" a la i>@uierdaK)O

(33)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS, TNL

6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

?árrafos saltos de lOnea

) O Este te$to estar" en la )rimera labrKO Este te$to estar" en el centro brKO

Este te$to estara a lo ultimoK)O

E$isten dos eti@uetas )ara indicar @ue @ueremos Aacer un salto de l&nea normal. Son las eti@uetas brO ( brKO ambas son inter)retadas igual )or el na%egador. Esta eti@ueta no Aace <alta abrirla ( cerrarla, sólo con escribirla el na%egador (a la inter)reta.

(34)

CTI8I44 1# +65MT6

lementos básicos del lenguaje de marcas, tales como" te%to, NOnculos, listas, tablas.

?ractica" ormato #

)ractica]1]1]<ormato]te$to.Atml

)

Andicaciones"

Elaborar un documento HTML en @ue se inclu(a#

Encabe>ados BA1  AF  Te$to tamaZo B17*F

Estilos de te$to Bnormal, negrita, subra(ado, cursi%a, sub&ndice, su)er&ndiceF ;"rra<os alineados B 3usticado, Centro, derecAa e i>@uierdaF

%tra"

gregar al menos tres )"rra<os de te$to con ti)os distintos de estilo,

colores, ti)os de letra, alineación etc.

(35)

(36)

(37)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS,

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

5. Tablas

na tabla en Atml %iene marcada )or las eti@uetas tableO KtableO. Entre esas

dos eti@uetas deniremos la tabla, las celdas @ue @ueremos, las columnas ( las

caracter&sticas de cada uno de estos )ar"metros. ;ero %amos a em)e>ar

e$)lic"ndote la eti@ueta tableO.

Ya Aemos dicAo @ue esta eti@ueta nos indica @ue em)ie>a una tabla, )ero

)odemos )redenir caracter&sticas de esa tabla ;or su)uesto @ue s&. na tabla

admite mucAos )ar"metros. /osotros %amos a e$)licarte los )rinci)ales.

(38)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS,

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

!a tabla" -table

Como (a ocurre con la eti@ueta bod(, a una tabla tambiGn lo )odemos denir el

<ondo de la misma. Esto lo )odemos conseguir con el )ar"metro PbgcolorP, @ue nos

)ondr" un color de <ondo, o PbacgroundP )ara )oner una imagen de <ondo.

5ecuerda @ue si la imagen es m"s )e@ueZa @ue la tabla, Gsta se re)etir" tanto a lo

ancAo como a lo largo.

table ?idtAQP199:P borderQP1P bordercolorQP9999++P cells)acingQP9P

cell)addingQP9PO

trO

tdOAolaaKtdO

tdOAolaa2KtdO

KtrO

KtableO

(39)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LIST

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

Tablas

!as las" -tr

Como Aemos %isto en el encabe>ado las las se escriben gracias a las eti@uetas trO con su corres)ondiente cierre KtrO. El contenido de las columnas @ue est"n dentro de la la lo )odemos al&near tanto Aori>ontal como %erticalmente.

;ara alinearlo %erticalmente utili>aremos el atributo P%alignP )ara )oder alinearlo arriba de la celda BPto)PF, en el centro BPmiddlePF o deba'o BPbottomPF.

;ara alinearlo Aori>ontalmente utili>aremos el atributo PalignP. Con este atributo )odremos alinear el contenido de las celdas en el centro BPcenterPF, a la i>@uierda BPle<tPF, a la derecAa BPrigAtPF o 'usticado BP'usti<(PF.

;or su)uesto a las las tambiGn les )odemos denir el color de <ondo BPbgcolorPF ( el color del borde BPbordercolorPF.

(40)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

Tablas

!as celdas -td

Las celdas @ue %an dentro de cada la las tenemos @ue escribirlas con la eti@ueta tdO ( su corres)ondiente cierre KtdO.

l igual @ue en las las, en las celdas )odemos denir el la alineación del contenido @ue est" dentro con los atributos P%alignP ( PalignP.

Las celdas )oseen unos atributos @ue nos a(udan a )oder agru)ar tantas celdas o tantas columnas como indi@uemos en Gl. ;ara agru)ar celdas utili>ar&amos el atributo Pcols)anP ( )ara agru)ar celdas el atributo Pro?s)anP.

;or e'em)lo, )ara agru)ar en una celda 2 columnas tenemos @ue escribir# td cols)anQP2POKtdO. Y )ara agru)ar dos las, la indicación ser&a la siguiente# td ro?s)anQ P2POKtdO.

(41)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

(42)

CTI8I44 2# TNLS Y LISTS 

E3EM;L6

table borderQP1)$PO

trO

tdO/ombreKtdO

tdO)ellidoKtdO

KtrO

trO

tdO;edroKtdO

tdO0arciaKtdO

KtrO

KtableO

table borderQP!)$P

bordercolorQP99UU++PO

trO

tdONordeKtdO

tdO! )i$elsKtdO

KtrO

KtableO

(43)

CTI8I44 2# TNLS Y LISTS 

E3EM;L6

table borderQP1)$P bordercolorQP!!!!!!P cell)addingQP29)$PO trO tA bgcolorQPCCCCCCPO/ombreKtAO tA bgcolorQPCCCCCCPO)ellidoKtAO KtrO trO tdO;edroKtdO tdO0arciaKtdO KtrO KtableO

table borderQP1)$P cells)acingQP1)$P bgcolorQP!!UU++PO trO tA bordercolorQP99!!++P bgcolorQPPO/ombreKtAO tA bordercolorQP99!!++P bgcolorQPPO)ellidoKtAO KtrO trO td bgcolorQPCCCCCCPO;edroKtdO td bgcolorQPCCCCCCPO0arciaKtdO KtrO KtableO

(44)

CTI8I44 2# TNLS Y LISTS 

E3EM;L6

(45)

CTI8I44 2# TNLS Y LISTS 

E3EM;L6

(46)

CTI8I44 2# TNLS Y LISTS

lementos básicos del lenguaje de marcas, tales como" te%to, NOnculos, listas, tablas.

?ractica" Tablas y listas #

)ractica]1]2]tablas](]listas.Atml

)

Andicaciones"

Elaborar un documento HTML en @ue se inclu(a#

4istintos <ormatos de tablas 4istintos <ormatos de listas

%tra"

gregar 2 tablas con <ormato de relleno, colores de <uentes ( ti)os de

letra distintos.

(47)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

!istas no ordenadas" -ul

Las listas no ordenadas %an dentro de la eti@ueta

ulO ( de su cierre KulO. Cada )unto @ue @ueramos aZadir a la lista, lo Aaremos

dentro de la eti@ueta liO ( su cierre.

ulO

li t()eQPcirclePOEsto es un ti)o de )unto.KliO

li t()eQPs@uarePOEste es otro.KliO

li t()eQPdiscPOY este es otro di<erente.KliO

KulO

(48)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

!istas ordenadas" -ol

Las listas ordenadas %an enmarcadas dentro de las eti@uetas olO KolO. Cada

)unto de la lista se escribe con la misma eti@ueta @ue en las no numeradas# liO.

;ero al ser listas ordenadas los s&mbolos ser"n nmeros ( Gstos se ir"n generando

autom"ticamente )or orden, con<orme escribamos nue%os )untos.

En las listas ordenadas )odemos Aacer @ue el )rimer )unto comience con el

nmero @ue nosotros @ueramos. Lo conseguiremos gracias al atributo ^%alue`. Los

siguientes )untos @ue escribamos se generar"n autom"ticamente )or orden,

)artiendo de ese nmero.

olO

li %alueQP29POEste ser" el nmero 29. KliO

liOEste ser" el 21. KliO

(49)

CTI8I44 2# TNLS Y LISTS 

E3EM;L6

(50)

CTI8I44 2# TNLS Y LISTS 

E3EM;L6

(51)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LIST

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

*. =bjetos

Ansertar objetos" <object> y <param>

La eti@ueta <object> )ermite insertar cual@uier ti)o de documentos Bno solamente de

te$toF dentro de un documento Atml. ;ara )oder mostrar esos arcAi%os, el na%egador suele necesitar )lug7ins. lgunos ti)os de documentos necesitan in<ormación adicional @ue se )ro)orciona mediante la eti@ueta <param>.

jemplos de inserción de objetos Ansertar una página web

Se )uede insertar una )"gina ?eb en una )"gina ?eb mediante la eti@ueta <object>, como muestra

(52)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LIST

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

*. =bjetos

i<rame srcQPe'em)lo]i<rame.AtmlPO Ki<rameO

(53)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS,

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

*. =bjetos

jemplos de inserción de objetos Ansertar una página web

Se )uede insertar una )"gina ?eb en una )"gina ?eb mediante la eti@ueta <object>, como

muestra el siguiente e'em)lo. ob'ect t()eQPte$tKAtmlP dataQ^ob'eto])agina.AtmlP

st(leQP?idtA# *99)$W AeigAt#299)$WP O E5565 Bno )uede mostrarse el ob'etoF Kob'ectO

(54)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS,

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

*. =bjetos

i<rame ?idtAQP*2P AeigAtQP!9P

srcQPAtt)#KKma)s.google.esKma)s<Q@fam)WsourceQs]@fam)W AlQesfam)WgeocodeQfam)W@Qiesabastosfam)W ieQT+fam)WcidQ11211*922--U*2fam)W sQ5Ts3@62733-!5/]Na;Y@sXA(1U7rr4?fam)W llQ!U.*1*,79.!229*fam)Ws)nQ9.92!1,9.9!-*fam)W >Q1*fam)Wi?locQfam)Wout)utQembedPO

jemplos de inserción de objetos Ansertar un mapa de google

-object type12te%t/html2 data12http"//maps.google.es/mapsQ f1RSampsource1s6RSamp hl1esSampgeocode1SampR1iesUabastosSamp ie1'TVSampcid177547+74*35+5+88VW*5Samp s100GTsXR=5BXX89GD6@a?>RsJhy7WBFrr<wSamp ll19W.*447*V,B3.9V553*Sampspn13.3597VV,3.398*4VSamp z17*Sampiwloc10Sampoutput1embed2 style12width" *5+p% height"9+3p%2  GG=G #no puede mostrarse el objeto) -/object

(55)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS,

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

*. =bjetos

ob'ect

t()eQPa))licationK)d<P

dataQP)d<K)rogramacion]?eb.)d<P st(leQP?idtA# *99)$W AeigAt# 9)$WP O E5565 Bno )uede mostrarse el ob'etoF Kob'ectO

Ansertar un archiNo ?<

Se )uede insertar un arcAi%o ;4+ en cual@uier )"gina ?eb, como muestra el siguiente e'em)lo. ;ara insertar otro arcAi%o ;4+ Aabr&a @ue indicar la 5I del arcAi%o mediante el

(56)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S,

LISTS, TNLS, 6N3ET6S, IM[0E/ES Y

;LICCI6/ES.

*. =bjetos

i<rame classQP(outube7)la(erP t()eQPte$tKAtmlP ?idtAQP!*9P AeigAtQP299P srcQPAtt)#KK???.(outube.comKembedKi)UT/C0/4P <rameborderQP9POKi<rameO

Ansertar un NOdeo de >ouTube

Los %&deos de YouTube est"n en <ormato +lasA, )or lo @ue se )ueden insertar en una )"gina ?eb mediante la eti@ueta <object>, como muestra el siguiente e'em)lo. ;ara insertar otro

%&deo Aabr&a @ue sustituir el código del %&deo en el atributo data Ben el e'em)lo, el código del %&deo es NYLBt9EzTpwF.

(57)

CTI8I44 !# 6N3ET6S

lementos básicos del lenguaje de marcas, tale s como" te%to, NOnculos, listas, tablas. ?ractica" Tablas y listas #)ractica]1]!]ob'etos.Atml)

Andicaciones"Elaborar un documento HTML en @ue se inclu(a los siguientes ob'etos#

1. Embeber una )agina con I<rame. 2. Ma)a de google con I<rame ( ob'et !. Embeber un arcAi%o )d<

*. Embeber un %ideo de YouTube

%tra" gregar 2 ob'etos m"s. E'em)los

5e)roductor de audio

(58)

(59)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LIST

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

8. Amágenes

Atributos de "#(

Los atributos de la imagen pueden ser los siguientes)

AL!*+Texto que aparece al situar el cursor sobre la imagen,

!ambi-n muestra este mismo teto en caso de ue el na%egador no cargue la imagen.

AL"(* os indica la posición de la imagen respecto del teto. Despu-s del signo igual0 pueden ir los %alores) !12 0 #"DDLE0 $1!!1#0 LE3! y 4"(H! .

5"D!H*670 HE"(!H*877) "ndican la anc9ura y altura de la imagen en píels0 en este caso 67877 píels. $14DE4*: A;ade un borde0 a modo de marco0 a la imagen. En este caso de : píels.

(60)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

+. Amágenes

ncAura del borde border7?idtAD

Color del borde border7colorD

La propiedad border7color define el color del borde. Los %alores de esta propiedad son los %alores de color normales0 por eemplo0 +=8:?@+ Ben notación 9eadecimalC0 +rgbB8:08:08:C+ Ben notación 4($C o +yello+ Bpor nombre del colorC.

(61)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

+. Amágenes

stilo de borde ZborderBstyle[

Se )uede elegir entre di<erentes estilos de borde. M"s aba'o se

muestran  estilos de borde segn los inter)reta Internet E$)lorer .. Todos los e'em)los se muestran con el %alor del color a PoroP ( el

%alor de la ancAura a PtAicP, )ero se )ueden mostrar, )or su)uesto, en otros colores ( grosores

img srcQPimagenesK)aisa'e*.')gP ?idtAQP2UP AeigAtQP1U*P borderQPP st(leQPborder7color#U99W border7st(le#dasAedP KO

(62)

2. ELEME/T6S N[SIC6S# TEXT6, 8_/CL6S, LISTS

TNLS, 6N3ET6S, IM[0E/ES Y ;LICCI6/ES.

+. Amágenes

img srcQP)aisa'e*.')gP ?idtAQP2UP AeigAtQP1U*P borderQPP alingQPbottomP %s)aceQP19P As)aceQP19P altQPla )la(aP KO

br KO

img srcQP)aisa'e2.')gP ?idtAQP2UP AeigAtQP1U*P borderQPP %s)aceQP19P As)aceQP19P altQPCascadaP st(leQPborder7color#UC9W border7st(le#dasAedW aling#middleP KO

br KO

img srcQP)aisa'e1.')gP ?idtAQP*UP AeigAtQP!22P borderQPP alingQPbottomP %s)aceQP19P As)aceQP19P altQPel )uenteP st(leQPborder7color#9U+W border7 st(le#groo%eP KO

(63)

(64)

2. +65ML5I6S.

Los <ormularios interacti%os )ermiten a los

autores de )"ginas eb )oner elementos

interacti%os en sus )"ginas, )or e'em)lo, )ara

recibir mensa'es de sus lectores, de <orma

similar a las cartas de res)uestas @ue se

encuentra en algunas re%istas.

El lector escribe la in<ormación rellenando

cam)os o Aaciendo clic sobre botones, ( luego

)resiona un botón de en%&o )ara en%iarla a una

dirección 5L@ue se suele dirigir a una

dirección de correo electrónico o a un scri)t

din"mico eb como ;H;, S; o C0I.

(65)

2. +65ML5I6S.

!a etiRueta =G

Los <ormularios est"n delimitados con la eti@ueta -=G ... -/=G, @ue )ermite reunir %arios elementos de <ormulario, como botones ( casillas de te$to ( @ue debe )oseer los

siguientes atributos#

TH=< indica cómo se en%iar"n las res)uestas

P;6STP es el %alor @ue en%&a los datos al agente de )rocesamiento almacen"ndolos en el cuer)o del <ormulario, en tanto @ue P0ETP en%&a los datos agreg"ndolos a la dirección 5L (

se)ar"ndolos de la dirección con un signo de interrogación B)ara a)render m"s sobre los mGtodos ;6ST ( 0ET.

0CTA=D indica la dirección a la @ue se en%iar" la in<ormación Bun scri)t C0I o dirección de correo

electrónico Bmailto#dirección]de]correo]ehe@ui)oFF

n atributo o)cional de la eti@ueta +65M es E!T#E, @ue es)ecica cómo se codican los datos

del <ormulario. 4e cual@uier <orma, esto no necesita es)ecicarse, (a @ue el %alor )redeterminado Ba))licationK$7???7<orm7urlencodedF es el nico %alor %"lido. El atributo o)cional A!!E#T se usa

(66)

2. +65ML5I6S.

!a etiRueta =G

Esta es la sintais para la

Esta es la sintais para la etiueta 314#)etiueta 314#)

<FORM METHOD="POST" o

<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urleno!e!""GET" ACTION="url" ENCTYPE="x-www-form-urleno!e!" ### ###

<$FORM

Auí 9ay alg

Auí 9ay algunos eemplos de lunos eemplos de las etiuetas 314#as etiuetas 314#))

<FORM

<FORM METHOD=POST ACTION="m%&l'o(we)m%*'er+ommen'%m%r,METHOD=POST ACTION="m%&l'o(we)m%*'er+ommen'%m%r,e#ne'"e#ne'"

<FORM

(67)

2. +65ML5I6S.

4entro de la eti@ueta +65M

La eti@ueta

$%&M$%&M

acta como una es)ecie de contenedor )ara almacenar

elementos @ue )ermiten al usuario seleccionar o introducir datos. Todos los datos

se en%iar"n a la dirección 5L indicada en el atributo

A!T'% A!T'%

de la eti@ueta

$%&M$%&M

,,

)or el mGtodo indicado en el atributo

METH%(METH%(

..

Se )uede insertar cual@uier elemento HTML en una eti@ueta

$%&M$%&M

Bcomo te$to,

botones, tablas ( enlacesF, )ero los elementos interacti%os son los m"s

interesantes. Estos elementos interacti%os son#



La eti@ueta

'#)T '#)T

# Todos los botones ( casillas de te$to



La eti@ueta

TEXTA&EATEXTA&EA

# una casilla de te$to

(68)

2. +65ML5I6S.

nNOo de datos

Cuando se en%&a un <ormulario BAaciendo clic en el botón de

Cuando se en%&a un <ormulario BAaciendo clic en el botón de en%&oF, los datos del

en%&oF, los datos del

<ormulario se en%&an a un scri)t C0I ba'o la <

<ormulario se en%&an a un scri)t C0I ba'o la <orma de

orma de

pares nombre+valor pares nombre+valor

, es decir

con'untos de datos re)resentados )or el nombre del elemento

con'untos de datos re)resentados )or el nombre del elemento <ormulario, un signo

<ormulario, un signo

igual BPQPF ( luego el

igual BPQPF ( luego el %alor asociado. Estos )ares nombr

%alor asociado. Estos )ares nombreK%alor se se)aran unos de

eK%alor se se)aran unos de

otros mediante el s&mbolo de unión BPfPF. ;or lo tanto, los datos @ue se en%&an

otros mediante el s&mbolo de unión BPfPF. ;or lo tanto, los datos @ue se en%&an al

al

scri)t se %er"n as&#

cam)o1Q%alor1feld2WQ%alor2feld!WQ%alor!

Con el mGtodo 0ET Ben%iar los datos mediante una dirección

Con el mGtodo 0ET Ben%iar los datos mediante una dirección 5L

5L

F, la 5L ser" una

cadena como la siguiente#

Att)#KKes.ios

(69)

2. +65ML5I6S.

La eti@ueta I/;T

La eti@ueta

'#)T

es una eti@ueta esencial )ara los <ormularios, (a @ue se usa )ara

crear mucAos elementos ^interacti%os`. La sinta$is de esta eti@ueta es la siguiente#

I/;T t()eQP/ombre de cam)oP %alueQP8alor )redeterminadoP nameQP/ombre

de elementoPOEl atributo

name

es esencial, (a @ue )ermite al scri)t C0I reconocer

@uG cam)o est" asociado con un )ar nombreK%alor, lo @ue signica @ue el nombre

del cam)o estar" seguido de un signo igual BPQPF seguido de un %alor @ue el

usuario introdu'o, o si el usuario no introdu'o ningn %alor, )or el %alor

(70)

2. +65ML5I6S.

La eti@ueta I/;T

El atributo t,pe se usa )ara es)ecicar @uG ti)o de elemento se re)resenta con la eti@ueta '#)T .

Estos son los %alores )osibles#

chec&bo%# Las casillas de elección )ueden ado)tar uno de dos estados# cAeced BseleccionadoF o uncAeced Bno seleccionadoF. Cuando la casilla es seleccionada, el )ar nombreK%alor se en%&a al C0I.

hidden# Este cam)o, @ue el na%egador no muestra, es )ara denir una conguración nica @ue se

en%iar" al C0I como )ar nombreK%alor.

le# n cam)o @ue )ermite al usuario es)ecicar una ruta de arcAi%o @ue lle%a al arcAi%o @ue se

en%iar" con el <ormulario. Los ti)os de arcAi%o @ue )ueden ser en%iados deben es)ecicarse utili>ando el atributo A!!E#T de la eti@ueta $%&M.

(71)

2. +65ML5I6S.

La eti@ueta I/;T

image# n bot-n de env.o personali/ado @ue a)arece cuando se ubica una

imagen en la ubicación denida )or el atributo *&!.

password# na casilla de te0to donde los caracteres escritos a)arecen como

asteriscos )ara camuar el te$to de entrada.

radio# n bot-n @ue )ermite al usuario elegir entre %arias o)ciones. Cada uno

de estos botones debe tener el mismo atributo name. El )ar nombreK%alor del

botón radio seleccionado se en%iar" al C0I. l a)licar el atributo c1ec2ed )ara

(72)

2. +65ML5I6S.

La eti@ueta I/;T

reset# n bot-n de restauraci-n )ara @uitar todos los elementos en el

<ormulario ( restablecer sus %alores )redeterminados.

submit# n bot-n de env.o )ara en%iar el <ormulario. El te$to en el botón )uede denirse usando el atributo value.

te%t# na casilla de te0to )ara escribir una l&nea de te$to. El tamaZo de la casilla

)uede denirse usando el atributo si/e ( la e$tensión m"$ima del te$to con el

(73)

2. +65ML5I6S.

La eti@ueta TEXT5E

La eti@ueta

TEXTA&EA

se usa )ara denir un cuadro de te$to m"s grande @ue la

l&nea sim)le )ro)uesta )or la eti@ueta

'#)T

. Esta eti@ueta tiene los siguientes

atributos#

cols

# re)resenta el nmero de caracteres @ue )uede contener un l&nea

rows

# re)resenta el nmero de l&neas

name

# re)resenta el nombre asociado con el cuadro de te$to, @ue )ermite su

identicación en el )ar nombreK%alor.

readonly

# im)ide @ue el usuario modi@ue el te$to )redeterminado en el cam)o

Nalue

# re)resenta el %alor )redeterminado @ue se en%iar" al scri)t si el usuario

(74)

2. +65ML5I6S.

La eti@ueta SELECT

_{La eti@ueta}

_*ELE!T

_{sir%e )ara crear una lista des)legable de elementos}

Bes)ecicados )or las eti@uetas

%#T'%

dentro de ellaF. Los atributos de esta

eti@ueta son#

name

# name# re)resenta el nombre asociado con la casilla de te$to, @ue )ermite

su identicación en el )ar nombreK%alor.

disabled

# crea un lista desacti%ada, @ue a)arece atenuada

size

# re)resenta el nmero de l&neas de la lista Beste %alor )uede ser m"s grande

@ue el nmero de elementos reales de la listaF.

(75)

2. +65ML5I6S.

La eti@ueta SELECT

La eti@ueta

*ELE!T

sir%e )ara crear una lista des)legable de elementos

Bes)ecicados )or las eti@uetas

%#T'%

dentro de ellaF. Los atributos de esta

eti@ueta son#

name

# name# re)resenta el nombre asociado con la casilla de te$to, @ue )ermite

su identicación en el )ar nombreK%alor.

disabled

# crea un lista desacti%ada, @ue a)arece atenuada

size

# re)resenta el nmero de l&neas de la lista Beste %alor )uede ser m"s grande

@ue el nmero de elementos reales de la listaF.

(76)

CTI8I44 * +65ML5I6S

+65M metAodQ)ost actionQP<ormulario.AtmlPO 5egistro de un usuario

TNLE ?idtAQP!*-P N654E5Q9O T5O

T4 ?idtAQP1*9PO)ellidoKT4O T4 ?idtAQP1U-PO

I/;T t()eQte$t nameQPa)ellidoPO KT4O

KT5O T5O

T4O/ombreKT4O T4O

I/;T t()eQte$t nameQPnombrePO KT4O

KT5O T5O

T4O0GneroKT4O T4O

Masculino# I/;T t()eQradio nameQPgGneroP %alueQPMPO brO+emenino# I/;T t()eQradio nameQPgGneroP %alueQP+PO KT4O KT5O T5O T4O6cu)aciónKT4O T4O SELECT nameQPocu)aciónPO 6;TI6/ 8LEQP)ro<esorPO;ro<esorK6;TI6/O 6;TI6/ 8LEQPestudiantePOEstudianteK6;TI6/O 6;TI6/ 8LEQPingenieroPOIngenieroK6;TI6/O 6;TI6/ 8LEQP'ubiladoPO3ubiladoK6;TI6/O 6;TI6/ 8LEQPotroPO6troK6;TI6/O KSELECTO KT4O KT5O T5O T4OComentariosKT4O T4O

TEXT5E ro?sQP!P nameQPcomentariosPO Escriba a@u& sus comentariosKTEXT5EO KT4O

KT5O T5O

T4 C6LS;/Q2O

En%iar I/;T t()eQPsubmitP %alueQPEn%iarPO KT4O

(77)

(78)

2. +65ML5I6S.

tributos de <ormulario ( entradas

En%iar En%iar

(79)

2. +65ML5I6S.

En%iar En%iar