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 (/).
<COMANDO>Texto afectado</COMANDO>
Comentarios
<!- Los comentarios se introducen de esta forma -->

Estructura de un fichero HTML:
<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>

Atributos
<BODY background=imagen.jpg>
...
</BODY>
<IMG src=imagen.jpg width=33% height=60%>
ndice

Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Formato de prrafos
Tag
Tag
Tag
Tag
Tag
Tag
<P>...</P>
<BR>
<HR>
<BLOCKQUOTE>...</BLOCKQUOTE>
<CENTER>...</CENTER>
<PRE>...</PRE>
Ejemplo de Formato de prrafos
<BODY>
<P>Este es un ejemplo de cmo se formatean los prrafos en lenguaje HTML.</P>
<P>El navegador introduce una separacin entre los prrafos.</P>
<P>Los prrafos se separan con un espaciado superior al correspondiente a una nueva lnea. <BR>
Para tener un espaciado ms compacto puede utilizarse el Line Break, como en este ejemplo.</P>
<P>Se pueden introducir Lneas horizontales:</P>
<HR>
<HR width=80%>
<HR size=4>
<HR noshade>
<P>Los prrafos pueden indentarse.
<BLOCKQUOTE>Block quote indenta un prrafo. Se deshace esta indentacin con el fin de la TAG Block quote,</BLOCKQUOTE>
como se ve en el ejemplo.</P>
<CENTER>
Se pueden centrar los prrafos de esta forma.<BR>
Todo lo que quede entre las TAGs corrspondientes se centrar en la pantalla.
</CENTER>
<PRE>
La TAG Preformatted permite
respetar la forma
original
en que se ha
escrito el texto.
</PRE>
</BODY>
</HTML>
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
<HTML>
<BODY>
<P>Ttulos: <H1>Ttulo 1</H1><H2>Ttulo 2</H2><H3>Ttulo 3</H3><H4>Ttulo
4</H4><H5>Ttulo 5</H5><H6>Ttulo 6</H6></P>
<P>Una palabra o un fragmento de texto se puede resaltar con los tags
<B>bold</B> (B), <I>italic</I> (I) y <U>undelined</U> (U)</P>
<P>Para escribir con una <TT>letra de paso constante (estilo teletipo)</TT> se
emplea la Tag TeleType</P>
<P><FONT size="+1" color="red" face="Arial">Define tipo de letra, tamao y color a
tu gusto</FONT></P>
<P>Otros efectos:</P>
<P><STRIKE>tachado</STRIKE></P>
<P><BIG>letra ms grande que el estndar</BIG></P>
<P><SMALL>letra ms pequea que el estndar</SMALL></P>
<P>Texto tipo<SUB>subndice</SUB></P>
<P>Texto tipo<SUP>superndice</SUP></P>
</BODY>
</HTML>
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
<BODY>
<P><B>Las listas no ordenadas:</B></P>
<UL>
<LI>Van precedidas por "bullets"
<LI>Se entiende que no importa el orden
<LI>Se utilizan con mucha frecuencia
</UL>
<P><B>Las listas ordenadas:</B></P>
<OL>
<LI>Van precedidas por nmeros
<LI>La numeracin es automtica
<LI>Son tambin muy utilizadas
</OL>
<P><B>Las listas de definiciones:</B></P>
<DL>
<DT>Primer trmino
<DD>Definicin del 1er trmino
<DT>Segundo trmino
<DD>Definicin del 2 trmino
</DL>
</BODY>
</HTML>
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
<HTML>
<BODY>
<TABLE border="1">
<CAPTION><EM>Tabla de prueba con celdas unidas</EM></CAPTION>
<TR>
<TH rowspan="2"></TH>
<TH colspan="2">Media</TH>
<TH rowspan="2">Ojos<BR>rojos</TH>
</TR>
<TR>
<TH>Altura</TH>
<TH>Peso</TH>
</TR>
<TR>
<TH>Hombre</TH>
<TD>1.9</TD>
<TD>0.003</TD>
<TD>40%</TD>
</TR>
<TR>
<TH>Mujer</TH>
<TD>1.7</TD>
<TD>0.002</TD>
<TD>43%</TD>
</TR>
</TABLE>
</BODY>
</HTML>
ndice

Formato de prrafos
Formato de texto
Listas
Tablas
Anclas y Links
Frames
Formularios
Anclas y Links
Tag <A href=url>...</A>
Link:
Ejemplo de Links
Otra pgina Web
<A href=http://www.ehu.es>Web UPV-EHU</A>
Enviar un mail
<A href=mailto:jipotvim@vc.ehu.es>e-mail</A>
Un archivo local (no recomendable)

Una direccin relativa
<A href="../dir1/Page1.html">Ir a dir1/Page1.html</A>
Ancla:
Saltar a otro punto del propio documento

Establecer el link <A name=aliniciodeldocumento>
Hacer referencia a dicho link
<A href=#aliniciodeldocumento>Ir al Inicio</A>
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:
<A href=http://www.vc.ehu.es><IMG src=campusalava.jpg></A>
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:
<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:
Ejemplo de Frames
<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>
Especificar
la salida de un link:
<A href=http://www.ehu.es target=contenido>Web UPV-EHU</A>
target=_blank
target=_self
target=_parent
target=_top
:
:
:
:
Salida a una nueva ventana en blanco y sin nombre

Salida a la propia ventana del hiperlink
Salida al frameset padre del documento actual
Destruye todos los frames y la salida se dirige a
la ventana principal del navegador
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
Servidor
HTTP
Servidor Web
Respuesta
HTML
QUERY
STRING
QUERY STRING
BASE DE DATOS
Respuesta HTML
Cliente
Servidor
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:
Normal
Cajas de texto
Password
Multi-lnea
Hidden
Submit
Botones
Reset
Genrico
EjemploCajasTextoyBotones
Formularios
Elementos:
Casillas de verificacin
Botones de radio
EjemploCasillasyBotonesRadio
Desplegables
Ventanas de seleccin simple De Scroll

Ventanas de seleccin mltiple 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
http://www.vc.ehu.es/jiwotvim/IngenieriaSoftware/Herramientas/cedt370r.exe?
nombre1=valor1&nombre2=valor2
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 email
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

Estructura general de un fichero HTML

Estructura general de un fichero HTML

Estructura general de un HTML

Cuando el navegador lee un fichero ASCII con

Estructura general de un HTML

Estructura general de un HTML

<IMG src=imagen.jpg width=33% height=60%>

Estructura general de un fichero HTML

Estructura general de un fichero HTML

Ejemplo de Formato de Texto

Estructura general de un fichero HTML

Tag <UL>...</UL> (de unordered list)

Tag <OL>...</OL> (de ordered list)

Tag <DL>...</DL> (de definition list)

Estructura general de un fichero HTML

Tag <TD>... </TD> (de Table Data)

Una tabla se compone de celdas de datos

Tag <TH>... </TH> (de Table Header)

Celdas cuyo texto aparezca resaltado (por

width: anchura de la tabla (absoluta o en %)

align: alineacin del contenido de las celdas de la fila

Atributos de <TH> y <TD>

rowspan: n de filas que debe abarcar la celda actual

Estructura general de un fichero HTML

Otra pgina Web

<A href=http://www.ehu.es>Web UPV-EHU</A>

Un archivo local (no recomendable)

Saltar a otro punto del propio documento

Estructura general de un fichero HTML

Imgenes, clicables y sensibles

Inserta una imagen en el documento

src: donde se encuentra la imagen. Requerido.

Imgenes, clicables y sensibles

Imagen sensible (mapa de imgenes):

Imgenes clicables que permiten acceder a un

<IMG src="concha.gif" usemap="#FOTO" alt="Baha de San Sebastin">

Estructura general de un fichero HTML

Frameset: Ventana con frames

Salida a una nueva ventana en blanco y sin nombre

Estructura general de un fichero HTML

Cierta interactividad mediante la solicitud de

Posibilidad de que el usuario enve datos al

Elementos de entrada de datos

Ventanas de seleccin simple De Scroll

Designado para obtener informacin (un

Designado para enviar informacin (un n de

Cualquiera de los dos puede usarse cuando

Secuencia de caracteres aadida a la URL:

No es muy seguro, ya que los datos viajan

A travs de una conexin socket

Vous aimerez peut-être aussi