HTML

Profesor: Jacobo Ramírez Avi

Creación de páginas Web:
conceptos básicos
La Web se inventó en el Centro Europeo de
Física Nuclear CERN en 1989. El diseño de las
primeras páginas era extremadamente sencillo
y austero y las restricciones derivadas de las
redes de comunicación y de la potencia de los
ordenadores obligaban a limitar el tamaño de
dichas páginas. En ese primer momento de la
historia de la Web, la creación de las páginas
era una actividad nueva y desconocida para la
mayoría de las personas. Pese a que el proceso
de creación de las páginas HTML era muy
sencillo, pocas personas sabían hacerlo. En la
actualidad, la dificultad de la creación de
páginas Web está en función de la complejidad
del diseño que se quiera realizar, pero sigue
siendo una tarea sencilla en esencia. Un sitio Web es un escaparate sin límites
geográficos.
El funcionamiento de la Web desde el punto de
vista del usuario es sencillo: a través de un
navegador; se introduce una dirección y se
presenta la información deseada en forma de
página escrita, habitualmente, en el lenguaje
HTML. En los documentos, se pueden incluir texto,
elementos multimedia y vínculos a otros recursos,
lo que permite la navegación. Las páginas Web son
la piedra angular de la navegación y, por lo tanto
de la propia Web.
Se denomina Portal Web, Sitio Web, Website o,
sencillamente, Web al conjunto de páginas relacionadas
entre sí, alojadas en una única ubicación y accesibles a
través de una dirección web.
Desde una perspectiva comercial, el Sitio Web de una
empresa es una de sus cartas de presentación en el
mundo digital, junto con la presencia en redes sociales o
en otras plataformas de difusión de contenidos. Se puede
afirmar que la Web de una empresa es un escaparate en
el mundo digital.
En lo referente al aspecto comercial, un Sitio Web como
escaparate no tiene límites geográficos, ya que es accesible
desde cualquier lugar del planeta, lo que proporciona una
visibilidad global. Personas de cualquier lugar del mundo
pueden encontrar y consultar los productos y servicios ofrecidos
por las empresas. Además, los Sitios Web pueden proporcionar
a sus usuarios la posibilidad de adquirir productos y contratar
servicios, convirtiéndose de esta forma el Sitio Web en lo que
se conoce como tienda en línea, tienda virtual o tienda online.
En muchos aspectos, se puede resumir que, desde una
perspectiva comercial, un Portal Web es la versión digital de
una empresa física.
Estructura del Sitio Web: mapa del
Sitio Web, Migas de pan y páginas
Home y Landing
Un Sitio Web está formado por un número
determinado de páginas y recursos relacionados
entre sí a través de hiperenlaces (también
conocidos como hipervínculos o sencillamente
enlaces). Los usuarios de un Sitio Web navegan
entre las páginas de manera libre, estableciendo su
propio orden.
Este esquema de acceso a la información es
distinto del utilizado en los soportes físicos
tradicionales como el libro, donde el acceso a la
información es secuencial (página a página) o
directo a través de la tabla de contenidos. La
El mapa del Sitio Web proporciona
navegación a través de hipervínculos es mucho
una vista panorámica del contenido
más flexible a la vez que desordenada e
impredecible.
¿Cómo se inicia la navegación por el Sitio Web? ¿Qué mecanismos se pueden
proporcionar al usuario para estructurar unos contenidos tan aparentemente
desorganizados?

 Mapa del Sitio Web

El mapa es un esquema del Sitio Web desde el que se puede ver toda la
estructura de este y navegar directamente a las diferentes secciones.
La estructura y el aspecto de los mapas Web pueden ser distintos entre Sitios
Web diferentes, pero el objetivo es el mismo: facilitar la localización de las áreas
o secciones disponibles en el Portal.
Es importante crear un mapa del Sitio Web y mantenerlo actualizado si el Sitio
Web tiene una estructura compleja.
Creación del mapa de un Sitio Web
•
Diseña el mapa de la Web de una cadena de tiendas de ropa y complementos que tenga
las siguientes secciones:
 Mujer.
 Hombre.
 Niños.
Y dentro de cada sección:
 Ropa.
 Calzado.
 Outlet.
Además de estas secciones, el Sitio Web tendrá apartados dedicados a la atención al
cliente y a mostrar el listado de tiendas físicas en las diferentes ciudades en las que está
implantada la cadena.
ACTIVIDAD RESUELTA:
Creación del mapa de un Sitio Web
Mapa propuesto:

▪ Mujer
o Ropa
o Calzado
o Outlet
▪ Hombre
o Ropa
o Calzado
o Outlet
▪ Niños
o Ropa
o Calzado
o Outlet
▪ Atención al cliente
▪ Tiendas
o Barcelona
o Bilbao
o Madrid
o Sevilla
o Valencia
 Migas de pan
La técnica denominada Migas de pan, también conocida como Hilo de
Ariadna o Breadcrumbs en anglosajón, se utiliza para ayudar al usuario Estos textos pueden, además, ser
del Portal a conocer en cualquier momento en qué página o sección se enlaces y permitir realizar una
encuentra. navegación rápida en la jerarquía que
Consiste en una sucesión de textos que representan cada nivel de la lo ha llevado hasta el lugar en el que
jerarquía de la estructura de la Web dentro de la que se encuentra la se encuentra.
navegación.
Por ejemplo: si una Web se estructura en tres áreas y cada área, en tres
secciones, cuando un usuario se encuentre en la segunda sección de la
primera área, las migas de pan tendrán el siguiente aspecto:
HTML
Es el lenguaje en el que se construyen las páginas Web. Es un
lenguaje de marcado, porque está compuesto de etiquetas
(marcas) que determinan cómo se debe presentar la
información.
Salvo excepciones, toda la información que se quiere mostrar
en una página HTML, debe estar delimitada por una etiqueta de
apertura y una de cierre. Estas etiquetas indican el tipo de
elemento que contienen y cómo va a presentarse.
Las etiquetas de apertura tienen la sintaxis <nombre_etiqueta>
y las de cierre,</nombre_etiqueta>. Por ejemplo, el par de
etiquetas de apertura y cierre <p> y </p> determinan que su HTML permite definir la estructura y el contenido de las
contenido constituye un párrafo. En el siguiente bloque de páginas, pero no su estilo de presentación, asignado
código HTML, se demuestra un ejemplo del uso del elemento
mediante las Hojas de estilo CSS.
p:
La creación de páginas HTML, tiene como objetivo generar
un generar un fichero de texto plano, por lo que cualquier
editor es suficiente para crearlas. Los ficheros HTML suelen
tener la extensión .html.
•
•

•
•
•
•
•
•
•
•
Creación de una página HTML
Crea una página HTML con tu currículo
Creación de tu currículo en una página web
Este ejercicio debe resolverse con los datos propios de cada alumno. La siguiente propuesta de solución toma como base dicha actividad incluyendo la sección dedicada a la experiencia profesional, marcada en negrita.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"> Modifica el documento HTML para mostrar
<title>Fernando Paniagua C.V.</title>
<link rel="stylesheet" href="style.css">
tu currículo. Si sabes idiomas y lo tienes
</head> certificado en un nivel de referencia A1-A2,
<body>
<h1>CV</h1>
B1-B2, C1-C2. Añade una nueva sección.
<h2>Fernando Paniagua</h2> Otros datos de interés, ejemplo: carnet de
<h3>Experiencia profesional</h3>
<ul>
conducir.
<li>Profesor asociado universitario</li>
<li>Profesor de Formación Profesional</li>
<li>Ingeniero de software</li>
</ul>
<h3>Formación</h3>
<ul>
<li>Máster Universitario en Formación del Profesorado... - Universidad Alfonso X el Sabio</li>
<li>Ingeniería Informática - Universidad Carlos III de Madrid</li>
<li>Técnico Superior en Informática de Gestión - Centro F.P. Alcorcón II</li>
</ul>
<h3>Libros publicados</h3>
<ul>
<li>Marketing digital - Ediciones Paraninfo</li>
<li>Lenguajes de marcas y sistemas de gestión de información - Ediciones Paraninfo</li>
</ul>
</body>
</html>
•
•
•

•
•
•

•
•

•
•

•
•
•
•
•
•
•

<meta name=“author” content=“Isabel”>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

•
•
•
•
•
•
•
•
•

<a href=”http://www.madrid.org/”> Comunidad de Madrid</a>

<a href=“http://www.madrid.org/” target=“_blank”> Comunidad de Madrid</a>
<a href=“http://www.madrid.org/pagina1.html” target=“_blank”> Comunidad de Madrid</a>

<a href=“pagina2.html”>Otra página</a>

<a href=“./folder1/pagina2.html”>Otra página</a>
<a href=“http://mysitio.com/carpetas/folder1/pagina2.html”>Otra página</a>
•
•
•
•
•
<h2>Enlaces Absolutos</h2>
<p>Enlace a <p><a href="https://www.google.com/">Google</a></p>
<p>Enlace a <p><a href=“http://mysite/catalog.hmtl">catalog.html</a></p>

<h2>Enlace Relativo </h2>

<!-- . Significa carpeta actual
.. Significa carpeta superior -->

<p>Enlace a la página hours.html desde index.hml

<a href=“support/hours.html">hours</a>
<a href=“./support/hours.html">hours</a>
</p>
<p>Enlace a la página index.html desde hours.hml
<a href=“../index.html">hours</a>
</p>
<p>Enlace a la página catalog.html desde hours.hml
<a href=“../products/catalog.html">hours</a>
</p>
•
•
•
•

<table> <!-- Inicia la tabla --> <th> <!-- Celda diferente en primera fila -->
<tr> <!-- Inicia la fila --> </th>
<td> <!-- Celdas -->
</td> <td colspan=2> <!-- Celda que ocupa 2 columnas -->
</tr> </td>
</table>
<td rowspan=2> <!-- Celda que ocupa 2 filas -->
</td>
<table> <table> <table>
<tr> <tr> <caption> Mi tabla </caption>
<td>Celda 1</td> <th>Cabecero 1</th> <tr>
<td>Celda 2</td> <th>Cabecero 2</th> <th>Cabecero 1</th>
<td>Celda 3</td> </tr> <th>Cabecero 2</th>
</tr> <tr> </tr>
<tr> <td>Celda 1</td> <tr>
<td>Celda 4</td> <td>Celda 2</td> <td>Celda 1</td>
<td>Celda 5</td> </tr> <td>Celda 2</td>
<td>Celda 6</td> <tr> </tr>
</tr> <td>Celda 4</td> <tr>
</table> <td>Celda 5</td> <td>Celda 4</td>
</tr> <td>Celda 5</td>
</table> </tr>

</table>
 <table>
<table> <table> <tr>
<tr> <tr> <th>Cabecero 1</th>
<th scope=“col”>Cabecero 1</th> <th>Cabecero 1</th> <th>Cabecero 2</th>
<th>Cabecero 2</th> <th>Cabecero 2</th> <th>Cabecero 3</th>
<th>Cabecero 3</th> <th>Cabecero 3</th> </tr>

</tr> </tr> <tr>

<tr> <tr> <td>Celda 1</td>
<td>Celda 1</td> <td colspan=2>Celda 1 y 2</td> <td>Celda 2</td>
<td>Celda 2</td> <td>Celda 3</td> <td rowspan=2>Celda 3 y 6</td>
<td>Celda 3</td> </tr> </tr>
</tr> <tr> <tr>
<tr> <td>Celda 4</td> <td>Celda 4</td>
<td>Celda 4</td> <td>Celda 5</td> <td>Celda 5</td>
<td>Celda 5</td> <td>Celda 6</td>
<td>Celda 6</td> </tr> </tr>
</tr> </table> </table>

</table>
<table style="border:1px solid red;"> •
<tr>
<td style="border:1px solid;">Celda 1</td>
<td style="border:1px solid;">Celda 2</td>
<td style="border:1px solid;">Celda 3</td>
</tr>
<tr>
<td style="border:1px solid;">Celda 4</td>
<td style="border:1px solid;">Celda 5</td>
<td style="border:1px solid;">Celda 6</td>
</tr>
</table>
Animales avistados Comunidad de Madrid Alumnos con asignaturas pendientes

Animal Lugar Ejemplares Fecha Estado Nombre Apellidos Asignaturas Pendientes

John Smith LM
Lince El Pardo 1 10/12/21 Bueno
Jesús Camacho Cáliz PLE
Valdelatas 1 10/06/22 Bueno
Sistemas
Lobo Fuenfría 1 12/11/19 Muerto
Maite Gil Ruiz PLE
Aguila Real Soto de 1 15/09/20 Enfermo
Viñuelas
José María Moreno Pérez LM
Buho Real El Pardo 2 11/04/21 Bueno
Sistemas
1 21/06/22 Bueno
Nieves Martín LM
•
<table style="border: 1px solid black;“>
•
<td style="border: 1px solid black;">
•
<table style="border: 1px solid black; border-collapse: collapse;">

<td style="border: 1px solid black; border-collapse: collapse;">

•
<tr style="color: red"> … </tr>
<td style="color: #00EEEE"> … </td>
•
<tr style="background-color: red"> … </tr>
<td style="background-color: #DD00EE"> …
</td>
•

•
<a href=“#seccion1”>Enlace a sección 1 de esta página </a>
<a href=“pagina.htm#seccion1”>Enlace a sección 1 de pagina.htm</a>

<a href=“mailto:[email protected]”>Enlace </a>

 •
•
•
•
•

•
•
•
•
•
•
 <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
•
No se que hacer con este contenido.
•
</video>
<br><hr><br>
<audio controls>
• <source src="horse.mp3" type="audio/mpeg">

• No se que hacer con este contenido.

</audio>
<br><hr><br>
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

•
<div class="myDiv“ id=“1”>
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
•
•
•
•

•
•
•
•
•
•
•
•
•
•
•

•
•
•
• Mi sitio Web Título del sitio
• Apartado x Resumen
•
•
Imagen del apartado x
• Autor/Autora
•
•
•
•
•
•
•
•
 A D H T M L
L UN ID
F I NA