Lenguaje HTML y
páginas web
Alex Sánchez
Introducción: La web y
las páginas web
Componentes de la web
Como funciona la web?
Como es la comunicación en la web
El acceso a la Web suele basarse en un un
explorador de Web, como Firefox…
Para distinguir entre páginas Web y otros tipos
de datos los exploradores utilizan el Lenguage
HTML (HyperText Markup Language).
El explorador interpreta las instrucciones
contenidas en el documento HTML y muestra la
página tal como la vemos.
El lenguaje HTML
Características generales
HTML: HyperText Markup Language
Basado en etiquetas (“marcas”, “tags”).
Antecedentes: proceso de textos mediante
marcas (TeX, IBM-script, Wordstar).
Combina potencia y simplicidad
Hipertexto e Hipermedia
Documentos HTML: ficheros de texto (ASCII).
HTML es un lenguaje interpretado: muy “portable”
Edición de páginas HTML
Editores de propósito general
Emacs, Textpad
Editores asociados al navegador:
Kompozer,
Editores específicos
HoTMetaL, Quanta, Front Page
Procesadores de Texto
Manuales y Guías de referencia
W3school.com
Xarxa Telematica de Catalunya
Cursos D72, D108
WebEstilo: http://www.webestilo.com/
Materiales (libres) del Master Universitario
de Software libre (UOC)
HTML – CSS – Javascript
Página Web
•• Párrafos ••Tablas
Párrafos
• Encabezados
Tablas
• Capas
Estructura
Estructura •• Listas •• Etc.
Capas
HTML
Encabezado • Etc.
s
• Textos
• Listas
Contenido
Contenido • Imágenes
• Enlaces
• Formularios
• Colores • Fondos
CSS
Apariencia • Tipografías
• Alineación
• Tamaños
• Etc.
• Efectos
Javascript
Comportamiento • Validaciones
• Automatización
Las etiquetas
El formato general a seguir:
<etiqueta>contenido</etiqueta>
La inclusión de comentarios que no se ven:
<! Comentario>
Las etiquetas que nunca deben faltar:
<HTML></HTML>
<HEAD></HEAD>
<BODY></BODY>
Ejemplo 1
<HTML>
<HEAD>
<TITLE>
Text a la barra de titol
</TITLE>
</HEAD>
<BODY>
<H2>Títol que es llegirà en el text</H2>
<HR>
Exemple d'una pàgina amb marques HTML.<BR>
<HR>
</BODY>
</HTML>
Atributos y contenido
Elemento
Etiqueta de Apertura Contenido Etiq. de Cierre
<p class=“texto”>Curso HTML </p>
Nombre Valor
Atributo
Formateo elemental de textos
Encabezamientos
<H1></H1>...........<H6></H6>
Salto de párrafo
<P></P>
Centrado
<CENTER></CENTER>
Negrita y Cursiva
<B></B> <I></I>
Ejemplo 2
<HTML>
<HEAD>
<TITLE>
Exemple de canvis en la mida de la lletra
</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE=3>
<FONT SIZE=6>
Exemple de canvis en la mida de la lletra
</FONT SIZE>
<HR>
La mida de la lletra d'aquest text és la definida a BASEFONT SIZE.
<FONT SIZE=+1>
Compareu-la amb aquesta, que ha estat augmentada en un punt.
</FONT SIZE>
<FONT SIZE=-2>
Costa de llegir, perquè té una reducció de dos punts sobre la mida
base.
</FONT SIZE>
</BODY>
</HTML>
Ejemplo 2b: Saltos de párrafo
Un text inclòs entre les marques <PRE> i </PRE> es
presenta tal com està escrit en el text original:
respectant espais, salts de línia, tabuladors i lletra
monoespaiada.
Un text inclos entre les marques <P> i </P> es presenta
en un paràgraf apart dels altres
L’etiquets <BR> introdueix un salt de línia alla on
apareix.
Atributos de etiquetas
Alineación de párrafos
Izquierda:ALIGN=left (opción por defecto)
Derecha: ALIGN=right
Centrado: ALIGN=center
Utilización.
<p ALIGN=opción>
Creación de listas
Listas no ordenadas
<UL>
<LI>
</UL>
Listas ordenadas
<OL>
<LI>
</OL>
Ejemplo 3
<OL>
<LI>Primer
<LI>Segon
<LI>Tercer
</OL>
<UL>
<LI>Naturals
<UL>
<LI>Biologia
<LI>Botànica
</UL>
<LI>Socials
<UL>
<LI>Geografia
<LI>Història
</UL>
</UL>
Añadir viñetas a las listas
Sintaxis general
<UL TYPE=atributo>
<OL TYPE=atributo>
Atributos listas no ordenadas
DISC, CIRCLE, SQUARE
Atributos listas ordenadas
1, A, I
Otras propiedades de las listas
Listas de definición
<DL>
<DT>
<DD>
</DL>
Listas anidadas (Ejemplo 3)
<UL>
<LI>
<UL>
<LI>
Otras etiquetas
Línea horizontal <HR>
Atributos de <HR>
<HR NOSHADE SIZE=valor WIDTH=“porcentaje”
ALIGN=valor>
La etiqueta <BLINK> (Ejemplo 4)
<BLINK> ¡Hola Pepe! </BLINK>
La etiqueta <META>
<META HTTP-EQUIV= “refresh” CONTENT= “5;
url=http://www.uam.es” >
Tablas
Las tablas sirven para encolumnar y estructurar
el texto y las imágenes con más precisión.
Las marcas que se usan son:
<TABLE> </TABLE>Al inicio y al final
<TR> </TR>Definen las filas
<TD> </TD>Definen las columnas
La estructura de una tabla es muy versátil.
Las marcas de una tabla son jerárquicas: una
tabla tiene una o más filas y cada una de las
filas está dividida en una o más columnas.
Ejemplo 4.1
Ejemplo 4.2
Inclusión de imágenes
Formatos principales GIF y JPEG
Sintaxis:
<IMG SRC= “imagen.gif” >
Atributos
<IMGSRC= “imagen.gif” HEIGHT= valor
WIDTH= valor >
Alineación
<IMG SRC= “imagen.gif” ALIGN= top >
Ejemplo 5
<P> <IMG SRC="1.gif" ALIGN=TOP>
<B><IMG SRC="1.gif" ALIGN= TOP></B> </P>
<P> <IMG SRC="2.gif" ALIGN=MIDDLE>
<B><IMG SRC="2.gif" ALIGN= MIDDLE></B></P>
<P> <IMG SRC="3.gif" ALIGN=BOTTOM>
<B><IMG SRC="3.gif" ALIGN= BOTTOM></B></P>
<P> <IMG SRC="4.gif" ALIGN=LEFT>
<B><IMG SRC="4.gif" ALIGN= LEFT></B></P>
<P><IMG SRC="5.gif" ALIGN=RIGHT>
<B><IMG SRC="5.gif" ALIGN= RIGHT></B></P>
Fondos
Pueden ser: Texturas, Imágenes y
Colores
Sintaxis:
<BODY BACKGROUND= “fondo.gif” >
<BODY BGCOLOR= “color” >
Creación de hiperenlaces
Permiten enlazar dos páginas cualesquiera
independientemente de la ubicación de cada
una: local o en red.
Ejemplos:
<A HREF= “http://www.elpais.es” > Diario El País
</A>
<A HREF= “pagina.html” > Página1 </A>
<A HREF= “http://www.uam.es” ><IMG SRC=
“imagen.gif” ></A>
Hiperenlaces entre secciones de
diferentes páginas HTML
Enlace desde una página (indice de
autores.html) a una sección específica en otro
documento (autores.html). (hiperenlace 2)
Primero
creamos la referencia en el primer
documento:
<A HREF= “autores.html#A1” > Autor1 </A>
A continuación creamos el anclaje en el segundo
documento:
<A NAME= “A1” > Autor1 </A>
Hiperenlaces entre secciones de la
misma página HTML
Enlace desde una página (indice de
autores.html) a una sección del mismo
documento. (hiperenlace 3)
Primero creamos la referencia:
<A HREF= “#A1” > Autor1 </A>
A continuación creamos el anclaje en el
mismo documento:
<A NAME= “A1” > Autor1 </A>
Ejercicio de síntesis
Crea un documento html “Ejemplos.html”
Organízalo en secciones
Empieza por una tabla de contenidos
Formada por una lista ordenada
Cada elemento debe enlazar con el título de cada sección
Continua con las secciones
Título: Encabezados del mismo tipo
Acaba la sección con un enlace a la tabla (“volver”) y una barra
horizontal.
Dale el contenido que desees siempre y cuando contenga
todos los elementos tratados en esta presentación
Formatos de texto/párrafo, tablas, imágenes, hiperenlaces …
