La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

Lenguaje de definición de páginas Web: HTML. Indice Estructura general de un fichero HTML Formato de párrafos Formato de texto Listas Tablas Anclas y.

Presentaciones similares


Presentación del tema: "Lenguaje de definición de páginas Web: HTML. Indice Estructura general de un fichero HTML Formato de párrafos Formato de texto Listas Tablas Anclas y."— Transcripción de la presentación:

1 Lenguaje de definición de páginas Web: HTML

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 ( ). –La mayor parte de ellas son dobles. –La marca de final es como la de comienzo, pero incluyendo una barra (/). Comentarios Texto afectado

5 Estructura general de un HTML Estructura de un fichero HTML: Título de la página......

6 Estructura general de un HTML Atributos [deprecated] –Pueden quedar obsoletos en futuras versiones Style Sheets (Hojas de estilo) Efectos acumulativos... Texto afectado por el TAG1 Texto afectado por el TAG1 y TAG2

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... Tag Tag... 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... Tags...,...,... Tag... Tags...,... Caracteres especiales: Á : Á é : é Ñ : Ñ ñ : ñ 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... (de unordered list) –Tag (de line) Listas ordenadas –Tag... (de ordered list) –Tag (de line) Listas de definiciones –Tag... (de definition list) –Tag (de definition term) –Tag (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... Tag... (de Table Row) –Las celdas se agrupan en filas Tag... (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... (de Table Header) –Celdas cuyo texto aparezca resaltado (por ejemplo, encabezados)

15 Tablas Atributos de –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 –align: alineación del contenido de las celdas de la fila –valign: posición vertical del contenidode las celdas de la fila Atributos de y –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 Tag... 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 Anclas y Links Ir al Inicio Web TECNUN Ir a dir1/Page1.html Ejemplo de Links

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

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: 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 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 Estructura: Especificar la salida de un link: Título de la página Web de TECNUN 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

24 Lenguaje de definición de páginas Web: HTML


Descargar ppt "Lenguaje de definición de páginas Web: HTML. Indice Estructura general de un fichero HTML Formato de párrafos Formato de texto Listas Tablas Anclas y."

Presentaciones similares


Anuncios Google