lenguaje de definición de páginas web: html prof. iván collantes bernal
DESCRIPTION
Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal Email: [email protected]. Índice. Estructura general de un fichero HTML Formato de párrafos Formato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames Formularios. Índice. - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/2.jpg)
Índice
• Estructura general de un fichero HTML• Formato de párrafos• Formato de texto• Listas• Tablas• Anclas y Links• Imágenes, clicables y sensibles• Frames• Formularios
![Page 3: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/3.jpg)
Índice
• Estructura general de un fichero HTML
• Formato de párrafos• Formato de texto• Listas• Tablas• Anclas y Links• Imágenes, clicables y sensibles• Frames• Formularios
![Page 4: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/4.jpg)
Estructura general de un HTML• Ficheros puramente ASCII• Marcas de control llamadas TAGs
– Cuando el navegador lee un fichero ASCII con extensión *.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>
![Page 5: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/5.jpg)
Estructura general de un HTML
• Estructura de un fichero HTML:
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
![Page 6: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/6.jpg)
Estructura general de un 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>
![Page 7: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/7.jpg)
Índice
• Estructura general de un fichero HTML• Formato de párrafos• Formato de texto• Listas• Tablas• Anclas y Links• Imágenes, clicables y sensibles• Frames• Formularios
º
![Page 8: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/8.jpg)
Formato de párrafos
• Tag <P>...</P>• Tag <BR>• Tag <HR>• Tag
<BLOCKQUOTE>...</BLOCKQUOTE>• Tag <CENTER>...</CENTER>• Tag <PRE>...</PRE>
Ejemplo de Formato de párrafos
![Page 9: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/9.jpg)
Índice
• Estructura general de un fichero HTML• Formato de párrafos• Formato de texto• Listas• Tablas• Anclas y Links• Imágenes, clicables y sensibles• Frames• Formularios
![Page 10: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/10.jpg)
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
![Page 11: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/11.jpg)
Índice
• Estructura general de un fichero HTML• Formato de párrafos• Formato de texto• Listas• Tablas• Anclas y Links• Imágenes, clicables y sensibles• Frames• Formularios
![Page 12: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/12.jpg)
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
![Page 13: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/13.jpg)
Índice
• Estructura general de un fichero HTML• Formato de párrafos• Formato de texto• Listas• Tablas• Anclas y Links• Imágenes, clicables y sensibles• Frames• Formularios
![Page 14: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/14.jpg)
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, imágenes, enlaces e incluso otras tablas anidadas
• Tag <TH>... </TH> (de Table Header)– Celdas cuyo texto aparezca resaltado (por
ejemplo, encabezados)
![Page 15: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/15.jpg)
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: alineación del contenido de las celdas de la fila– valign: posición 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: alineación del contenido de la celda– valign: posición vertical del contenido de la celda
Ejemplo de Tablas
![Page 16: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/16.jpg)
Índice
• Estructura general de un fichero HTML• Formato de párrafos• Formato de texto• Listas• Tablas• Anclas y Links• Imágenes, clicables y sensibles• Frames• Formularios
![Page 17: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/17.jpg)
• Tag <A href=“url”>...</A>• Link:
– Otra página Web
– Enviar un mail
– Un archivo local (no recomendable)– Una dirección 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:[email protected]”>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
![Page 18: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/18.jpg)
Índice
• Estructura general de un fichero HTML• Formato de párrafos• Formato de texto• Listas• Tablas• Anclas y Links• Imágenes, clicables y sensibles• Frames• Formularios
![Page 19: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/19.jpg)
Imágenes, clicables y sensibles
• 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: tamaño de la imagen
(absoluto en pixels o en %)– align: alineación 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
resolución hasta que se termina de cargar la versión de alta resolución.
<IMG src=“Imagen.jpg” width=“33%” height=“60%”>
![Page 20: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/20.jpg)
Imágenes, clicables y sensibles
• Imagen clicable:
• Imagen sensible (mapa de imágenes):– Imágenes 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="Bahía de San Sebastián">
<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>
![Page 21: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/21.jpg)
Índice
• Estructura general de un fichero HTML• Formato de párrafos• Formato de texto• Listas• Tablas• Anclas y Links• Imágenes, clicables y sensibles• Frames• Formularios
![Page 22: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/22.jpg)
Frames
• División de la ventana del navegador en subventanas o frames
• Cada frame puede tener un nombre al que se puede dirigir el resultado de una acción
• Tamaño: fijo o variable (ratón)• Contenido: estático o dinámico
– Clásica división: Índice – Contenido
• Frameset: Ventana con frames
![Page 23: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/23.jpg)
Frames
• Estructura:
• Especificar la salida de un link:
<HTML> <HEAD><TITLE>Título de la página</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 nombretarget=“_self” : Salida a la propia ventana del hiperlinktarget=“_parent” : Salida al frameset padre del documento actualtarget=“_top” : Destruye todos los frames y la salida se dirige a la ventana principal del navegador
Ejemplo de Frames
![Page 24: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/24.jpg)
Índice
• Estructura general de un fichero HTML• Formato de párrafos• Formato de texto• Listas• Tablas• Anclas y Links• Imágenes, clicables y sensibles• Frames• Formularios
![Page 25: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/25.jpg)
Formularios
• Hipertexto– Cierta interactividad mediante la solicitud
de distintos contenidos
• Formularios– Posibilidad de que el usuario envíe datos al
servidor (datos personales, sugerencias, ...)
• Estructura:– Elementos de entrada de datos– Botón de envío (Submit)– Método de envío de datos– Acción que el servidor debe emprender
cuando reciba los datos
![Page 26: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/26.jpg)
Formularios
Cliente Servidor
Respuesta HTML
QUERY STRING
Servidor HTTP
Servidor Web
BASE DE DATOS
QUERY STRIN
G
Respuesta HTML
![Page 27: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/27.jpg)
Formularios
• Estructura:<HTML>
<HEAD><TITLE>Formulario Simple</TITLE></HEAD>
<BODY>
<H2>El formulario más 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>
![Page 28: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/28.jpg)
Formularios
• Elementos:
• Cajas de texto
• Botones
• Normal
• Password
• Multi-línea
• Hidden
• Submit
• Reset
• Genérico
EjemploCajasTextoyBotones
![Page 29: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/29.jpg)
Formularios
• Elementos:
• Casillas de verificación• Botones de radio
• Ventanas de selección simple• Ventanas de selección múltiple
• Desplegables
• De Scroll
EjemploCasillasyBotonesRadio
EjemploVentanas
![Page 30: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/30.jpg)
Formularios
• Métodos más usados: GET y POST• GET
– Designado para obtener información (un documento, un gráfico 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 información (un
nº de tarjeta de crédito, nuevos datos o información para guardar en una BD)
• Cualquiera de los dos puede usarse cuando se envía un formulario HTML
![Page 31: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/31.jpg)
Método GET
• Puede incluir parámetros en el URL
• Secuencia de caracteres añadida a la URL:– QUERY STRING
• No es muy seguro, ya que los datos viajan junto a la dirección y son vistos por todo el mundo en la barra de direcciones
• El tamaño de la información 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
![Page 32: Lenguaje de definición de páginas Web: HTML Prof. Iván Collantes Bernal](https://reader033.vdocumento.com/reader033/viewer/2022061616/5681361b550346895d9d8fde/html5/thumbnails/32.jpg)
Método POST
• Técnica diferente de envío de información– En algunos casos se necesita enviar Mb
• Características:– A través de una conexión “socket”– Datos como parte del cuerpo de la petición
HTTP– Longitud ilimitada– El intercambio es invisible para el cliente– La URL no cambia en absoluto– La petición 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.