1 / 25

Fernando Alonso Blázquez

Lenguaje de definición de páginas Web: HTML 19 de Febrero de 2004. Fernando Alonso Blázquez. Indice. Estructura general de un fichero HTML Formato de párrafos Formato de texto Listas Tablas Anclas y Links Imágenes, clicables y sensibles Frames. Indice.

iliana-sharpe
Download Presentation

Fernando Alonso Blázquez

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lenguaje de definición de páginas Web: HTML 19 de Febrero de 2004 Fernando Alonso Blázquez

  2. Indice • Estructura general de un fichero HTML • Formato de párrafos • Formato de texto • Listas • Tablas • Anclas y Links • Imágenes, clicables y sensibles • Frames

  3. Indice • Estructura general de un fichero HTML • Formato de párrafos • Formato de texto • Listas • Tablas • Anclas y Links • Imágenes, clicables y sensibles • Frames

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

  5. Estructura general de un HTML • Estructura de un fichero HTML: <HTML> <HEAD> <TITLE>Título de la página</TITLE> ... </HEAD> <BODY> ... </BODY> </HTML>

  6. Estructura general de un HTML • Atributos • [deprecated] • Pueden quedar obsoletos en futuras versiones • Style Sheets (Hojas de estilo) • Efectos acumulativos <BODYbackground=“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>

  7. Indice • Estructura general de un fichero HTML • Formato de párrafos • Formato de texto • Listas • Tablas • Anclas y Links • Imágenes, clicables y sensibles • Frames

  8. 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

  9. Indice • Estructura general de un fichero HTML • Formato de párrafos • Formato de texto • Listas • Tablas • Anclas y Links • Imágenes, clicables y sensibles • Frames

  10. 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: Á : &Aacute; é : &eacute; Ñ : &Ntilde; ñ : &ntilde; Ejemplo de Formato de texto

  11. Indice • Estructura general de un fichero HTML • Formato de párrafos • Formato de texto • Listas • Tablas • Anclas y Links • Imágenes, clicables y sensibles • Frames

  12. 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

  13. Indice • Estructura general de un fichero HTML • Formato de párrafos • Formato de texto • Listas • Tablas • Anclas y Links • Imágenes, clicables y sensibles • Frames

  14. 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)

  15. 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 contenidode 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

  16. Indice • Estructura general de un fichero HTML • Formato de párrafos • Formato de texto • Listas • Tablas • Anclas y Links • Imágenes, clicables y sensibles • Frames

  17. Ejemplo de Links Anclas y Links • Tag <A href=“url”>...</A> • Link: • Otra página Web • Enviar un mail • Un archivo local (no recomendale) • Una dirección relativa • Ancla: • Saltar a otro punto del propio documento • Establecer el link • Hacer referencia a dicho link <A href=“http://www.tecnun.es”>Web TECNUN</A> <A href=“mailto:falonso@tecnun.es”>e-mail</A> <A href="../dir1/Page1.html">Ir a dir1/Page1.html</A> <A name=“aliniciodeldocumento”> <A href=“#aliniciodeldocumento”>Ir al Inicio</A>

  18. Indice • Estructura general de un fichero HTML • Formato de párrafos • Formato de texto • Listas • Tablas • Anclas y Links • Imágenes, clicables y sensibles • Frames

  19. Imágenes, clicables y sensibles • Tag <IMG> • Inserta una imagen en el documento • Atributos: • src: dónde 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 text 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%”>

  20. 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 dónde se clica. • Se elabora de la siguiente manera: <A href=“http://www.tecnun.es”><IMG src=“tecnun.jpg”></A> <IMGsrc="concha.gif" usemap="#FOTO" alt="Bahía de San Sebastián"> <MAPname="FOTO"> <AREAshape="RECT" coords=“20,25,155,83” href="historia.html" alt="Historia"> <AREAshape="CIRCLE" coords=“60,150,100,150” href="plano.html" alt="Planos"> <AREAshape="POLY" coords=“106,100,126,170,254,170,254,49,222,100” href="fotos.html" alt="Fotos"> <AREAshape="POLY" coords=“169,26,169,93,267,26” nohrefalt="Idioma"> </MAP> Ejemplo de Imagenes

  21. Indice • Estructura general de un fichero HTML • Formato de párrafos • Formato de texto • Listas • Tablas • Anclas y Links • Imágenes, clicables y sensibles • Frames

  22. 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: Indice – Contenido • Frameset: Ventana con frames

  23. Frames Ejemplo de Frames • Estructura: • Especificar la salida de un link: <HTML> <HEAD><TITLE>Título de la página</TITLE></HEAD> <FRAMESETrows=“30%,30%,40%”> <FRAMEname=“cabecera” src=“frame1.html” noresize> <FRAMESETcols=“25%,25%,50%”> <FRAMEsrc=“frame2.html” scrolling=“no”> <FRAMEsrc=“frame3.html” marginwidth=“5”> <FRAMEsrc=“frame4.html” marginheight=“5”> </FRAMESET> <FRAMEname=“contenido” src=“frame5.html”> </FRAMESET> </HTML> <Ahref=“http://www.tecnun.es” target=“contenido”>Web de TECNUN</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

  24. Para finalizar... Ante cualquier duda: • Página Web de la Asignatura: http://www.tecnun.es/Asignaturas/Informat3/pagina_8.html • Profesor de la Asignatura: • Persona simpática pero MUYMUYocupada. • Sólo en caso extremo de absoluta incomprensión de la especificación HTML.

  25. Lenguaje de definición de páginas Web: HTML 19 de Febrero de 2004 Fernando Alonso Blázquez

More Related