HTML TR

Lenguaje de definicin
de pginas Web:
HTML
ndice
Estructura general de un fichero HTML
Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Imgenes, clicables y sensibles
Frames
Formularios
ndice
Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Estructura general de un HTML
Ficheros puramente ASCII
Marcas de control llamadas TAGs
Cuando el navegador lee un fichero ASCII con
extensin *.htm o *.html interpreta estas TAGs
y formatea el texto de acuerdo con ellas.
Encerradas entre los caracteres menor que ( <)
y mayor que ( >).
La mayor parte de ellas son dobles.
La marca de final es como la de comienzo,
pero incluyendo una barra (/).

Comentarios
<!- Los comentarios se introducen de esta forma -->
<COMANDO>Texto afectado</COMANDO>
Estructura de un fichero HTML:
<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
...
</HEAD>

<BODY>
...
</BODY>
</HTML>
Atributos

[deprecated]
Pueden quedar obsoletos en futuras versiones
Style Sheets (Hojas de estilo)
Efectos acumulativos
<BODY background=imagen.jpg>
...
</BODY>
<IMG src=imagen.jpg width=33% height=60%>
<TAG1>
Texto afectado por el TAG1
<TAG2>
Texto afectado por el TAG1 y TAG2
</TAG2>
</TAG1>
ndice
Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Formato de prrafos
Tag <P>...</P>
Tag <BR>
Tag <HR>
Tag <BLOCKQUOTE>...</BLOCKQUOTE>
Tag <CENTER>...</CENTER>
Tag <PRE>...</PRE>
Ejemplo de Formato de prrafos
ndice
Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Formato de texto
Tag <H>...</H>
Tags <B>...</B>, <I>...</I>, <U>...</U>
Tag <TT>...</TT>
Tag <FONT>...</FONT>
Tags <SUP>...</SUP>, <SUB>...</SUB>
Tags <BIG>...</BIG>, <SMALL>...</SMALL>
Caracteres especiales:
: Á
: é
: Ñ
: ñ
Ejemplo de Formato de Texto
ndice
Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Listas
Listas desordenadas
Tag <UL>...</UL> (de unordered list)
Tag <LI> (de line)
Listas ordenadas
Tag <OL>...</OL> (de ordered list)
Tag <LI> (de line)
Listas de definiciones
Tag <DL>...</DL> (de definition list)
Tag <DT> (de definition term)
Tag <DD> (de definition description)
Ejemplo de Listas
ndice
Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Tablas
Tag <TABLE>...</TABLE>
Tag <TR>... </TR> (de Table Row)
Las celdas se agrupan en filas
Tag <TD>... </TD> (de Table Data)
Una tabla se compone de celdas de datos
Las celdas pueden contener cualquier
elemento HTML: texto, imgenes, enlaces e
incluso otras tablas anidadas
Tag <TH>... </TH> (de Table Header)
Celdas cuyo texto aparezca resaltado (por
ejemplo, encabezados)
Tablas
Atributos de <TABLE>
width: anchura de la tabla (absoluta o en %)
border: anchura de los bordes de la tabla
cellspacing: espaciado entre celdillas
cellpadding: espacio entre el borde de cada celdilla y
los elementos incluidos en ella
Atributos de <TR>
align: alineacin del contenido de las celdas de la fila
valign: posicin vertical del contenido de las celdas de
la fila
Atributos de <TH> y <TD>
rowspan: n de filas que debe abarcar la celda actual
colspan: n de columnas de la fila que abarcar la celda
align: alineacin del contenido de la celda
valign: posicin vertical del contenido de la celda
Ejemplo de Tablas
ndice
Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Tag <A href=url>...</A>
Link:
Otra pgina Web

Enviar un mail

Un archivo local (no recomendable)
Una direccin relativa

Ancla:
Saltar a otro punto del propio documento
Establecer el link
Hacer referencia a dicho link
Anclas y Links
<A name=aliniciodeldocumento>
<A href=#aliniciodeldocumento>Ir al Inicio</A>
<A href=mailto:jipotvim@vc.ehu.es>e-mail</A>
<A href=http://www.ehu.es>Web UPV-EHU</A>
<A href="../dir1/Page1.html">Ir a dir1/Page1.html</A>
Ejemplo de Links
ndice
Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Tag <IMG>
Inserta una imagen en el documento
Atributos:
src: donde se encuentra la imagen. Requerido.
alt: texto alternativo si no se ve la imagen
width, height: tamao de la imagen (absoluto
en pixels o en %)
align: alineacin del texto respecto a la imagen
border: borde o marco de la imagen
hspace, vspace: espacio alrededor de la imagen
lowsrc: Se carga primero una imagen de baja
resolucin hasta que se termina de cargar la
versin de alta resolucin.
<IMG src=Imagen.jpg width=33% height=60%>
Imagen clicable:

Imagen sensible (mapa de imgenes):
Imgenes clicables que permiten acceder a un
URL u otro dependiendo donde se clica.
Se elabora de la siguiente manera:
<A href=http://www.vc.ehu.es><IMG src=campusalava.jpg></A>
<IMG src="concha.gif" usemap="#FOTO" alt="Baha de San Sebastin">
<MAP name="FOTO">
<AREA shape="RECT" coords=20,25,155,83 href="historia.html" alt="Historia">
<AREA shape="CIRCLE" coords=60,150,100,150 href="plano.html" alt="Planos">
<AREA shape="POLY" coords=106,100,126,170,254,170,254,49,222,100 href="fotos.html" alt="Fotos">
<AREA shape="POLY" coords=169,26,169,93,267,26 nohref alt="Idioma">
</MAP>
ndice
Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Frames
Divisin de la ventana del navegador en
subventanas o frames
Cada frame puede tener un nombre al
que se puede dirigir el resultado de una
accin
Tamao: fijo o variable (ratn)
Contenido: esttico o dinmico
Clsica divisin: ndice Contenido
Frameset: Ventana con frames
Frames
Estructura:

Especificar la salida de un link:
<HTML>
<HEAD><TITLE>Ttulo de la pgina</TITLE></HEAD>
<FRAMESET rows=30%,30%,40%>
<FRAME name=cabecera src=frame1.html noresize>
<FRAMESET cols=25%,25%,50%>
<FRAME src=frame2.html scrolling=no>
<FRAME src=frame3.html marginwidth=5>
<FRAME src=frame4.html marginheight=5>
</FRAMESET>
<FRAME name=contenido src=frame5.html>
</FRAMESET>
</HTML>
<A href=http://www.ehu.es target=contenido>Web UPV-EHU</A>
target=_blank : Salida a una nueva ventana en blanco y sin nombre
target=_self : Salida a la propia ventana del hiperlink
target=_parent : Salida al frameset padre del documento actual
target=_top : Destruye todos los frames y la salida se dirige a
la ventana principal del navegador
Ejemplo de Frames
ndice
Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Formularios
Hipertexto
Cierta interactividad mediante la solicitud de
distintos contenidos
Formularios
Posibilidad de que el usuario enve datos al
servidor (datos personales, sugerencias, ...)
Estructura:
Elementos de entrada de datos
Botn de envo (Submit)
Mtodo de envo de datos
Accin que el servidor debe emprender
cuando reciba los datos
Formularios
Cliente Servidor
Respuesta HTML
QUERY STRING
Servidor
HTTP
Servidor Web
BASE DE DATOS
QUERY
STRING
Respuesta
HTML
Formularios
Estructura:
<HTML>
<HEAD><TITLE>Formulario Simple</TITLE></HEAD>
<BODY>
<H2>El formulario ms simple</H2>
<FORM name="login" action="http://www.ehu.es/cgi-bin/CGI0.exe"
method="POST" target="_self">
Introduzca su nombre:
<INPUT type="text" name="nombre" size="25"><BR><BR>
<INPUT type="submit" value="Enviar">
<INPUT type="reset" value="Borrar">
</FORM>
</BODY>
</HTML>
Formularios
Elementos:

Cajas de texto

Botones

Normal
Password
Multi-lnea
Hidden
Submit
Reset
Genrico
EjemploCajasTextoyBotones
Formularios
Elementos:

Casillas de verificacin
Botones de radio

Ventanas de seleccin simple
Ventanas de seleccin mltiple
Desplegables
De Scroll
EjemploCasillasyBotonesRadio
EjemploVentanas
Formularios
Mtodos ms usados: GET y POST
GET
Designado para obtener informacin (un
documento, un grfico o el resultado de la
consulta a una BD)
Usado al escribir una URL en el navegador
Usado cuando se clica en un hiperlink
POST
Designado para enviar informacin (un n de
tarjeta de crdito, nuevos datos o informacin
para guardar en una BD)
Cualquiera de los dos puede usarse cuando
se enva un formulario HTML
Mtodo GET
Puede incluir parmetros en el URL

Secuencia de caracteres aadida a la URL:
QUERY STRING
No es muy seguro, ya que los datos viajan
junto a la direccin y son vistos por todo el
mundo en la barra de direcciones
El tamao de la informacin enviada estar
limitada
La URL puede ser guardada o enviada por e-
mail
http://www.vc.ehu.es/jiwotvim/IngenieriaSoftware/Herramientas/cedt370r.exe?nombre1=
valor1&nombre2=valor2
Mtodo POST
Tcnica diferente de envo de informacin
En algunos casos se necesita enviar Mb
Caractersticas:
A travs de una conexin socket
Datos como parte del cuerpo de la peticin HTTP
Longitud ilimitada
El intercambio es invisible para el cliente
La URL no cambia en absoluto
La peticin no puede ser guardada ni enviada por
e-mail e incluso no puede ser refrescada
Ofrece un extra de seguridad puesto que el
access log del servidor que guarda las URLs no
guarda los datos enviados mediante POST.

HTML TR

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML TR

Transféré par

Droits d'auteur :

Formats disponibles

Lenguaje de definicin

Vous aimerez peut-être aussi