Formato de párrafos

Download Report

Transcript Formato de párrafos 

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
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 (/).
<COMANDO>Texto afectado</COMANDO>
• Comentarios
<!–- Los comentarios se introducen de esta forma -->
Estructura general de un HTML
• Estructura de un fichero HTML:
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
Estructura general de un HTML
• Atributos
<BODY background=“imagen.jpg”>
...
</BODY>
<IMG src=“imagen.jpg” width=“33%” height=“60%”>
• [deprecated]
– Pueden quedar obsoletos en futuras versiones
• Style Sheets (Hojas de estilo)
• Efectos acumulativos
<TAG1>
Texto afectado por el TAG1
<TAG2>
Texto afectado por el TAG1 y TAG2
</TAG2>
</TAG1>
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
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
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
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
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
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
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
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>
–
–
–
–
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
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
Anclas y Links
• Tag <A href=“url”>...</A>
• Link:
Ejemplo de Links
– Otra página Web
<A href=“http://www.tecnun.es”>Web TECNUN</A>
– Enviar un mail
<A href=“mailto:[email protected]”>e-mail</A>
– Un archivo local (no recomendale)
– Una dirección 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>
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
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:
<A href=“http://www.tecnun.es”><IMG src=“tecnun.jpg”></A>
• 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:
<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
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
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:
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”>
</FRAMESET>
</HTML>
• Especificar la salida de un link:
<A href=“http://www.tecnun.es” target=“contenido”>Web de TECNUN</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
Lenguaje de definición
de páginas Web:
HTML