Lenguaje de definición

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 Links Imágenes, clicables y sensibles Frames

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

Estructura de un fichero HTML: <HTML> <HEAD> <TITLE>Título de la página</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>

Formato de párrafos Tag ... Tag 
Tag <HR> Tag <BLOCKQUOTE>...</BLOCKQUOTE> Tag <CENTER>...</CENTER> Tag <PRE>...</PRE> Ejemplo de Formato de párrafos

Formato de texto Tag <H>...</H>
Tags ..., ..., ... Tag <TT>...</TT> Tag ... Tags ..., ... Tags <BIG>...</BIG>, ... Caracteres especiales: Á : Á é : é Ñ : Ñ ñ : ñ Ejemplo de Formato de texto

Listas Listas desordenadas Listas ordenadas Listas de definiciones
Tag <UL>...</UL> (de unordered list) Tag <LI> (de line) Listas ordenadas Tag <OL>...</OL> (de ordered list) Listas de definiciones Tag <DL>...</DL> (de definition list) Tag <DT> (de definition term) Tag <DD> (de definition description) Ejemplo de Listas

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)

Tablas Atributos de <TABLE> Atributos de <TR>
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

Anclas y Links Tag <A href=“url”>...</A> Link: Ancla:
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 Ejemplo de Links <A href=“ TECNUN</A> <A <A href="../dir1/Page1.html">Ir a dir1/Page1.html</A> <A name=“aliniciodeldocumento”> <A href=“#aliniciodeldocumento”>Ir al Inicio</A>

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%”>

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=“ src=“tecnun.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> Ejemplo de Imagenes

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

Frames Estructura: Especificar la salida de un link: Ejemplo de Frames
<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”> </HTML> <A href=“ 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

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

Lenguaje de definición

Presentaciones similares

Presentación del tema: "Lenguaje de definición"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

Lenguaje de definición

Presentaciones similares

Presentación del tema: "Lenguaje de definición"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback