Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • HTML - Teoría

    Загружено:

    Raquel
    5K просмотров23 страницы
    Teoría HTML

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOC или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Teoría HTML

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    5K просмотров23 страницы

    HTML - Teoría

    Загружено:

    Raquel
    Teoría HTML

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOC или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 23

    HyperText Markup Language (HTML)

    Aplicaciones Web

    HTML

    COMPONENTES DE LAS PGINAS WEB


    Objetivos:
    La pgina a crear ha de ser atractiva para el usuario y nos ha de llevar a otras pginas (ha de tener links). Para que se cumpla el primero de los objetivos, una pgina web ha de incluir, al menos, cuatro o cinco de los siguientes elementos: 1) Texto.- componente primario de toda pgina. Podemos distinguir dos tipos de texto: a. Normal: es el que nos ofrece informacin. b. Hipervnculo: texto que nos lleva a otras pginas. Este texto aparece subrayado y cambia de color cuando es o no visitado. El color lo podemos definir con instrucciones HTML. 2) Marquesinas.- texto animado que puede desplazarse en diferentes sentidos y a diferentes velocidades. 3) Imgenes.- fotos, dibujos,... Tambin pueden ser hipervnculos. En cuanto a las imgenes tenemos que comentar que han de ser de un tamao pequeo para as darle mayor velocidad a la pgina. Existen diferentes formatos de imgenes: a. .BMP b. .GIF c. .JPEG o JPG d. .PNG 4) Iconos animados.- pequeas secuencias de video del tamao de un icono que se repiten continuamente. En estos iconos se puede guardar sonido e imagen y no necesitan de un programa externo especial para poder reproducirlos. Ej.- carta que se introduce en un sobre continuamente para indicarnos que es un link para enviar un e-mail. 5) Sonido.- meloda de fondo, clip musical,... Debido a su gran tamao, tendremos que tener cuidado a la hora de introducirlos en la pgina al igual que hemos comentado con las imgenes. 6) Vdeo.- secuencia de imgenes relacionadas que nos dan la sensacin de continuidad. Pueden tener o no sonido. Se accede a ellos a travs de enlaces (representados por iconos). Son de tamao elevado por lo que se suelen presentar en tamao visual reducido. Existen diferentes formatos para los videos: a. AVI b. MOV c. MPEG

    Aplicaciones Web

    HTML

    HTML
    Introduccin
    Definicin
    Lenguaje de Marcacin de Hipertexto MARCACIN: utiliza etiquetas o marcas que incluiremos junto al texto y que nos indican la forma en que se van a visualizar los datos a travs del navegador. Ej.- <B> palabra </B> palabra HIPERTEXTO: podemos crear vnculos o enlaces. Estos enlaces pueden ser tanto a texto como a imgenes y a videos.

    Caractersticas:
    Fcil de aplicar y de recordar. Facilidad para combinar objetos de diferente naturaleza (MULTIMEDIA) y poder interrelacionarlos. Est formado por texto, instrucciones y etiquetas. Es un simple fichero de texto (formado por caracteres ASCII). Por lo tanto podremos escribirlo con el EDIT (MS-DOS), con el Bloc de Notas (WINDOWS). Podemos especificar el tamao de la letra, la fuente, el estilo, el color,... con simples instrucciones explcitas y sencillas.

    Ventajas:
    Los documentos son breves y por lo tanto la transferencia ser rpida. Son independientes de la plataforma; por lo tanto podrn verse en cualquier plataforma. Es un lenguaje sencillo de aprender, con pocas etiquetas y de fcil manejo.

    Estructura bsica de un documento HTML


    Existen dos tipos de etiquetas: 1. Abiertas: slo hay 1 etiqueta. Se introducen los elementos que no afectan directamente al formato del texto. Ej.- <IMG> 2. Cerradas: tienen una etiqueta para abrir y otra para cerrar que completa la orden. Ej. <HTML></HTML>

    Aplicaciones Web

    HTML

    Estructura bsica de una pgina: <HTML> Inicio del documento.- indica al navegador que va a leer un documento en HTML <HEAD> Inicio de la cabecera.- su contenido no se muestra al usuario </HEAD> Final de la cabecera <BODY> Inicio del cuerpo del documento.- contiene texto, imgenes, links, correo,... </BODY> Final del cuerpo del documento </HTML> Final del documento Al final del cuerpo es importante incluir el comando <ADDRESS>.....</ADDRESS>. Dentro, escribiremos el nombre del autor del documento, la organizacin a la que pertenece, su direccin de correo electrnico y otra informacin relevante. La extensin de los documentos HTML es .HTM o .HTML

    Cabecera
    Admite las etiquetas: Etiquetas de compatibilidad: <META> y <DOCTYPE>

    Dos son las principales etiquetas que contribuyen a dotar al sitio de un correcto aspecto formal y que, an no siendo obligatorias, es al menos necesario conocer para poder interpretar su significado. La primera es la etiqueta META HTTP-EQUIV=Content-Type, cuya finalidad es solucionar el problema derivado de la disparidad de caracteres e idiomas en los que se puede elaborar una pgina web. El problema reside en que una pgina web puede estar elaborada en un idioma y ser solicitada por un navegador desde cualquier punto del mundo y con un idioma distinto, lo que con frecuencia impide que dicho navegador pueda interpretar correctamente todos los caracteres que componen la web. Un ejemplo claro es el carcter . Surge as la necesidad de dotar de un estndar a todos los documentos HTML, que permita indicar al navegador qu conjunto de caracteres debe utilizar para presentar las pginas. Este patrn viene dado por la metaetiqueta: <META HTTP-EQUIV=Content-Type CONTENT=text/html;charset=caracteres a usar> Donde el atributo charset fijar el conjunto de caracteres de la pgina. El navegador al recibir la pgina obtiene en la cabecera esta metaetiqueta y solicita al sistema operativo que cargue los caracteres necesarios para poder presentar la pgina tal y como se cre.

    Aplicaciones Web

    HTML

    Para las pginas elaboradas en castellano se deber usar el conjunto de caracteres ISO 8859-1, tambin denominado Latin1, que incluye las letras acentuadas y la letra , tanto en maysculas como en minsculas. La metaetiqueta a incluir ser entonces: <META HTTP-EQUIV=Content-Type CONTENT=text/html;charset=ISO-8859-1> Por ultimo, indicar que esta etiqueta debe situarse entre el <HEAD> y <TITLE>. La segunda metaetiqueta a destacar es DOCTYPE, permite cumplir con las recomendaciones del W3C en las que se indica la necesidad de que se declare el tipo de documento y en la versin de HTML utilizada, facilitando de esta forma la compatibilidad y accesibilidad a los navegadores. El texto de la declaracin debe colocarse al principio del documento, en la seccin de precabecera, antes de la etiqueta <HTML>, de forma que sea lo primero que recibe el navegador cliente al solicitar una pgina web. En HTML, atendiendo a las recomendaciones del consorcio W3C, es posible establecer tres tipos diferentes de documentos: Strict: el documento debe estar elaborado de una forma estricta conforme a las reglas del estndar HTML aprobadas por la W3C para cada versin de HTML. La etiqueta para establecer este tipo de documento es la siguiente: <!DOCTYPE HTML PUBLIC -//W3C// DTD HTML 4.01//EN> El inconveniente de este tipo de definicin es que los navegadores antiguos pueden no admitirla y que su rigidez no permite errores de cdigo en la elaboracin de la pgina web. Transitional: es la declaracin utilizada con mayor frecuencia, con ella adems de incluir los elementos y atributos del HTML estricto, se incorporan otros elementos no aceptados por el consorcio W3C y se dispone de ms flexibilidad a la hora de escribir el cdigo. La declaracin de este tipo de documento se consigue mediante la siguiente etiqueta: <!DOCTYPE HTML Transitional//EN> PUBLIC -//W3C//DTD HTML 4.01

    Frameset: es la declaracin de documento a utilizar cuando la pgina utiliza marcos o frames. La declaracin se establece del siguiente modo: <!DOCTYPE HTML Frameset//EN> PUBLIC -//W3C//DTD HTML 4.01

    Aplicaciones Web

    HTML

    Etiquetas de promocin: <META>

    El objetivo ltimo de una pgina web es ser visitada, y para lograrlo debe ser conocida, algo extremadamente complicado de conseguir debido a la cantidad de sitios web en la red. Los usuarios de Internet en su bsqueda de informacin utilizan buscadores y directorios, es habitual que consulten solo las pginas que ocupan las primeras posiciones. Es por tanto un hecho que estos buscadores y directorios son la principal fuente de visitas de una web, y que la posicin que una pgina ocupa dentro de ellos es clave para conseguir visitas. Los desarrolladores se han esforzado primero en conocer el funcionamiento de los buscadores y robots, y posteriormente, desarrollar un medio de facilitar el indexado de sus pginas en las bases de datos de dichos buscadores. Surgen as una serie de metatags entre las que destacan las siguientes: META NAME=Keywords, ofrece a los buscadores palabras clave (keywords) del contenido de la pgina. Su sintaxis completa es: <META NAME=keywords palabra3> CONTENT=palabra1, palabra2,

    META NAME=description, permite establecer una descripcin general y concisa de la pgina, como norma general se recomienda utilizar las palabras que aparecen en las metatags Keywords y no utilizar ms de 255 caracteres. La sintaxis es: <META NAME=description descripcin del sitio web> HTTP-EQUIV = REFRESH CONTENT=Texto que forma la

    Realiza un cambio de pgina automtico. Ej1.<META http-equiv=Refresh content = 15;url=http://www.uab.es> Pasados 15 segundos se carga de manera automtica la pgina www.uab.es. <TITLE>...</TITLE>

    Es la ms frecuente y la ms importante. Sirve para ponerle ttulo al documento. Este ttulo es el que aparece en la barra del navegador. <LINK>

    Aplicaciones Web

    HTML

    Los navegadores permiten incluir tanto en la barra de navegacin como en los listados de preferidos un icono (.ico). El fichero del icono deber tener unas dimensiones de 16x16. Ej.- <LINK rel="shortcut icon" href="favicon.ico"> Es bueno utilizar el nombre de favicon.ico para el icono, ya que muchos navegadores lo descargan y lo ponen en la barra de navegacin sin necesidad de incluir el cdigo HTML en las pginas. <BASE>

    Indica la localizacin de los ficheros, grficos, sonidos,.. a los que se hace referencia en la pgina. Si no se incluye, el visualizador entiende que los elementos se encuentran en el mismo sitio que la pgina web. Ej.- <HEAD> <BASE href=http://www.miweb.es/imag/> </HEAD>

    Cuerpo
    La etiqueta <BODY>. Admite los siguientes parmetros: background = "nombre fichero grfico". - sirve para definir la imagen de fondo del documento. Si la imagen es ms pequea que la pantalla, sta se reproducir sucesivas veces hasta completar todo el fondo. bgproperties = FIXED.- el grfico de fondo permanece fijo aunque usemos la barra de scroll. bgcolor = "cdigo color". - sirve para definir el color de fondo del documento. Por defecto es igual a blanco. Si existe una imagen, se ignora el color de fondo. text = "cdigo color". - define el color del texto. Por defecto es igual a negro. leftmargin / rightmargin / topmargin / bottommargin = "nmero". - definen el margen izquierdo, el derecho y el superior respectivamente. marginheight / marginwidth = "nmero". - definen el alto de margen y el ancho respectivamente. link = "cdigo color". - define el color del enlace. Por defecto es igual a azul. vlink = "cdigo color". - define el color del enlace visitado. Por defecto es igual a azul oscuro. alink = "cdigo color". - define el color del enlace que nos da acceso a links dentro de la misma pgina. Por defecto es igual a rojo oscuro. text="red"

    Ej.<BODY background="cielo.gif" bgcolor="cyan" link="#000055" vlink="green" alink="#FF0011">

    Encabezados
    8

    Aplicaciones Web

    HTML

    Dividen secciones dentro de una misma pgina. Producen de forma automtica un salto de lnea. Aceptan el parmetro align (center / right / left). <H1>............</H1> <H2>............</H2> <H3>............</H3> <H4>............</H4> <H5>............</H5> <H6>............</H6> + IMPORTANTE

    - IMPORTANTE

    Aplicaciones Web

    HTML

    Prrafos
    <P>.- indica el inicio de un prrafo. Antepone un salto de lnea con respecto a lo anterior. Aade una lnea en blanco. Si se utiliza como etiqueta cerrada indica los atributos de un prrafo concreto. Para este caso tiene el parmetro Align (left / right / center / justify) que indica como justificar el prrafo. <BR>. - salto de lnea. <HR>. - salto de prrafo y dibuja una lnea. Tiene los siguientes atributos: Align = posicin (left / center / right) Noshade.- dibuja una lnea sin sombra Size = valor.- define el grosor de la lnea Width / height = nmero / %. - definen el alto y el ancho de la lnea Color = "cdigo color". - define el color de la lnea <CENTER>....</CENTER>.- centra texto, imgenes,... en la pgina. <!- -Texto en comentarios -->.- sirve para insertar comentarios. No sern visibles en el navegador. <PRE>......</PRE>.- sirve para que HTML respete tabulaciones, retornos de carro, espaciados entre palabra y/o caracteres ya que por defecto, HTML slo reconoce un espacio entre palabra y palabra. Esta etiqueta hace que se muestre el texto por el navegador tal y como lo escribimos. Esta etiqueta tiene el parmetro Width que se usa para indicar el tamao mximo de cada lnea del texto preformateado (no todos los navegadores lo interpretan correctamente).

    Atributos del texto


    <B>...</B> Negrita <I>....</I> Cursiva <TT>...</TT> Tipo mquina de escribir <U>...</U> Subrayado <S>....</S> Tachado <SMALL>....</SMALL> Pequeo <BIG>......</BIG> Grande <SUP>....</SUP> Superndice <SUB>....</SUB> Subndice

    10

    Aplicaciones Web

    HTML

    <FONT>....</FONT>.- esta etiqueta tiene los siguientes parmetros: Size = +/- valor.- define el tamao Size = valor.- define el tamao Color = "cdigo color". - define el color de la fuente Face = "tipo de fuente". - define el estilo de fuente (size=+3) color="#12DD66"

    Ej.<FONT size=12 face="Arial">Texto</FONT>

    Listas de elementos
    Existen varios tipos de listas: Numeradas u ordenadas Sin orden fijo o con vietas De definicin

    Listas numeradas u ordenadas


    Los elementos que la forman se suceden en un orden lgico y se presentan numeradas siguiendo este orden. Se utiliza la etiqueta <OL>....</OL> para definir el tipo de lista y la etiqueta <LI> para representar a los elementos que la forman. Parmetros de la etiqueta <OL>: Start = Indica el nmero primero de la lista. Por defecto es igual a 1. Type = Tipo de numeracin (1(numrica), a(letras minsculas: a, b. c), A(letras maysculas: A, B, C), i(nmeros romanos minsculas: i, ii, iii), I(nmeros romanos maysculas: I, II, III)). A. Espaa B. Italia C. Grecia

    Ej.- <OL type = A> <LI> Espaa <LI> Italia <LI> Grecia </OL>

    Listas sin orden fijo o con vietas


    El orden depende del orden que le demos nosotros. Los elementos se representan con una marca que los antecede. Se utiliza la etiqueta <UL>....</UL> para definir el tipo de lista y la etiqueta <LI> para representar a los elementos que la forman. Parmetros de la etiqueta <UL>: Type = Tipo square(cuadrado)). de marca (disk(punto), circle(crculo),

    11

    Aplicaciones Web

    HTML

    Listas de definicin
    Define una lista de definicin de trminos. Se utiliza la etiqueta <DL>....</DL> para definir el tipo de lista, la etiqueta <DT> para representar el trmino y la etiqueta <DD> para representar la definicin.

    Imgenes
    La etiqueta que utilizamos para insertar imgenes es <IMG>. Parmetros de esta etiqueta: Src = nombre fichero imagen Alt = texto.- es el texto alternativo de las imgenes, que se muestra cuando la imagen no est disponible o para garantizar su accesibilidad. Es una etiqueta OBLIGATORIA en las imgenes. Tambin funciona como tooltip en Internet Explorer. Title = texto.- Descripcin emergente (tooltip) que aparece al posicionarnos sobre la imagen o enlace. Funciona en todos los navegadores. Lowsrc = imagen.- muestra una segunda imagen superpuesta sobre la primera una vez se carga la pgina. Este parmetro no es reconocido en la totalidad de navegadores. Align = top / middle / bottom / left / right / texttop / absmiddle / absbottom / baseline .- alineacin del texto respecto de la imagen. Border = nmero .- grosor del borde que rodea la imagen. Height / width = nmero.- alto y ancho de la imagen. Vspace / hspace = nmero.- margen vertical / horizontal entre la imagen y el texto.

    Ej.- Enve <IMG src= buzon.gif alt=imagen de un buzn align=top border=2 height=150 width=400 vspace=20 hspace=30> sugerencias. Enve sugerencias

    Imgenes y vnculos
    Para que una imagen sea un vnculo usaremos la etiqueta <A>.... </A>. El contenido de esta etiqueta quedar marcado para poder ser usado como enlace. Al menos, ha de tener el parmetro HREF que ser igual a la pgina donde apunta el enlace. Ej.- <A href = ndice.html> <IMG src=atrs.gif> </A>

    12

    Aplicaciones Web

    HTML

    Hiperenlaces
    Elemento de la pgina que hace que el navegador acceda a otro recurso, otra pgina, otro archivo, otra direccin,... Para incluir un hiperenlace utilizaremos la etiqueta <A>....</A>. Parmetros de esta etiqueta: Nombre = nombre del enlace href = pgina, direccin...

    Todo texto o imagen que se encuentre dentro de esta etiqueta es un vnculo sensible. Ej.- <A href = http://www.microsoft.com> Pulse para ir a pgina de Microsoft </A>

    Tipos de hiperenlaces
    Las diferentes aplicaciones que tiene esta etiqueta son: Vnculos dentro de la misma pgina

    <A name = arriba > inicio de parte definida como arriba. Punto donde ir al pulsar flecha arriba ................... ................... </A> final de parte definida como arriba .................. .................. <A href = #arriba> <IMG src = flecha arriba.gif> </A> <A href = #abajo> <IMG src = flecha abajo.gif> </A> ................. ................. <A name = abajo > inicio de parte definida como abajo. Punto donde ir al pulsar flecha abajo ................... ................... </A> final de parte definida como abajo Hiperenlace a un grupo de noticias o a otro servicio de Internet. Permite varios: telnet: (conexin entre mquinas remotas), news: (noticias) Ej.- <A href = news://news.actualidad.es/> Noticias </A> Vnculos con otras pginas de la misma aplicacin. Ej.- <A href = naranja.html> Naranja </A>

    13

    Aplicaciones Web

    HTML

    Vnculos con otras pginas de otros servicios. Los servios pueden ser: http://, ftp://, file://... Ej.- <A href = http://web/informes/fruta.html> Informes </A>

    Envo de un correo electrnico a una direccin. Ej.- <A href = mailto:nombre@hotmail.com> sugerencias </A>

    Programa que se ejecute al pinchar en el vnculo (ficheros zip, exe...). Si el navegador no puede ejecutarlos, nos pregunta si queremos guardarlo. Ej.- <A href = manual.zip> Pulsa para copiar </A>

    Tablas
    Permiten representar cualquier elemento de la pgina (texto, listas, imgenes...) en diferentes filas y columnas separadas entre s. Es una herramienta til para ordenar contenidos de distintas partes de nuestra pgina. Se define con la etiqueta <TABLE>.....</TABLE>. Parmetros de esta etiqueta: Border = nmero.- ancho del borde que rodea a la tabla. Cellspacing = nmero.- espacio entre celdas. Ancho de los bordes de la tabla. Cellpadding = nmero.- espacio entre el borde y el contenido. Altura de las diferentes casillas de la tabla. Width / height = nmero / %.- ancho y alto de la tabla. Bgcolor = cdigo color.- color de fondo de la tabla. etiqueta etiqueta

    El ttulo de la tabla lo podemos definir con la <CAPTION>.....</CAPTION> dentro de los lmites de la <TABLE>. Etiquetas para definir las celdas:

    <TH>....</TH> .- sirve para definir la cabecera. Su contenido est en negrita y a un tamao mayor. <TR>.....</TR>.- sirve para definir las filas. <TD>.....</TD>.- sirve para definir las celdas.

    Parmetros de estas etiquetas: o o o o o align = left / center / right / justify.- alinea el contenido de la celda. Valign = top / middle / bottom .- alineacin vertical. Rowspan = nmero.- nmero de filas que ocupa una celda. Colspan = nmero.- nmero de columnas que ocupa una celda. Width = nmero / %
    14

    Aplicaciones Web

    HTML

    Bgcolor = cdigo color

    15

    Aplicaciones Web

    HTML

    Ej.-. <TABLE border="1" bgcolor="#c0c0c0" width="300"> <TR> <TH>Alimentos</TH><TH>Tipos</TH> </TR> <TR> <TD rowspan="2">Legumbres</TD><TD>Lentejas</TD> </TR> <TR> <TD>Judas</TD> </TR> <TR> <TD rowspan="2">Verduras</TD><TD>Acelgas</TD> </TR> <TR> <TD>Espinacas</TD> </TR> <TR> <TD colspan="2"><img src="comida.gif"></TD> </TR> </TABLE> Alimentos Legumbres Verduras comida.gif Tipos Lentejas Judias Acelgas Espinacas

    16

    Aplicaciones Web

    HTML

    Frames
    Tcnica para subdividir la pantalla del visualizador en diferentes ventanas con la caracterstica de que cada una de ellas se podr manipular por separado como si cada una fuese una pgina Web. La etiqueta FRAME es incompatible con la etiqueta BODY. Ej.- mostrar permanentemente en una ventana los diferentes contenidos de nuestra pgina y en otra mostrar el contenido. Si la pgina no admite frames tenemos la etiqueta <NOFRAMES> que delimita la porcin de cdigo HTML que ser ignorada por los navegadores que aceptan frames y visualizada por las que no los aceptan. Para definir los frames utilizamos la etiqueta <FRAMESET>........</FRAMESET> donde indicaremos cmo se va a dividir la pantalla principal. Los parmetros de esta etiqueta son: Rows = nmero / %. - define el nmero de filas en la que subdividiremos la pantalla. Cols = nmero / %. - define el nmero de columnas en la que subdividiremos la pantalla. Border = nmero. - permite definir el grosor del borde. Si es igual a 0 no tenemos bordes. Bordercolor = cdigo color. - color del borde.

    Ej.- <FRAMESET cols = 25%,* rows = 15%,* border = 5 bordercolor = blue>

    Para indicar las propiedades de cada una de las subventanas necesitaremos la etiqueta <FRAME>. Tendremos una etiqueta para cada subventana. Los parmetros de esta etiqueta son: Name = nombre de la subventana.- nombre por el que nos referiremos a la ventana. Src = nombre pgina. HTML.- fichero HTML a cargar en esa ventana. Marginwidth = nmero.- margen izquierdo y derecho (en puntos) Marginheight = nmero.- margen superior e inferior (en puntos). Scrolling = yes / no / auto.- se aplica barra de desplazamiento. Noresize.- para que el usuario no pueda redimensionar las subventanas. Border = nmero

    17

    Aplicaciones Web

    HTML

    Ej.<HTML> <HEAD> <TITLE> Pgina con frames </TITLE> </HEAD> <FRAMESET rows = 35%,*> <FRAMESET cols = 20%,*> <FRAME name=logo src=logotipo.HTML scrolling=auto> <FRAME name=menu src=menu.HTML scrolling=auto> </FRAMESET> <FRAME name=contenido src=inicio.HTML scrolling=auto> </FRAMESET> </HTML> LOGOTIPO MEN

    INICIO Problema.- al querer mostrar una pgina debemos indicar al visor en qu subventana queremos que se muestre. Por defecto, se mostrar en la ventana donde se encuentre el enlace. Para poder elegir la subventana de destino del hiperenlace se aade un parmetro a la etiqueta <A>. Este parmetro es TARGET y puede tener los siguientes valores: target = nombre ventana.- es igual al nombre de la ventana que est definido en el parmetro name de la etiqueta <FRAME>. target = _blank.- abre una copia del navegador y all muestra la pgina. target = _self.- se muestra el hiperenlace en la subventana activa. target = _parent.- hiperenlace en el <frameset> definido anteriormente al actual si no hay ninguno, se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla. target = _top.- suprime todas las ventanas y muestra el hiperenlace a pantalla completa.

    18

    Aplicaciones Web

    HTML

    Formularios
    Se utilizan para la entrada y envo de datos desde una pgina Web. Podremos usar formularios para disear cuestionarios, para hacer pedidos, encuestas, subscripciones,... Los datos solicitados quedarn asociados a una variable. Una vez introducidos, sern enviados a una direccin URL donde estar el programa que procese los datos. Este programa externo se llama CGI (Common gateway interface). La etiqueta para definir formularios parmetros de esta etiqueta son: es <FORM>....</FORM>. Los

    Action = programa.- accin a realizar al enviar el formulario. Method = GET / POST.- mtodo segn el cual se envan datos. o GET.- valores como parmetros. o POST.- valores como variables de entorno.

    Campos de entrada
    Los elementos de entrada de datos se denotan con la etiqueta <INPUT> que tiene el parmetro TYPE con las especificaciones: Type = text.- campo de tipo texto. Slo admite una lnea. Especificaciones: o Name = campo o Maxlength = nmero.- nmero mximo de caracteres. o Size = nmero.- anchura visible. o Value = texto.- valor inicial o por defecto. Ej.- <INPUT type=text name=e-mail maxlength=300 size=60> Type = password.- campo contrasea. Se ve con *. Tiene las mismas especificaciones que el tipo texto. Type = checkbox.- campo de chequeo opcin (no excluyente). Type = radio.- excluyente. Type = range.- campo para entrada de rangos. Ej.- <INPUT type = range name = nota min = 1 max = 10> Type = image.- el campo contendr el valor de las coordenadas del punto de la imagen pinchada. Ej.- <INPUT type = image src = estadistica.gif> Type = hidden.- campo de datos ocultos. Se enva la informacin de inters interno. Ej.- <INPUT type = hidden name = versin value = 20a>

    19

    Aplicaciones Web

    HTML

    Type = submit.- botn de envo. Se realiza la accin especificada en el parmetro ACTION de la etiqueta FORM. Ej.- <INPUT type = submit value = ENVIAR src = botn.gif>

    Type = reset.- botn de borrado. Sirve para poner los valores iniciales. Ej.- <INPUT type = reset value = BORRAR>

    Campos de seleccin
    Estos campos despliegan una lista de opciones. Se utiliza la etiqueta <SELECT>.....</SELECT> que tiene los siguientes parmetros: Name = campo Size = nmero.- nmero de opciones visibles. Multiple.- permite seleccionar ms de un valor para el campo.

    Las diferentes opciones de la lista se indican con la etiqueta <OPTION> que tiene el parmetro selected. (opcin por defecto). Ej.- <SELECT name="Ciudades"> <OPTION value="1">Jaen <OPTION value="2">Granada <OPTION value="3">Sevilla </SELECT>

    reas de texto
    Representan un campo de texto de mltiples lneas y aparecen como una caja que se utiliza para incluir comentarios. Se utiliza la etiqueta <TEXTAREA>......</TEXTAREA> que tiene los siguientes parmetros: Name = campo Cols = nmero.- nmero de columnas de texto visibles. Rows = nmero Align = top / middle / bottom / left / right Wrap = VIRTUAL / PHYSICAL o VIRTUAL.- enva todo el texto seguido. o PHYSICAL.- enva las lneas de texto separadas en lneas fsicas.

    Ej.- <TEXTAREA name = direccin rows = 60 cols = 5> </TEXTAREA>

    20

    Aplicaciones Web

    HTML

    Marquesinas
    Se utiliza la etiqueta <MARQUEE>.....</MARQUEE> que tiene los siguientes parmetros: Align = top / middle / bottom.- alinea el texto interior de la marquesina. Bgcolor = cdigo color.- indica el color de fondo de la marquesina. Direction = left / right / down / up.- indica hacia donde se desplaza el texto. Height / width = nmero / %.- altura y anchura de la marquesina. Loop = nmero / INFINITE.- indica el nmero de veces que se desplaza el texto por la marquesina. Scrolldelay = nmero.- indica el nmero de milisegundos que tarda en rescribirse el texto por la marquesina. A un nmero mayor, ms lento ser el desplazamiento. Scrollmount = nmero.- indica la velocidad en milisegundos de cada carcter. Behaviour = SLIDE / ALTERNATE.- indica el comportamiento del texto. o SLIDE.- se desplaza y se queda quieta. o ALTERNATE.- rebota

    Ej.- <MARQUEE bgcolor=red width = 50% scrolldelay = 0> HOLA </MARQUEE>

    Sonido
    Se utiliza la etiqueta <BGSOUND> que tiene como parmetros: Src = nombre fichero sonido.- indica el fichero a activar al entrar en la pgina. La extensin puede ser .wav, .mid Loop = nmero / INFINITE.- indica el nmero de veces que se reproducir el sonido. Si ponemos INFINITE, el sonido se reproducir hasta abandonar la pgina.

    Ej.- <BGSOUND src = yesterday.mid loop = INFINITE>

    21

    Aplicaciones Web

    HTML

    Vdeo
    Se utiliza la etiqueta <IMG DYNSRC = nombre fichero vdeo>. La extensin del fichero es .AVI. Esta etiqueta tiene como parmetros: Loop = nmero / INFINITE Start = FILEOPEN / MOUSEOVER o FILEOPEN.- el vdeo empieza a ejecutarse al finalizar la carga de la pgina. o MOUSEOVER.- el vdeo empieza a ejecutarse cuando el usuario mueve el ratn sobre la imagen. Controls.- para controlar la imagen. Loopdelay = nmero.- especifica en milisegundos, cuanto tiempo transcurre entre una y otra repeticin. Width / height = nmero / %.- anchura y altura del vdeo.

    Mapas sensibles
    Son dibujos interactivos ya que permite realizar diferentes hiperenlaces en funcin de la zona de la imagen que pulsemos. Para crear una imagen sensible es necesaria la especificacin de las distintas reas de la imagen y los enlaces que activarn cada una de ellas. Para ello insertaremos el parmetro USEMAP en la etiqueta IMG. Este parmetro ser igual al fichero en el que se encuentra definido el mapa precedido por el carcter #. Para definir el mapa usaremos la etiqueta <MAP>......</MAP> que tiene como parmetro: Name = nombre fichero (nombre del fichero donde est definido el mapa). Para definir las diferentes reas sensibles del mapa usaremos la etiqueta <AREA> (dentro de la etiqueta <MAP>) que tiene como parmetros: Shape = (forma del rea) o Circle.- necesitamos el centro (x, y) y el radio. o Rect.- necesitamos el vrtice superior izquierdo y el vrtice inferior derecho. o Point.- necesitamos un punto. o Poly.- polgono de cmo mximo 10 vrtices. o Oval.- necesitamos el vrtice superior izquierdo y el vrtice inferior derecho. o Default.- zona no definida sin enlace. Pondremos una URL por defecto. Coords = coordenadas.- dependern de la forma de rea escogida. Href = pgina.html Nohref.- si no queremos que haya nada al hacer clic.

    22

    Aplicaciones Web

    HTML

    Ej.<BODY> <MAP name = mapet> <AREA shape = rect coords = 0, 0, 100, 60 href = uno.html> <AREA shape = rect coords = 0, 61, 100, 120 href = dos.html> <AREA shape = rect coords = 0, 121, 100, 180 href = tres.html> </MAP> <IMG src = area_sensible.gif width =100 height = 180 usemap = #mapet> </BODY>

    Insertar elementos ajenos al navegador


    Usaremos la etiqueta <EMBED>......</EMBED> que sirve para insertar cualquier elemento ajeno al navegador (.cdr, .swf, .fla, .wrl) y que necesite de un plug-in para su reproduccin. Netscape utiliza esta etiqueta para insertar sonidos. Tiene los siguientes parmetros: Src = nombre fichero Height / width = nmero / %.- altura y anchura del elemento del fichero. Autostart = T / F.- indica si el elemento se reproduce al cargar la pgina. Volume = nmero Loop = T / F Hidden = T / F.- por si no queremos que se vea el reproductor. La propiedad Autostart ha de estar a T. Align .- alinea el reproductor respecto al texto. Controls = smallconsole Vspace / hspace = nmero / %.- indican el espacio vertical y horizontal. Border = nmero name = nombre.- para referenciar al objeto. Pluginspace.- por si el usuario no tiene instalado el plug-in que muestra el efecto, al pulsar sobre l, ste le llevar a la direccin de Internet donde puede encontrarlo. Quality = high /middle / low

    Ej.- <EMBED pluginspace=http://www.macromedia.com> Efecto </EMBED>

    23

    Вам также может понравиться