TIC – 4º ESO

z
Creación de
páginas web
con html.
 TIC – 4º ESO
z

Introducción
 z
Aparición del html
§ A finales de los años 80 Tim Bernes Lee, científico británico que
trabajaba en el CERN, utilizó SGML para definir un nuevo lenguaje
de etiquetas que llamó Hypertext Markup Language (lenguaje de
marcado de hipertexto) para crear documentos transportables a
través de Internet en los que fuera posible el hipertexto.

§ Se llama hipertexto a la posibilidad de que en un documento

determinadas palabras permitan abrir un documento relacionado
con ellas; algo a lo que ahora estamos muy acostumbrados, pero
que entonces era muy novedoso.

§ Además de HTML, el equipo de Tim Bernes Lee definió las bases

del protocolo http de Internet, encargado de trasportar los
documentos HTML y sus recursos asociados.

§ A pesar de tardar en ser aceptado, HTML fue un éxito rotundo y la

causa indudable del éxito de Internet. Hoy en día casi todo en
Internet se ve a través de documentos HTML que, popularmente,
se denominan páginas web.
 z
HTML, CSS y JavaScript
§ Una aplicación web, es una aplicación creada usando
como base el lenguaje HTML. Por lo tanto, se trata de una
aplicación que se ejecuta en un navegador de Internet.
Esencialmente las aplicaciones web actuales utilizan:
§ HTML. Para dar significado a los contenidos de la
aplicación web. Permite indicar qué textos son títulos,
cuáles son párrafos normales, cuáles son celdas de
una tabla, cuáles son imágenes, etc.
§ CSS. Lenguaje que permite dar formato y maquetación
a los contenidos. Color, tamaño de letra, posición, etc.
§ JavaScript. Permite diseñar la interactividad de la
página. Permite que las acciones del usuario se
puedan capturar y que la página reaccione a ellas,
desde lo más sencillo como que el usuario haga clic en
un título y se muestre el contenido relacionado oculto a
cosas complejas como juegos o aplicaciones.
 z
Protocolo HTTP
§ La transmisión de páginas web (que en definitiva son
documentos HTML) se realiza mediante el protocolo http,
que es parte de la pila de protocolos TCP/IP. Se trata de un
protocolo basado en una comunicación petición-respuesta;
de modo que un cliente realiza una petición indicando su
dirección en Internet. La petición llegará a un servidor
http (también llamado servidor web), el cual responde a
dicha petición transmitiendo al cliente el recurso solicitado o
bien indicando un mensaje de error si el recurso no está
disponible.
 z
Validar el código HTML
§ Los navegadores no son estrictos con las normas HTML; aunque
tengamos algunos fallos, van a ignorarlos con tal de mostrar la mejor
versión del código que hagamos. A los navegadores les interesa
hacer funcionar el código, sea válido o no.

§ Sin embargo, nosotros debemos cumplir las normas del lenguaje

aprendiendo así realmente el lenguaje y además impidiendo que el
navegador se equivoque al interpretar nuestros fallos. Además, hace
que otros creadores de páginas comprendan el código
perfectamente, facilitando el trabajo colaborativo.

§ El validador oficial de la W3C (http://validator.w3.org/) permite validar

todas las versiones de HTML, incluida la versión 5.

§ Los errores graves se muestran en rojo y puede haber avisos

(warnings) que son fallos leves, pero que hay que tener en cuenta.
 z
Publicación de páginas web
§ Se denomina sitio web al conjunto de páginas web y recursos de las
mismas que contienen toda la información asociada a una
determinada dirección de inicio en Internet.

§ Cuando una persona desea crear un nuevo sitio web, inicialmente le

crea en su ordenador de trabajo y para ello debe crear una carpeta y
en ella almacenar todas las páginas y recursos necesarios (imágenes,
sonidos, vídeos, archivos auxiliares,…). Esa carpeta se deberá enviar
al servidor web que hayamos contratado o del que dispongamos para
publicar nuestra página en Internet.
§ Para ello normalmente se utiliza el protocolo de transmisión de
ficheros conocido como FTP o herramientas online.
 TIC – 4º ESO
z

Edición básica en HTML

 z
§ Un documento HTML contiene texto. Ahora bien, hay texto
que sirve para indicar elementos y propiedades de la
página. Es decir el texto contiene lo que se
denomina etiquetas.

§ Las etiquetas sirven para delimitar elementos de la página.

Los elementos son cada uno de los componentes de la
misma; por ejemplo, un párrafo es un elemento de la página,
una tabla también. Incluso hay elementos que contienen
otros elementos (las tablas constan de filas y las filas de
celdas, por ejemplo).

§ Las etiquetas son textos encerrados entre los signos de

mayor y menor (< >). Cuando un navegador se encuentra
un texto así encerrado, entenderá que dentro de los
símbolos menor y mayor lo que se indica es el inicio de un
elemento. El inicio del elemento se marca con el nombre del
elemento entre los símbolos < y >.
 z
Etiquetas y elementos
§ Desde hace años todo texto en un documento HTML debe ir
dentro de una etiqueta que sirva para decir qué tipo de texto
es:

§ EJEMPLO:

<strong>

§ La etiqueta strong o bold sirve para indicar texto importante

(se suele mostrar en negrita)

§ La mayoría de etiquetas afectan a un determinado texto, el

cual estará encerrado por las etiquetas. Por lo tanto, casi
siempre, existe una etiqueta de apertura y otra de cierre, que
se interpretará como el inicio y fin de un determinado elemento
de la página.

§ El cierre de una etiqueta se marca poniendo el

símbolo /, seguido del nombre del elemento estamos cerrando.
Ejemplo:
Texto normal <strong>texto negrita</strong>
 z
Etiquetas y elementos
§ Lo que indicamos en el ejemplo anterior es que el texto
contiene un elemento de tipo strong, que contiene el
texto: texto negrita. El navegador reaccionará mostrando
ese texto con un tipo de letra más fuerte. Es decir:

Texto normal texto negrita

§ Un elemento puede contener dentro más elementos, por
lo que entre la apertura y el cierre de una etiqueta puede
haber más etiquetas. Una norma importante es que
siempre debemos cerrar primero las etiquetas que hemos
abierto después.

§ Es decir, este código no es correcto.

Texto normal <strong><em>texto negrita y cursiva</strong></em>

 z
Etiquetas y elementos
§ Se está cerrando la etiqueta em después de strong y eso no es
correcto porque em es la última que se abrió. Lo correcto es:

Texto normal <strong><em>texto negrita y cursiva</em></strong>

§ Es decir, se cierra primero el elemento em que fue el último en

abrirse.

§ Lo cierto es que los navegadores no suelen dar problemas

cuando cometemos errores en el código. Incluso un fallo como el
que muestra la imagen no sería considerado. Lo que hacen es
arreglar nuestros fallos, siempre que sea posible
§ A continuación os mostramos una serie de etiquetas y su
utilidad.
z A medida de que se avance en la prácticas se
conocerán más etiquetas.

§ <body> para el contenido

§ <head> para información sobre el documento

§ <a> para enlaces

§ <strong> para poner el texto en negrita

§ <br> para saltos de línea

§ <H1>…<H6> para títulos dentro del contenido

§ <img> para añadir imágenes al documento

§ <ol> para listas ordenadas, <ul> para listas

desordenadas, <li> para elementos dentro de la lista

§ <p> para párrafos

 z Atributos

§ Algunas etiquetas tienen atributos. Los atributos son propiedades

de cada elemento a las que podemos asignar un valor, de modo
que dicho valor varía el comportamiento del elemento. La forma
de utilizar atributos es:

<etiqueta atributo1=”valor1” atributo2=”valor2” ...>

....
</etiqueta>

§ En el cierre sólo se cierra la etiqueta, sin indicar los atributos.

§ <p
A lang=”es”>
los atributos se les asignan valores que deben ir entre comillas.
El símbolo de igualdad (=) es obligatorio. Ejemplo:

§ Indica que el elemento está marcado en idioma español.

 z
Estructura básica de un documento HTML
§ Para crear una página web usando HTML 5 la estructura básica es la siguiente:

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” >
<title></title>
</head>
<body>
…
</body>
</html>
§ Donde el significado de los elementos es el siguiente:

§ Línea DOCTYPE. La etiqueta DOCTYPE indica el tipo de HTML que estamos utilizando
(concretamente HTML 5).

§ Etiqueta html. Todo documento HTML está encerrado dentro de la apertura y el cierre de
esa etiqueta (marca el elemento raíz de un documento HTML). El atributo lang indica el
idioma en el que está escrito el documento.
 z
Estructura básica de un documento HTML

§ Etiqueta head. Encierra las etiquetas de cabecera, las cuales

proporcionan información que el navegador debe tener en cuenta para
el contenido del documento aparezca de forma correcta y también
contiene elementos que proporcionan información a los buscadores
(como Google). Los elementos habituales que contiene son:
§ etiquetas meta. Que sirven para indicar aspectos de funcionamiento de la
página web como, cabeceras del protocolo http, indicaciones sobre cada
cuánto caduca la página, palabras clave para buscar la página en los
navegadores, codificación de caracteres de la página,… En este caso sólo
se usa la etiqueta meta obligatoria que indica que estamos codificando el
texto usando el formato utf-8 de Unicode.
§ título, etiqueta title. El título de la página, que los navegadores suelen
colocar en la barra de título de la ventana en la que se muestra la página.

§ Cuerpo: Encerrado en la etiqueta body, encierra el contenido en sí de

la página web. Lo que el navegador muestra por pantalla es lo que se
coloca en este apartado.
 z
EJERCICIO 01
§ Siguiendo las indicaciones dadas anteriormente, crear tu primera
página web a partir del código básico de un documento HTML.
§ Crea el archivo “ejercicio01.html” con un editor de texto u otro
programa.
§ Añade “Ejercicio 01” como título de la página en la parte del head.

§ Dentro del body, escribe el texto “Hola mundo!!!”.

¡ Comprueba que se muestra

correctamente en distintos
navegadores web (Google Chrome,
Internet Explorer, Mozilla Firefox...).
¡ Una vez tengas abierta tu primera
página en el navegador, haz clic
derecho sobre la misma y selecciona
“ver código fuente de la página”.
Comprueba el resultado.
 z
Espacios en blanco
§ El texto dentro de las páginas web no respeta los espacios en blanco
ni tabuladores que coloquemos en el código, a la hora de mostrar el
contenido por pantalla. Solo se considera el primer espacio en
blanco, el resto se eliminan. Por ejemplo:

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8” >
<title></title>
</head>
<body>
Este texto

tiene muchos espacios

</body>
</html>

§ El resultado mostraría en la página este texto:

Este texto tiene muchos espacios

§ La razón es permitir una mayor legibilidad del código, para mejorar

su lectura y que el mantenimiento del mismo sea más cómodo.
 z EJERCICIO 02

§ Crea un nuevo documento HTML llamado “ejercicio02.html”.

§ Copia en él el código de la diapositiva anterior y prueba el

resultado.

§ Después haz una copia del archivo ejercicio02.html y crea otro

llamado ejercicio02b.html.

§ Coloca entre “Hola mundo” la etiqueta <br>. Observa qué

ocurre.
 z
Contenido y contenedores
§ En HTML los elementos que muestran algo en la página, se
colocan dentro de la sección body.

§ Además hay que tener en cuenta que hay elementos pensados

para contener grandes cantidades de información (como div) y
elementos que contienen poco texto (como strong). Es
correcto que aparezca un elemento strong dentro de un
elemento p, pero no al revés:

<strong><p>Hola</p></strong> -->¡¡Incorrecto!!
<p><strong>Hola</strong></p> -->Correcto

§ La mayoría de elementos en HTML son contenedores de otros

textos y elementos.
 z
Ejercicio 03
§ Crea un nuevo archivo
“ejercicio03.html” con la estructura
básica.

§ Copia el texto del archivo

“microprocesador.txt”. Cada línea
del archivo acaba en punto y aparte.
§ Trata de reproducir la página de la
derecha mediante las etiquetas <br>
y <p>.
§ Fíjate que las etiquetas <br> y <p>
causan un salto de línea, pero no
con la misma separación.
§ Por último, comprueba cómo el texto
se autoajusta cuando reduces el
tamaño de la ventana del navegador.
 z
EJERCICIO 03b
§ Realiza una copia del archivo
“ejercicio03.html” llamado
“ejercicio03b.html”.
§ Modifícalo para que incluya las
siguientes diferencias:
§ Los títulos impares remarcados y los
impares enfatizados.
§ El primer y tercer párrafo marcados
como texto importante.
§ Todas las siglas enfatizadas y
remarcadas.
§ Todas las apariciones de la palabra
“microprocesador” que no sean
títulos son texto importante.

§ Presta atención al orden de

apertura y cierre de las etiquetas.
 z Listas
§ Las listas permiten crear párrafos agrupados y alineados mediante
símbolos como viñetas o números para facilitar la lectura y organización
de las ideas del documento.
§ Listas con viñetas: se deben englobar dentro de un elemento ul (acrónimo
de unordered list, lista no ordenada), después cada párrafo de la lista estará
dentro de elementos de tipo li (de list item, elemento de lista).

<p>Lista de la compra</p>
<ul>
<li>Agua</li>
<li>Vino</li>
<li>Cerveza</li>
</ul>

§ Numéricas: aparecen dentro del elemento ol (de ordered list, lista ordenada),
después cada párrafo de la lista estará dentro de elementos de tipo li, al igual
que las anteriores. La diferencia ahora es que cada párrafo con li, aparece con
un número.
<p>Lista de la compra</p>
<ol>
<li>Agua</li>
<li>Vino</li>
<li>Cerveza</li>
</ol>
 z
Listas
§ Listas anidadas: Es posible meter una lista dentro de otra. Además,
se pueden mezclar los tipos de lista, por ejemplo:

<p>Lista de la compra</p>
<ol>
<li>No alcohólicas
<ul>
<li>Agua</li>
</ul>
</li>
<li>
Alcohólicas
<ul>
<li>Vino</li>
<li>Cerveza</li>
</ul>
</li>
</ol>
 z
Listas
§ Tanto el tipo de lista numérica como la lista con viñetas admiten un
atributo que permite modificar el tipo de numeración o viñeta que
acompaña a la lista, aunque esta última en HTML 5 se aconseja hacer
con CSS.
§ <ol type="1|a|A|i|I">
§ <ul type="disc|circle|square">

<ol type=”a” start=“4”>

<li>No alcohólicas
<ul type=“square”>
¡ La lista numérica también admite <li>Agua</li>
los atributos: </ul>
</li>
¡ reversed: hace que la lista esté <li>Alcohólicas
ordenada de manera <ul type=“circle”>
descendente. <li>Vino</li>
</ul>
¡ start: permite especificar el </li>
número en el que comienza la </ol>
lista.
 z
Listas
§ Listas de términos. Permite crear una lista de definiciones de términos. En
ellas se indica el término a definir y su significado. Se utilizan las etiquetas:
§ dl: es la etiqueta que indica que comienza una lista de definiciones (definition list).
§ dt: con esta etiqueta marcamos la palabra o término a definir (definition term).
§ dd: esta es la última etiqueta empleada. Es la que engloba la descripción (definition
description).

§ Ejemplo:
<dl>
<dt>Windows</dt>
<dd>
Sistema operativo de <strong>Microsoft</strong> disponible para
PC.
</dd>
<dt>Linux</dt>
<dd>
Sistema operativo de código abierto disponible en numerosas
distribuciones.
</dd>
<dt>Mac OS</dt>
<dd>
Sistema operativo de los ordenadores de la empresa
<strong>Apple</strong>.
</dd>
</dl>
 z
EJERCICIO 04

§ Crea un nuevo archivo

“ejercicio04.html” y trata de
reproducir las siguientes listas.

§ Recuerda los atributos anteriores

para configurar las listas según
como aparecen.

§ Utiliza las etiquetas vistas hasta

ahora.
 Tablas
Una tabla puede ser sencilla o compleja, dependiendo de
nuestro objetivo y la cantidad de etiquetas o atributos a
utilizar. Veamos primero las etiquetas básicas para crear
una tabla de la forma más sencilla posible:

Etiqueta Descripción

z Etiqueta contenedora que

<table> tendrá en su interior toda la
tabla.
Table Row. Etiqueta
<tr> contenedora de cada fila de
la tabla.
Table Data. Cada una de las
<td>
celdas de la tabla.
Table Header. Cada una de las
<th> celdas de cabecera de la
tabla.
 Tablas
La etiqueta <table>…</table> sería el elemento que
contendría todos los elementos de la tabla, mientras
que <th> y <td> se utilizarían para cada uno de los
campos de la tabla (cabecera y celda
respectivamente).
Cadaz vez que se quisiera añadir una nueva fila,
habría que incluirlo todo dentro de una etiqueta <tr>.

Combinar celdas:

Cada etiqueta <td> y <th> puede incluir una

serie de atributos para modificar su
comportamiento o para establecer relaciones
semánticas entre celdas. Probablemente, las
más interesantes sean colspan y rowspan:
 Tablas

Atributo Valor Descripción

Número de columnas
colspan número
que la celda abarcará.
Número de filas que la
zrowspan número
celda abarcará.

Con estos atributos podemos indicar que ciertas celdas

abarquen más espacio y se combinen con el espacio que
ocuparía otra celda adyacente y así crear estructuras de tabla
más flexibles.
z
 z
EJERCICIO 05
§ Realiza una tabla como la que se muestra a continuación.
Tienes que utilizar las etiquetas vistas anteriormente.
Guárdalo como “ejercicio05.html”.
 Imágenes

Para poner una imagen simple en una página web,

utilizamos el elemento <img>. Se trata de un elemento
vacío (lo que significa que no contiene texto o etiqueta
de cierre) que requiere de por lo menos de un atributo
para ser utilizado: src El atributo src contiene una ruta
que apunta a la imagen que quieres poner en la página.
.
Si tuzimagen se llama dinosaur.jpg, y está en el mismo
directorio que tu página HTML, deberás incrustar la
imagen de la siguiente manera:

<img src="dinosaur.jpg">

Si la imagen estaba en el subdirectorio imágenes, que

estaba en el mismo directorio que la página HTML

<img src="images/dinosaur.jpg">
 Imágenes

z
 z
EJERCICIO 06
§ Descarga una imagen de internet (desde pixabay. com), utiliza el
atributo “alt” y escribe algo relacionado con la imagen. La
imagen tendrá que tener un ancho de 350px y un alto de 300px.

§ Guardalo como “ejercicio06.html”

 Enlaces/ links

Lo más importante de los documentos HTML son los enlaces. Mediante

ellos enlaces podemos comunicar una página con otra. Para crear un
enlace en HTML utilizamos el elemento A con la siguiente sintaxis:

z
 z
EJERCICIO 07

a. Crea un enlace que te lleve a la página del colegio. Guárdalo

como “ejercicio07a.html”.

b. Utilizando la imagen del ejercicio anterior, insértale un enlace

que lleve a una página web creada por ti. Guárdalo como
“ejercicio07b.html”.
 Frames

Los frames (también llamados marcos) son

usados para dividir una página web en varias
partes, cargando otra página web en cada una de
ellas. Por defecto se muestran con un borde que
permite
z redimensionarlos según necesitemos.

Para crear una página web dividida en frames

usaremos la etiqueta HTML <frameset>, y dentro
de ella insertaremos una etiqueta <frame> por
cada marco que deseemos crear, así como la
etiqueta <noframes>, cuyo contenido se mostrará
en los navegadores web que no soportan frames
 Ejemplo de Frames.

z
 z
EJERCICIO 08
§ Teniendo en cuenta las etiquetas y atributos vistos. Realiza el
siguiente ejercicio. Guárdalo como “ejercicio08.html”.