CONSTRUCCIÓN DE PÁGINAS WEB
© Santiago Martín de Jesús
CREACIÓN DE PÁGINAS WEB CON EL
LENGUAJE DE MARCAS
HTML – ETIQUETAS BÁSICAS
¿QUÉ ES HTML?
HTM
L
El HTML (Hyper Text Markup Language) es un
sistema para estructurar documentos.
Estos documentos pueden ser mostrados por los
visores de páginas Web en Internet, como Firefox,
Chrome o Microsoft Explorer.
Básicamente, HTML consta de una serie de
etiquetas, que indican al navegador que se está
utilizando, la forma de representar los elementos
(texto, gráficos, etc...) que contiene el documento.
3
Etiquetas HTML
HTM
L
Las etiquetas de HTML pueden ser de dos tipos,
cerradas y abiertas.
Las etiquetas abiertas constan de una sola palabra
clave.
Para diferenciar las etiquetas del resto del texto del
documento se encierran entre los símbolos
<y>
Las etiquetas cerradas incluyen el carácter / antes de
la palabra clave para indicar el final de la misma.
Una etiqueta puede contener ”atributos". Estos
atributos se indican a continuación de la palabra clave
de la etiqueta.
Entre la etiqueta inicial y la final se pueden encontrar
otras etiquetas.
4
HTM
L
Ejemplos
•Etiqueta cerrada
<CENTER> Una página de ejemplo </CENTER>
•Etiqueta abierta
<HR>
•Etiqueta cerrada con atributos
<BODY bgcolor=”yellow"> </BODY>
5
Estructura básica de HTML
HTM
L
Un documento escrito en HTML contendría
básicamente las siguientes etiquetas:
<!DOCTYPE html> Declara la versión de HTML.
<HTML> Indica el inicio del documento.
<HEAD> Inicio de la cabecera.
<TITLE> Inicio del título del documento.
</TITLE> Final del título del documento.
</HEAD> Final de la cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
6 </HTML> Final del documentoto.
DOCTYPE
HTM
L
El Doctype o “Declaración del tipo de documento” es una
instrucción especial que va al inicio de nuestro
documento HTML y que permite al navegador entender
qué versión de HTML estamos utilizando. Esta
información determinará la manera en la que el
navegador procesará el documento, un DOCTYPE distinto
podría implicar hasta una visualización diferente del sitio
web dentro del mismo navegador.
7
DOCTYPE
HTM
L
En el caso de HTML5, el DOCTYPE a emplear es el siguiente:
<!DOCTYPE html>
Para la versión HTML4 sería:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
8
ETIQUETAS DE APERTURA
HTM
L
Todo documento HTML debe estar incluido dentro de las
etiquetas <HTML></HTML>. Esto le indica al navegador
en que lenguaje está creado el documento.
<HTML>
………
</HTML>
9
ESTRUCTURA BÁSICA
HTM
L
Dentro de las etiquetas <HTML></HTML>, existen
dos partes fundamentales del documento que son la
cabecera y el cuerpo:
<HEAD> </HEAD>
<BODY> </BODY>
10
HTM
L
Declara el idioma
español en la página
<!DOCTYPE html> (Muestra el Título en
<HTML lang="es-ES"> la barra de título del
navegador)
<HEAD>
<TITLE> TÍTULO DE LA PÁGINA WEB</TITLE>
<meta charset=“UTF-8" />
Codifica el texto de la
</HEAD> página para que
aparezcan los
caracteres en
<BODY> castellano
Entre estas etiquetas pondremos el contenido que se
visualizará en nuestra página web (textos, imágenes,
videos…)
</BODY>
</HTML>
11
HTM
L EJERCICIO
v Siguiendo las indicaciones dadas, crear el archivo "dos-
parrafos.html" con un editor de textos y comprobar que se
muestra correctamente en distintos navegadores web
(Google Chrome, Internet Explorer, Mozilla Firefox...).
También probar que sucede si quitamos la codificación UTF-8.
12
COMENTARIOS
HTM
L
Para incluir comentarios en la página Web se utiliza
la etiqueta
<!-- -->
Ejemplo:
<!-- Esto es un comentario sobre mi página Web -->
Los comentarios no serán mostrados por el
navegador y son útiles para realizar anotaciones en
el documento HTML que nos indiquen lo que
estamos haciendo en una determinada parte del
documento.
13
HTM
L
<!DOCTYPE html>
<html>
<head> <!-- Cabecera del documento -->
<title> TÍTULO DEL PROGRAMA</title>
<!-- Aparece el título en la barra del navegador-->
</head>
<body>
Entre estas etiquetas pondremos el contenido de nuestra
página Web
</body>
</html>
14
HTM
L EJERCICIO
v Crear el archivo "comentarios.html” y comprobar que,
aunque los comentarios escritos están presentes en el código
fuente, no se muestran en pantalla:
15
PÁRRAFOS
HTM
L
Cuando llegamos al final de la línea de texto, éste saltará
automáticamente a la línea siguiente, pero si queremos
crear párrafos separados por una línea en blanco
utilizaremos la etiqueta
<p> </p> (No es obligatorio poner el cierre)
También podemos simplemente romper un párrafo sin
dejar línea en blanco con la etiqueta
<br>
O podemos dibujar una línea de separación con la etiqueta
<hr>
16
HTM
L
<!DOCTYPE html>
<html>
<head>
<title> Párrafos</title>
</head>
<body>
<p>Esto es un párrafo dentro de una página
Web.</p>
<p> Esto es otro párrafo que está separado del
anterior por una línea en blanco.</p>
</body>
</html>
17
HTM
L
ALINEACIÓN DE PÁRRAFOS
Para alinear un párrafo hay que especificar el
atributo ALIGN de la siguiente manera:
<p align=“ValorXXX”>
Los posibles valores para el atributo ALIGN son:
left / right / center / justify
Si trabajamos en HTML5, todo el diseño se realizará
18 con CSS3 y no utilizaremos este atributo.
HTM
L
19
ENCABEZADOS
HTM
L
Podemos crear diferentes tamaños de encabezados
(también llamados cabeceras) para el texto, por
ejemplo para señalar los distintos apartados:
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
20
HTM
L
21
CENTRADO
HTM
L
Para centrar los elementos del documento
HTML utilizamos las etiquetas
<center></center>
Si trabajamos en HTML5, todo el diseño se realizará
22 con CSS3 y no utilizaremos esta etiqueta.
SEPARADOR HORIZONTAL
HTM
L
Como vimos antes, podemos utilizar una línea horizontal para separar
distintas partes de una página Web, y para ello utilizaremos la etiqueta
<HR>
23
HTM
L
SEPARADOR HORIZONTAL ANCHO
Se puede controlar el ancho horizontal en la pagina web
que ocupará nuestra línea horizontal con el atributo WIDTH:
<HR WIDTH="50%">
24
SEPARADOR NOSHADE
HTM
L
Si queremos que el separador horizontal
aparezca incrustado en la página, podemos
añadir a la etiqueta <HR> el ATRIBUTO
NOSHADE
25
SEPARADOR NOSHADE SIZE
HTM
L
Podemos hacer el que separador horizontal sea más
grueso añadiendo el comando SIZE=“grueso en
píxeles” a la etiqueta HR.
Si queremos crear un separador horizontal con un
grosor de 20 píxeles y con sombras tendríamos que
escribir la siguiente línea de código
<HR NOSHADE SIZE="20px">
26
HTM
L
27
ALINEACIÓN DEL SEPARADOR
HTM
L
HORIZONTAL
Se puede alinear el separador horizontal a la izquierda o a
la derecha. Si no se especifica la alineación, el separador
aparecerá siempre centrado.
Para alinearlo a la izquierda utilizaremos el ATRIBUTO
ALIGN=“LEFT”
Añadiendo a la etiqueta <HR>,
<HR WIDTH="50%" ALIGN="LEFT">
28
HTM
L
29
ALINEACIÓN DERECHA
HTM
L
para alinear el separador a la derecha utilizaremos el
atributo
ALIGN=" RIGHT"
añadiéndolo a la etiqueta <HR>
30
HTM
L
31
SALTO DE LÍNEA
HTM
L
Para conseguir que las líneas no sean continuas,
utilizaremos la etiqueta
<br>
32
HTM
L
33
TEXTO MONOESPACIADO
HTM
L
Con las etiquetas <TT> y </TT> conseguimos que las
letras ocupen el mismo espacio en pantalla, para esto
utilizan la letra courier new.
Con las etiquetas <PRE> y </PRE> representamos
texto preformateado. El texto en este elemento
típicamente se muestra en una fuente fija, no
proporcional, exactamente como es mostrado en el
archivo. Los espacios dentro de este elemento
también son mostrados como están escritos.
Si trabajamos en HTML5, todo el diseño se realizará
34 con CSS3 y no utilizaremos estas etiquetas.
HTM
L
35
HTM
L EJERCICIO
v Haciendo uso de los elementos "p", ”tt", "br" y "hr" vistos
anteriormente, escribir el código de un documento HTML que
al visualizarlo en un navegador web se muestre lo siguiente:
36
HTM
L SOLUCIÓN AL EJERCICIO
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejercicio - Datos y números</title>
</head>
<body>
<p>Datos:</p>
<p>Ana Sanz Tin<br>
Pamplona<br>
(Navarra)</p>
<hr>
<p>Números:</p>
<pre> 3 1 2 4 1 6 8</pre>
</body>
</html>
37
ETIQUETAS ANIDADAS
HTM
L
Son aquellas etiquetas que se encuentran
dentro de una etiqueta general.
38
FORMATO de TEXTO
HTM
L
Se pueden aplicar los siguientes formatos al texto:
<b> texto en negrita </b>
<i> texto en cursiva </i>
<u> texto subrayado </u>
<big> texto grande </big>
<small> texto pequeño </small>
<sup> texto en superindice </sup>
<sub> texto en subindice </sub>
<mark> texto resaltado amarillo </mark>
Si trabajamos en HTML5, todo el diseño se realizará con
CSS3 y no utilizaremos estas etiquetas. Algunas, ya no
39 funcionan…
HTM
L
40
HTM
L EJERCICIO
v Utilizando algunos de los elementos nombrados en el
apartado "Formato de texto", escribir el código HTML
necesario para ver lo siguiente en un navegador:
41
HTM
L SOLUCIÓN AL EJERCICIO
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejercicio de formatos de texto</title>
</head>
<body>
<pre><mark><b> Texto en negrita y resaltado </b></mark></pre>
<hr>
<p>Ecuación de segundo grado: <b>a</b>x<sup>2</sup> + <b>b</b>x + <b>c</b> = 0</p>
<hr>
<p>· HTML (<small><i><b>H</b>yperText <b>M</b>arkup
<b>L</b>anguage</i></small>)<br>
· W3C <small>(<i><b>W</b>orld <b>W</b>ide <b>W</b>eb
<b>C</b>onsortium</i></small>)</p>
</body>
</html>
42
TIPO DE FUENTE
HTM
L
<FONT></FONT>
Esta etiqueta admite varios atributos: tamaño de fuente, tipo
de fuente añadiremos a esta etiqueta el atributo size=”Cuerpo
- Tamaño de la letra”.
Los tamaños de letras van, de menor a mayor, del 1 al 7. Si
dentro del cuerpo del documento escribimos lo siguiente:
<FONT SIZE=5>Tamaño 5</FONT>
Si trabajamos en HTML5, todo el diseño se realizará
43 con CSS3 y no utilizaremos esta etiqueta.
TIPO DE FUENTE
HTM
L
El tamaño por defecto es el 3 y podemos cambiar el texto con
respecto a este tamaño base utilizando -1 para un tamaño
algo menor, +1 para un tamaño algo mayor que el 3 y +2 para
un tamaño aún mayor.
<FONT>el tamaño base </FONT>
<FONT SIZE=-1>menor</FONT>
<FONT SIZE=+1>mayor</FONT>
<FONT SIZE=+2>grande 5</FONT>
Lo ideal es utilizar un estilo CSS, por ejemplo:
<FONT style = "font-size:24px”>fuente de 24
pixels</FONT>
<FONT style = "font-size:200%”>fuente del 200%</FONT>
44
HTM
L
45
ATRIBUTO FACE
HTM
L
Define el tipo de letra.
<font face="Comic Sans
MS,arial,verdana">Este texto tiene otra
tipografía</font>
Si trabajamos en HTML5, todo el diseño se
realizará con CSS3 y no utilizaremos esta
46 etiqueta.
VIÑETAS
HTM
L
Para poner una lista con viñetas se utilizarán las
siguientes etiquetas:
<ul>
<li>
<li>
<li>
</ul>
47
HTM
L
48
TIPOS DE VIÑETAS
HTM
L
Hay tres tipos de viñetas, que se especifican
con el atributo TYPE:
<ul type=“square">
<ul type=“disc”>
<ul type=“circle”>
49
HTM
L
<HTML>
<HEAD>
<TITLE>TIPOS DE VIÑETAS</TITLE>
<meta charset="UTF-8" />
</HEAD>
<BODY>
<BR>
<BR>
LISTAS CON VIÑETAS CUADRADAS
<BR>
<BR>
<UL TYPE= “SQUARE">
<LI>CAPITULO 1
<LI>CAPITULO 2
</UL>
<UL TYPE= "CIRCLE">
<LI>INICIO
<LI>TRAMA
</UL>
<UL TYPE= "DISC">
<LI>INICIO
<LI>FIN
</UL>
</BODY>
</HTML>
50
VIÑETAS ANIDADAS
HTM
L
Son viñetas de varios niveles que pueden
combinar diferentes tipos de viñetas.
Viñeta interior
Viñeta interior
51
LISTAS NUMERADAS
HTM
L
Son como las viñetas pero están numeradas. Se
usa la etiqueta:
<OL>
…
</OL>
Hay varios tipos de numeración para lo cual se
utiliza el atributo TYPE:
TIPO ESTILO NUMERACION
1 Números 1,2,3...
A Letras mayúsculas A,B,C...
a Letras minúsculas a,b,c...
I Nros romanos mayúsculas I, II, III...
i Nros romanos minúsculas i, ii, iii...
52
HTM
L
53
HTM
L
54
LISTAS NUMERADAS
HTM
L
ATRIBUTOS: VALUE y START
• Se puede indicar el valor específico de un elemento
de la lista o a partir del que se continúa la
numeración, para esto se utiliza el atributo VALUE:
<OL>
<LI VALUE=4>UN DATO
</OL>
• Se puede indicar el valor inicial de la lista, para esto
se utiliza el atributo START:
<OL START=“3”>
<LI>UN DATO
</OL>
55
HTM
L
56
HTM
L EJERCICIO
v Utilizando las etiquetas de listas, escribir el código HTML
necesario para ver lo siguiente en un navegador:
57
HTM
L SOLUCIÓN AL EJERCICIO
<!DOCTYPE html>
<html lang="es-ES">
<head>
<title> Practicas de listas </title>
<meta charset="UTF-8" />
</head>
<body>
<center>
<h1> Mis aficiones </h1>
</center>
<hr> Sin un orden particular, mis <B> aficiones </B> son las siguientes:
<ul>
<li> El cine
<li> El deporte
<ul>
<li> Natación
<li> Baloncesto
</ul>
<li> La música
</ul> La música que más me gusta es (en orden de preferencia):
<ol>
<li> El rock
<li> El jazz
<li> La música clásica
</ol>
</body>
</html>
58
