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
[Link]
Xarxa Telematica de Catalunya
Cursos D72, D108
WebEstilo: [Link]
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=[Link] >
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= “[Link]” >
Atributos
<IMGSRC= “[Link]” HEIGHT= valor
WIDTH= valor >
Alineación
<IMG SRC= “[Link]” ALIGN= top >
Ejemplo 5
<P> <IMG SRC="[Link]" ALIGN=TOP>
<B><IMG SRC="[Link]" ALIGN= TOP></B> </P>
<P> <IMG SRC="[Link]" ALIGN=MIDDLE>
<B><IMG SRC="[Link]" ALIGN= MIDDLE></B></P>
<P> <IMG SRC="[Link]" ALIGN=BOTTOM>
<B><IMG SRC="[Link]" ALIGN= BOTTOM></B></P>
<P> <IMG SRC="[Link]" ALIGN=LEFT>
<B><IMG SRC="[Link]" ALIGN= LEFT></B></P>
<P><IMG SRC="[Link]" ALIGN=RIGHT>
<B><IMG SRC="[Link]" ALIGN= RIGHT></B></P>
Fondos
Pueden ser: Texturas, Imágenes y
Colores
Sintaxis:
<BODY BACKGROUND= “[Link]” >
<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= “[Link] > Diario El País
</A>
<A HREF= “[Link]” > Página1 </A>
<A HREF= “[Link] ><IMG SRC=
“[Link]” ></A>
Hiperenlaces entre secciones de
diferentes páginas HTML
Enlace desde una página (indice de
[Link]) a una sección específica en otro
documento ([Link]). (hiperenlace 2)
Primero
creamos la referencia en el primer
documento:
<A HREF= “[Link]#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
[Link]) 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 “[Link]”
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 …