Scribd Logo
Carica

Benvenuto in Scribd!

  • HTML

    Caricato da

    Anonymous 9O6k0C
    12 visualizzazioni15 pagine

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    12 visualizzazioni15 pagine

    HTML

    Caricato da

    Anonymous 9O6k0C

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 15

    Curso de PHP 5 Apndice El lenguaje HTML

    Teora: El lenguaje HTML

    1 - Introduccin: el lenguaje HTML


    El lenguaje HTML (HyperText Markup Language) ha sido diseado para la publicacin de contenidos en Internet El lenguaje dispone de la sintaxis necesaria para !or"atear textos# incluir i"$genes y ani"aciones# as% co"o para enla&ar con otros contenidos del "is"o o de otro ser'idor Es un lenguaje interpretado por cada 'isuali&ador cliente (na'egador)# de tal !or"a (ue la apariencia de las p$ginas puede 'ariar entre di!erentes na'egadores# 'ersiones y plata!or"as )or eje"plo# existen algunos (ue slo "uestran texto# co"o Lynx )or esto# sie"pre debe"os tener cuidado# cuando disea"os nuestras p$ginas# para (ue otras personas puedan 'erlas correcta"ente En este ap*ndice se "uestra la sintaxis co"patible de "ayor utili&acin re!erida al est$ndar HTML + , -i el alu"no o alu"na desea obtener "ayores conoci"iento del te"a o los necesita# les reco"enda"os "atricularse en el curso de HTML del proyecto ME.T/0 Ta"bi*n he"os incluido re!erencias interesantes a p$ginas web sobre HTML en el apartado Ms Informacin de este ap*ndice

    Estructura del Lenguaje HTML


    El lenguaje HTML est$ estructurado "ediante eti(uetas (tags) Estas eti(uetas nor"al"ente est$n e"parejadas y encierran un contenido 1e esta "anera# "odi!ican la cualidad o !or"ato del contenido "ostrado en la pantalla del na'egador 2 continuacin# se o!rece un es(ue"a ilustrati'o de su estructura3 <XXX> Inicio de la eti(ueta 444 5/.TE.I1/ </XXX> 6inal de la eti(ueta 444 Las eti(uetas pueden ser apiladas ordenada"ente En este caso el es(ue"a (uedar%a as%3 <XXX> <YYY> </YYY> </XXX> .ota3 2lgunas eti(uetas slo est$n integradas por la eti(ueta inicial y# por lo tanto# no se cierran )or eje"plo# la eti(ueta <HR># (ue dibuja una l%nea hori&ontal co"pleta# slo tiene esta eti(ueta inicial Las letras de las eti(uetas pueden ser "ay7sculas o "in7sculas indistinta"ente8 para "ayor claridad# en el curso se escriben sie"pre en "ay7sculas 2si"is"o# los propios na'egadores# 1 de 16

    Curso de PHP 5 Apndice El lenguaje HTML ade"$s de soportar las eti(uetas usuales del lenguaje HTML# disponen de eti(uetas extras (ue aaden nue'as !uncionalidades a las anteriores# si bien nor"al"ente son inco"patibles entre los di!erentes na'egadores )or esto# a(u% slo se "ostrar$n las eti(uetas est$ndares b$sicas Todo !ichero HTML e"pie&a con la eti(ueta <HTML> para indicar el inicio del docu"ento y acaba con la eti(ueta </HTML> para indicar el !inal del "is"o El docu"ento en s% est$ di'idido en 9 partes3 El encabe&ado# encerrado por las eti(uetas3 <HEAD> </HEAD> El cuerpo# encerrado por las eti(uetas3 <BODY> </BODY> En el encabe&ado se encuentra toda la in!or"acin del docu"ento (ue no se 'isuali&a en el $rea principal del na'egador# co"o el t%tulo de la p$gina# contenido entre las eti(uetas <TITLE> </TITLE> 1entro del cuerpo se halla todo el contenido (ue se "uestra en el $rea principal del na'egador# co"o texto# i"$genes# etc )or lo tanto# la estructura b$sica de una p$gina se escribe de la siguiente "anera3 <HTML> <HEAD> <TITLE>T%tulo de la p$gina</TITLE> </HEAD> <BODY> 2(u% aparecen todas las eti(uetas y contenidos (ue se 'isuali&an en el na'egador </BODY> </HTML>

    2 - Instrucciones bsicas
    2 continuacin "ostra"os una serie de instrucciones b$sicas y las "$s co"unes In!or"a"os al lector de (ue el lenguaje HTML no interpreta los espacios en blanco o los saltos de l%nea del docu"ento !uente# por lo cual existen caracteres especiales al e!ecto 9 : 6or"ateo de caracteres y blo(ues <B>Te !o</B> <I>Texto</I> BOLD3 "uestra el contenido ;Texto< en negrita ITALIC3 "uestra el contenido ;Texto< en cursi'a

    2 de 16

    Curso de PHP 5 Apndice El lenguaje HTML )re!or"ateado3 ;Texto< aparecer$ co"o si hubiese sido escrito por una "$(uina de escribir con una !uente de espacio !ijo (tipo Courier) respetando espacios y saltos de l%nea 5ita Textual3 destaca una cita dentro del texto general aadiendo "$rgenes i&(uierdo y derecho -eparacin entre p$rra!os3 e!ect7a un salto de l%nea y deja una l%nea en blanco -alto de l%nea3 e!ect7a un salto de l%nea 7nica"ente ele"ento no se cierra (no existe =>?0@) Este

    <PRE>Texto</PRE>

    <BLOCKQUOTE> Texto </BLOCKQUOTE> <P>

    <BR>

    <HR> <ADDRESS>
    Nombre autor

    1ibuja una l%nea hori&ontal Este ele"ento no se cierra (no existe =>H0@) 2utor3 indica el no"bre del autor del docu"ento !or"ateando el texto en cursi'a y alineado a la i&(uierda 6or"ateo de texto "ediante cabeceras3 las eti(uetas =Hx@# con x desde : hasta A# "uestran di!erentes ta"aos de letras y un salto de l%nea 'ariable La cabecera tipo : es la "$s grande# decreciendo el ta"ao de la !uente al au"entar el n7"ero x

    </ADDRESS> <H4> Texto </H4>

    Cabecera

    9 : Listas3 Es interesante "ostrar contenidos en !or"a de lista Existen B tipos de lista# a saber <UL> <LI> )alabra : <LI> )alabra 9 <LI> )alabra B <LI> Etc*tera </UL> <OL> <LI> )alabra : <LI> )alabra 9 <LI> )alabra B <LI> Etc*tera </OL> <DL> <DT> T*r"ino : <DD> 1e! t*r"ino : Lis!a no numerada (unordered list)3 presenta una lista sin (ue sus ele"entos est*n precedidos de un n7"ero secuencial

    Lis!a ordenada (ordered list)3 presenta una lista cuyos ele"entos est$n precedidos de un n7"ero secuencial

    Lis!a de definicin (de!inition list)3 se utili&a para glosarios o de!iniciones de t*r"inos 2 di!erencia de las 9 anteriores# a(u% cada

    3 de 16

    Curso de PHP 5 Apndice El lenguaje HTML blo(ue de texto est$ !or"ado por 9 eti(uetas <DT> (Definition Term)# (ue indica la palabra (ue desea"os de!inir# y <DD> (Definition Definition)# (ue es la de!inicin propia"ente dicha

    <DT> T*r"ino 9 <DD> 1e! t*r"ino 9 </DL>

    -e pueden anidar unas listas dentro de otras .ota3 -i desea"os incluir un co"entario dentro de la p$gina HTML# utili&are"os los dos s%"bolos3 =CD (para abrir el co"entario) y EE@ (para cerrarlo)

    3 - Enlaces y anclas
    El uso de enlaces es una de las caracter%sticas principales del lenguaje HTML Fstos han pro'ocado la r$pida di!usin del lenguaje# ya (ue per"iten conectar contenidos del "is"o o de di!erentes ser'idores de "anera "uy sencilla e intuiti'a Gsual"ente# los enlaces tienen la siguiente estructura3 <A HREF="xxx"> yyy </A> donde HxxxI es el destino del enlace e HyyyI representa el indicador de enlace (un texto y>o una i"agen) 1istingui"os B usos de los enlaces3 Enlaces den!ro de una misma pgina (ta"bi*n lla"ados JanclasJ) utili&ados para poder saltar dentro de una "is"a p$gina La pri"era l%nea es la "arca en la p$gina (ta"bi*n lla"ada ancla) e indica el sitio exacto adonde se desea saltar8 la segunda l%nea es el enlace# (ue nos lle'ar$ al ancla Enlaces a o!ras pginas utili&ados para poder ;enla&ar< p$ginas del "is"o o de di!erentes ser'idores El pri"er eje"plo es un enlace a otra p$gina del "is"o ser'idor En el segundo# enla&a"os una p$gina del "is"o ser'idor "ostrando una deter"inada posicin de la p$gina (ancla) En el 7lti"o eje"plo enla&a"os a una p$gina de otro ser'idor

    <A NAME="m !" "> </A> <A HREF="#m !" "> </A>

    <A HREF="$ %&' ()*m"> YYY </A> <A HREF="$ %&' ()*m#m !" "> YYY </A> <A HREF=")**$+//,-m&'&-/$ %()*m" > YYY </A>

    4 de 16

    Curso de PHP 5 Apndice El lenguaje HTML


    <A HREF="m &.*-+/m &.0,-m&'&-"> YYY </A>

    Enlaces a una direccin e"mail usados para !acilitar el en'%o de correo electrnico

    4 - Incluir i genes
    La !or"a de incluir i"$genes en nuestros docu"entos HTML es "uy parecida a la utili&ada para incluir enlaces En lugar de indicar la p$gina a la (ue (uere"os saltar# establece"os el no"bre del !ichero (ue contiene la i"agen (ue desea"os "ostrar La estructura de la eti(ueta es la siguiente3 <IM1 SRC="&m %/'(%&2" ALT=",/3"!&$"&4'" ALI1N= .&'/ m&/'*- 5IDTH= '")- HEI1HT= .*-> 2 continuacin# explica"os la !uncin de los atributos de la eti(ueta IMK3 Indica el ca"ino y el no"bre de !ichero donde se encuentra la i"agen (ue se (uiere incluir Fsta puede residir en el "is"o o en otro ser'idor 2de"$s# este atributo es el 7nico (ue sie"pre debe aparecer en la eti(ueta -e utili&a para "ostrar un texto e"ergente cada 'e& (ue se coloca sobre la i"agen el puntero del ratn -e e"plea para alinear la i"agen en la p$gina HTML Los 'alores posibles son3 TOP# MIDDLE# BOTTOM# RI1HT y LEFT -e usan para "odi!icar el ta"ao de la i"agen en la p$gina HTML El ta"ao se expresa en pixels (por eje"plo# 5IDTH = 677) o con un porcentaje del ta"ao de la i"agen (por eje"plo# 5IDTH = 879) -i no se incluyen estos atributos# la i"agen aparece con las "is"as di"ensiones con las (ue ha sido creada

    SRC

    ALT

    ALI1N

    5IDTH HEI1HT

    .ota3 Esta eti(ueta no se cierra Es decir# no existe =>IMK@

    ! - "tras eti#uetas de as$ecto


    En este apartado inclui"os una serie de eti(uetas (ue ca"bian la presentacin de la p$gina HTML L : 6ondos )ode"os ca"biar el !ondo de nuestra p$gina de dos "aneras di!erentes3 con un color uni!or"e o "ediante una i"agen t$pi& Esto se consigue introduciendo un nue'o atributo en la eti(ueta BODY# (ue ya he"os 'isto anterior"ente# de esta "anera3

    5 de 16

    Curso de PHP 5 Apndice El lenguaje HTML Mediante el "odi!icador B1COLOR de la eti(ueta BODY elegi"os el color de !ondo de la p$gina #XXYY:: se re!iere al color en !or"ato hexadeci"al Es posible (ue# al ca"biar el color por de!ecto del !ondo de la p$gina# sea necesario "odi!icar los colores de texto y de los enlaces para una correcta 'isuali&acin de los contenidos Los "odi!icadores son los siguientes3 TEXT E color del texto LINK E color de los enlaces ;LINK E color de los enlaces 'isitados ALINK E color de los enlaces acti'os (el (ue ad(uieren en el "o"ento de ser pulsados) El "odi!icador BACK1ROUND de la eti(ueta BODY se usa para incluir una i"agen de !ondo en la p$gina J2rchi'oJ hace re!erencia a una i"agen en !or"ato gi! o jpg (ue haya en el propio o en otro ser'idor 2de"$s# se pueden aadir todos los "odi!icadores 'istos en el "odo anterior para establecer los colores del texto y de los enlaces

    <BODY B1COLOR="#XXYY::" TEXT="#XXYY::" LINK="#XXYY::" ;LINK="#XXYY::" ALINK="#XXYY::">

    <BODY BACK1ROUND="A!")&<-">

    L 9 5aracter%sticas de la !uente de un texto )ara establecer las caracter%sticas de la !uente de un texto# usa"os la siguiente eti(ueta3 <FONT FACE="2=/'*/" SI:E="* m >-" COLOR="#XXYY::">T/x*-</FONT> donde los atributos son3 Mediante el "odi!icador FACE de la eti(ueta FONT elegi"os el tipo o tipos de !uente para el JTextoJ contenido entre la eti(ueta de inicio y de cierre Gsando este "odi!icador ca"bia"os el ta"ao de la !uente -e puede asignar un ta"ao de !uente absoluto de : a M (: es la "$s pe(uea) El ta"ao nor"al o base de la p$gina es el B 2de"$s# se puede ca"biar relati'a"ente respecto a este ta"ao nor"al escribiendo# por eje"plo# <FONT SI:E=?@> para au"entar un punto el ta"ao respecto al ta"ao base de la p$gina Incluso se puede ca"biar el tipo de !uente nor"al de todo el

    FACE

    SI:E

    6 de 16

    Curso de PHP 5 Apndice El lenguaje HTML docu"ento incluyendo al principio de la p$gina HTML (justo a continuacin de la eti(ueta BODY) la eti(ueta3 <BASEFONT SI:E=A> 2s% ca"biar%a"os la !uente por de!ecto de toda la p$gina a ta"ao L COLOR Mediante el "odi!icador COLOR selecciona"os el color de la !uente #XXYY:: se re!iere al color en !or"ato hexadeci"al

    L B 2lineacin de texto e i"$genes 0esulta "uy sencillo alinear cual(uier texto o i"agen incluidos en la p$gina HTML utili&ando las eti(uetas CENTER# LEFT# RI1HT El siguiente eje"plo alinea el contenido en el centro de la p$gina3 <CENTER>Texto o I"agen</CENTER> 2de"$s# para alinear i"$genes puede usarse el "odi!icador ALI1N de la eti(ueta IM1# co"o he"os indicado en el apartado anterior

    % - &reacin de tablas
    Es "uy 7til usar tablas para la distribucin y presentacin de contenidos dentro de una p$gina HTML El es(ue"a b$sico de una tabla es el siguiente3 <TABLE> Inicio de la tabla <TR> )ri"era !ila <TD> C-'*/'&,- </TD> )ri"era colu"na de la pri"era !ila <TD> C-'*/'&,- </TD> -egunda colu"na de la pri"era !ila </TR> 6inal de la pri"era !ila <TR> -egunda !ila <TD> C-'*/'&,- </TD> )ri"era colu"na de la segunda !ila <TD> C-'*/'&,- </TD> -egunda colu"na de la segunda !ila </TR> 6inal de la segunda !ila </TABLE> 6inal de la tabla Las eti(uetas necesarias para de!inir una tabla son las siguientes3 <TABLE BORDER=B-!,/ 5IDTH=. !%HEI1HT= '")B1COLOR=#XXYY:: CELLSPACIN1=3/$C"/., 3 CELLPADDIN1=3/$C"-'*> Indican el co"ien&o y !inal de una tabla Los atributos (ue se utili&an para "odi!icar la apariencia de la tabla son3 BORDER establece la anchura del borde de la tabla (BORDER=7 indica (ue la tabla no tiene bordes)

    7 de 16

    Curso de PHP 5 Apndice El lenguaje HTML 5IDTH# HEI1HT !ijan el largo y ancho de la tabla respecti'a"ente -e expresan en pixels o "ediante un porcentaje de la di"ensin de la pantalla B1COLOR establece el color de !ondo de la tabla -e expresa en !or"ato hexadeci"al F&. 3 </TABLE> CELLSPACIN1 !ija la separacin entre las celdas de la tabla -e expresa en pixels )or de!ecto# dicha separacin es de 9 pixels CELLPADDIN1 deter"ina la separacin entre el borde y el contenido dentro de cada celda -e expresa en pixels )or de!ecto# dicha separacin es de : pixel -ealan el inicio y el !inal de una !ila (table row) Hay (ue repetirlas tantas 'eces co"o !ilas desee"os obtener Establecen el inicio y el !inal de una celda (ue contiene texto# i"$genes# enlaces# otra tabla# etc Hay (ue repetirlas tantas 'eces co"o colu"nas desee"os obtener Los atributos (ue se usan son3 ALI1N establece el alinea"iento hori&ontal del contenido en la celda Los 'alores posibles son3 CENTER# RI1HT y LEFT ;ALI1N establece el alinea"iento 'ertical del contenido en la celda Los 'alores posibles son3 TOP# BOTTOM y MIDDLE COLSPAN indica la extensin de la celda en nN de colu"nas 2s%# una celda puede ocupar 'arias colu"nas RO5SPAN indica la extensin de la celda en nN de !ilas 2s%# una celda puede ocupar 'arias !ilas B1COLOR establece el color de !ondo de la celda -e expresa en !or"ato hexadeci"al -i he"os incluido este atributo en <TABLE># ca"biar$ el color por de!ecto de la celda <TH> C-'*/'&,- </TH> Establece el inicio y el !inal de una celda de tipo cabecera (header) -e distingue de <TD> en (ue 8 de 16

    <TR>C/., 3</TR>

    <TD ALI1N=" .&'/ mC)-!&D" ;ALI1N=" .&'/ mC</!*" COLSPAN=/x*/',/!C)-!&D RO5SPAN=/x*/',/!C</!* B1COLOR=#XXYY::> C-'*/'&,</TD>

    Curso de PHP 5 Apndice El lenguaje HTML "uestra el texto en negrita y centrado -e pueden aplicar los "is"os atributos (ue en la eti(ueta <TD> -e pueden anidar unas tablas dentro de otras

    ' - (or ularios


    Los !or"ularios per"iten al usuario introducir in!or"acin y en'iarla al ser'idor Existen di!erentes tecnolog%as para i"ple"entar esta !uncionalidad3 CGI# Servlets# )$ginas din$"icas (en P P ! ASP)# )E0L# etc*tera La estructura t%pica de un !or"ulario es la siguiente3 <FORM ACTION=" ""&4'CURL" METHOD="mE*-,-" ENCTYPE="*&$-C"-,&2&" ,-"> Cuerpo del formulario con los diferentes elementos para la introduccin de datos y los botones de envo o de borrado. </FORM> Los atributos de la eti(ueta FORM tienen las !unciones siguientes3 Indica la accin (ue se debe reali&ar .or"al"ente suele ser una "#L (ue apunta a un CGI# Servlet o p$gina din$"ica Establece el "*todo utili&ado para el en'%o de la in!or"acin Los 'alores posibles son ;1ET< (por de!ecto) o ;POST< 5on el "*todo es ;1ET< el contenido introducido por el usuario se aade a la "#L co"o si !uera parte de *sta8 en ca"bio# con ;POST< la in!or"acin 'a en el cuerpo de datos separada"ente 1enota el tipo de codi!icacin utili&ada para en'iar los datos )or eje"plo# ;TEXT/PLAIN< consigue (ue las respuestas sean recibidas co"o un !ichero de texto# per!ecta"ente legible y sin codi!icar

    ACTION

    METHOD

    ENCTYPE

    Ele"entos del cuerpo de un !or"ulario )ode"os di'idirlos en cinco tipos3 : Introduccin por "edio de texto (cajas de texto) 9 Introduccin por "edio de "en7s B Introduccin por "edio de botones

    9 de 16

    Curso de PHP 5 Apndice El lenguaje HTML + ?otones de en'%o y de borrado L Ele"ento in'isible : Introduccin por "edio de texto En este procedi"iento el usuario debe co"pletar la in!or"acin (ue desea en'iar al ser'idor Tiene la estructura siguiente3 <INPUT TYPE="xxx" NAME="yyy" ;ALUE="DDD" SI:E=" " MAXLEN1TH="BBB">

    donde los atributos de la eti(ueta INPUT se usan para establecer lo siguiente3 Indica el tipo de ele"ento (ue utili&a"os para la introduccin de in!or"acin Los 'alores posibles son3

    TYPE

    */x* para establecer el ele"ento co"o un HeditI de texto $ 33F-!, es igual (ue el anterior# pero al escribir slo se "uestran asteriscos )or esto se usa "ucho para introducir cla'es

    NAME ;ALUE SI:E

    Establece el no"bre del ele"ento para poder relacionarlo con su contenido 6ija el contenido inicial del ele"ento Establece la longitud del ele"ento en la pantalla

    Establece el n7"ero "$xi"o de caracteres (ue se pueden MAXLEN1TH introducir .ota3 INPUT no tiene eti(ueta de cierre 5uando es necesario introducir un texto (ue pueda alcan&ar una gran longitud u ocupar 'arias l%neas# co"o un co"entario# es con'eniente utili&ar un ele"ento de texto de "7ltiples l%neas Esto se consigue con la eti(ueta3 <TEXTAREA NAME="yyy" RO5S="'Gm/!-" COLS="'Gm/!-"> "-'*/'&,- &'&"& . </TEXTAREA> donde los atributos de la eti(ueta se usan para lo siguiente3 NAME Establece el no"bre del ele"ento para poder relacionarlo con

    10 de 16

    Curso de PHP 5 Apndice El lenguaje HTML su contenido RO5S COLS 0epresenta el n7"ero de !ilas 0epresenta el n7"ero de colu"nas

    9 Introduccin por "edio de "en7s -i desea"os (ue el usuario escoja entre 'arias opciones en lugar de escribir el texto# hare"os uso de los ele"entos de tipo "en7 La estructura "$s usual es la siguiente3 <SELECT NAME="yyy" MULTIPLE SI:E=" <OPTION ;ALUE="BBB" 3/./"*/,> .&*/! .C-$"&4' @ </OPTION> <OPTION ;ALUE="""""> .&*/! .C-$"&4' 6 </OPTION> <OPTION ;ALUE=",,," 3/./"*/,> .&*/! .C-$"&4' H </OPTION> </SELECT> La eti(ueta SELECT se usa para sealar el inicio y el !inal del ele"ento "en7 Entre la eti(ueta de inicio y de !inal se encuentran las di!erentes opciones (ue seleccionar$ el usuario -us atributos son *stos3 Establece el no"bre del ele"ento para poder relacionarlo con su contenido )er"ite (ue se puedan seleccionar "7ltiples opciones 6ija el n7"ero de opciones 'isibles en la pantalla sin necesidad de despla&arse -lo !unciona conjunta"ente con MULTIPLE -i es "ayor (ue :# aparecer$ una lista8 en caso contrario# se 'er$ una lista desplegable ">

    NAME MULTIPLE

    SI:E

    La eti(ueta OPTION se usa para establecer una opcin del ele"ento "en7 El literal (ue 'isuali&ar$ el usuario se encierra entre la eti(ueta de inicio y de !inal -us atributos son *stos3

    11 de 16

    Curso de PHP 5 Apndice El lenguaje HTML ;ALUE SELECTED Establece el 'alor (ue se asigna a la 'ariable -i se incluye en alguna de la opciones# esta opcin ser$ seleccionada por de!ecto

    B Introduccin por "edio de botones -i desea"os (ue el usuario con!ir"e una opcin deter"inada con -% o .o# utili&a"os el ele"ento checkbox Tiene el es(ue"a siguiente3 <INPUT TYPE="")/"IB-x" NAME="yyy" CHECKED> -us atributos son *stos3 Establece el no"bre del ele"ento para poder relacionarlo con el contenido Especi!ica el ele"ento (ue aparece seleccionado por de!ecto

    NAME CHECKED

    2de"$s# si (uere"os (ue el usuario pueda decidir entre 'arias posibilidades# utili&are"os el ele"ento radiobutton3 <INPUT TYPE="! ,&-" NAME="yyy" ;ALUE="DDD" CHECKED> -us atributos son *stos3 Establece el no"bre del ele"ento para poder relacionarlo con el contenido )ara asociar 'arios botones de radio a una 7nica 'ariable les pondre"os a todos el "is"o NAME Especi!ica el 'alor (ue se asignar$ a la 'ariable 6ija la 7nica opcin seleccionada por de!ecto

    NAME

    ;ALUE CHECKED

    + ?otones de en'%o y de borrado -on ele"entos esenciales (ue sir'en para (ue el usuario pulse en ellos y en'%e la in!or"acin al ser'idor o borre los datos introducidos en la p$gina <INPUT TYPE="*&$-" ;ALUE="DDD"> -us atributos son *stos3 TYPE Establece el tipo de botn )ara el en'%o de datos escribire"os JSUBMITJ 12 de 16

    Curso de PHP 5 Apndice El lenguaje HTML y para borrar los datos de la p$gina JRESETJ ;ALUE Especi!ica el texto (ue (uere"os (ue apare&ca en el botn

    L Ele"ento in'isible 2 'eces# es necesario guardar alguna 'ariable oculta en el !or"ulario para al"acenarla en la p$gina acti'a )ara esto# se utili&a el siguiente ele"ento in'isible3 <INPUT TYPE=HIDDEN NAME="yyy" ;ALUE="DDD"> -us atributos son *stos3 Establece el no"bre del ele"ento para poder relacionarlo con su contenido Especi!ica el 'alor (ue se asignar$ a la 'ariable

    NAME ;ALUE

    ) - Marcos
    Gn "arco (frame# en ingl*s) es una 'entana independiente dentro de la 'entana general del na'egador 5ada "arco tiene sus propiedades di!erenciadas3 bordes y barras de despla&a"iento propias Gsando "arcos cada p$gina se di'idir$# en la pr$ctica# en 'arias p$ginas independientes )ara crear "arcos necesita"os un docu"ento HTML espec%!ico# (ue lla"a"os docu"ento de de!inicin de "arcos En *l especi!ica"os el ta"ao y la posicin de cada "arco y el docu"ento HTML (ue contendr$ La estructura b$sica de la p$gina principal es la siguiente3 <HTML> <HEAD> <TITLE>M& $!&m/! </HEAD> $J%&' "-' m !"-3</TITLE>

    <FRAMESET COLS="679KL79"> <FRAME NAME="&',&"/" SRC="&',&"/()*m."> <FRAME NAME="$!&'"&$ ." SRC="&'&"&-()*m."> <NOFRAMES> <P>MT= ' </% ,-! '- $/!m&*/ m !"-3N</P> </NOFRAMES> </FRAMESET> </HTML>

    13 de 16

    Curso de PHP 5 Apndice El lenguaje HTML 5o"o se puede obser'ar# en este caso no existe la eti(ueta BODY 2 continuacin# explica"os las eti(uetas anteriores con detalle3 <FRAMESET RO5S="xxxK yyy" COLS="<<<K DDD"> M !"-3 </FRAMESET> -e usa para de!inir la distribucin de los "arcos en la p$gina principal "ediante colu"nas (COLS) y !ilas (RO5S) Estas eti(uetas son anidables# por lo (ue pode"os incluir unos "arcos dentro de otros Los !or"atos ad"itidos para estos atributos son los siguientes3

    )orcentual3 co"o en las tablas# pode"os !ijar el ta"ao de un "arco indicando el porcentaje (ue ocupar$ del espacio total disponible 2bsoluto3 el "arco correspondiente tendr$ el ta"ao especi!icado en pixels -obre el espacio sobrante3 escribiendo un asterisco (O) indica"os (ue el "arco debe ocupar todo el espacio sobrante )ode"os poner este s%"bolo en 'arios "arcos# (ue se repartir$n el espacio e(uitati'a"ente )ero si (uere"os (ue uno tenga "$s espacio# debe"os ponerle un n7"ero delante del asterisco 2s%# un "arco con un espacio de BO ser$ tres 'eces "$s grande (ue su co"paero con slo :O

    En el eje"plo de arriba se crean dos "arcos en la 'entana principal3 una colu"na# (ue ocupa el 9,P de la p$gina# y otra# (ue ocupa el Q,P <FRAME> Esta eti(ueta de!ine las caracter%sticas de un "arco Los atributos ad"itidos son los siguientes3 NAME SRC 2signa el no"bre al "arco para (ue poda"os re!erirnos a *l Indica la "#L del docu"ento HTML (ue ocupar$ el "arco Establece la aparicin de barras de despla&a"iento en el "arco -u 'alor por de!ecto es AUTO (el na'egador decide si se 'en o no) Las otras opciones son YES y NO -i lo escribi"os# el usuario no podr$ ca"biar el ta"ao del "arco Establece el borde del "arco )ara eli"inar el borde su 'alor debe ser , 6ija los "$rgenes hori&ontales dentro de un "arco -u !or"ato se expresa en pixels 6ija los "$rgenes 'erticales dentro de un "arco -u !or"ato se expresa en pixels

    SCROLLIN1

    NORESI:E FRAMEBORDER

    MAR1IN5IDTH

    MAR1INHEI1HT

    14 de 16

    Curso de PHP 5 Apndice El lenguaje HTML <NOFRAMES> M/'3 O/ </NOFRAMES> Estas eti(uetas se utili&an para "ostrar un "ensaje o una p$gina alternati'a cuando el na'egador del usuario no soporta "arcos

    * - &aracteres es$eciales
    1ebido a (ue el lenguaje HTML no ad"ite directa"ente deter"inados caracteres por co"patibilidad internacional# hay (ue sustituirlos utili&ando la siguiente tabla3

    Cdigo , , , , etctera... &tilde

    Resultado , , , , , , , , y ! " # $ %

    & ' (espacio en blanco, )ue no puede ser usado para saltar de lnea*

    1+ - Ms in,or acin
    2 continuacin# indica"os algunas direcciones de Internet donde se puede encontrar "$s in!or"acin sobre el lenguaje HTML tt!"##$$$%$3%or&# )$gina o!icial del Rorld Ride Reb 5onsortiu" (RB5) donde pueden encontrarse especi!icaciones# gu%as# so!tSare y aplicaciones relacionadas con las tecnolog%as de Internet Incluye los "anuales de re!erencia de HTML La p$gina est$ en ingl*s tt!"## t'(%!ro&ra'ac)o*%*et# )$gina en castellano con cursos y tutoriales sobre HTML (ue pueden ayudar "ucho a los alu"nos y alu"nas a aprender este lenguaje tt!"##$$$%$ebe+t)(o%co'# t'( En este sitio se puede aprender el lenguaje HTML de una "anera a"ena y e!iciente Est$ en castellano 15 de 16

    Potrebbero piacerti anche