DISEÑO WEB - HTML-

4to año -2023

Diseño Web- HTML- Unidad 3 4to año computación

Hipertexto, Web y HTML

Un hipertexto, es un texto en que cualquier palabra o frase puede ser especificada como un
enlace a otros documentos que contienen más información sobre dicha palabra, por lo que la
lectura de un documento hipertextual no es secuencial o lineal, sino que se puede acceder a la
información que nos interese desde otros conceptos relacionados (simplemente haciendo clic con
el ratón en la palabra relacionada), y de esta forma avanzar de documento en documento hasta
encontrar la información deseada. Estas palabras que poseen enlaces a otros documentos están
marcadas de alguna manera para poder diferenciarlas.

Un documento hipermedia es un hipertexto, pero que no incluye sólo información textual sino
también información multimedia, es decir, puede incluir gráficos, vídeo, y sonido.

Los documentos Web o también llamados páginas Web pueden estar localizados en diferentes
sitios de Internet, estos sitios son llamados servidores Web. De manera que una página Web
puede contener enlaces a otras páginas o documentos que se encuentran en el mismo servidor
Web o en otros servidores Web, logrando así formar una telaraña mundial de información.
El lenguaje estandarizado para la creación de páginas Web es el
HTML es el
lenguaje HTML (HyperText Markup Language, Lenguaje de Marcas
lenguaje con el
Hipertexto). Un lenguaje de marcas es una forma de codificar junto que se "escriben"
con el texto, es decir incorporar etiquetas que no forman parte del las páginas Web
contenido pero brindan información sobre cómo se visualizará ese texto.
A partir de las etiquetas se pueden definir que parte del texto será un título, cuales serán párrafos

de texto normal, enumeraciones, citas y mucha más. También se pueden especificar formatos que
se quieren aplicar, por ejemplo indicar los lugares del documento donde se debe ver en negrita,
cursiva o un gráfico determinado).

El programa que interpreta el lenguaje HTML es el navegador (browser). Son ejemplos: Mozilla
Firefox, Google Chrome, Internet Explorer, Safari, entre muchos otros. Este lenguaje es el usado
por los navegadores para mostrar las páginas web.

Mozilla Firefox Google Chrome

Internet Explorer o Edge Safari

2
Diseño Web- HTML- Unidad 3 4to año computación

1. Lenguaje HTML
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un
organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C.
Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de
Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de
cualquier sistema operativo.

1.1 Sintaxis del lenguaje

El HTML es un lenguaje que basa su sintaxis en un elemento de base llamado etiqueta
(tag). Las etiquetas presentan en su mayoría dos partes:

Un comienzo <etiqueta>
Un cierre </etiqueta>

A todo lo incluido en el interior de esa etiqueta se le aplicarán las modificaciones que

caracterizan a esta etiqueta. Tomemos un ejemplo: las etiquetas <b> y </b> definen un texto en
negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código:

<b>Este texto tiene negrita</b>

Este texto tiene negrita

Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML escribiéramos:

<p>Este texto pertenece al primer párrafo</p>

<p>Ahora hemos cambiado de párrafo</p>

El resultado será:

Este texto pertenece al primer párrafo

Ahora hemos cambiado de párrafo

Otras etiquetas

3
Diseño Web- HTML- Unidad 3 4to año computación

Etiqueta Significado PRACTICA EL CODIGO EN TU DOCUMENTO HTML

<i> cursiva <i>Bienvenido a mi sitio web <i>
<u> subrayado <u>Bienvenido a mi sitio web <u>
<s> tachado <s>Bienvenido a mi sitio web <s>

También podemos combinar estas etiquetas:

<b><i><s>Bienvenido a mi sitio web<s><i><b>

1.2 Estructura de un documento HTML

Los documentos HTML se dividen en dos partes: la cabecera (head) y el cuerpo (body). La
cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El
cuerpo de la página incluye todos sus contenidos, como texto, tablas, imágenes, entre muchos
otros.
Esquema de las partes que forman un documento HTML

Importante: el cuerpo (body) contiene todo lo que el usuario ve en su

pantalla y la cabecera (head) contiene todo lo que no se ve (con la única
excepción del título de la página, que los navegadores muestran como
título de sus ventanas).

A continuación, se muestra el código HTML de una página web muy sencilla:

<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>Los diseñadores utilizan el <b>lenguaje HTML</b> para crear sus páginas
web, los programas que utilizan los diseñadores generan páginas escritas en HTML
y los navegadores que utilizamos los usuarios muestran las páginas Web después
de leer su contenido.</p>
</body>
</html>

4
Diseño Web- HTML- Unidad 3 4to año computación

Actividad 1

Lleve a la práctica el código HTML anterior teniendo en cuenta los siguientes pasos:

1. Para escribir el código HTML debemos disponer de un editor de textos. En el caso de Windows
podemos utilizar el Bloc de notas o instalar un editor especializado para programación como el
NotePad++
2. Copia el código HTML mostrado anteriormente y pégalo tal cual en el archivo en un archivo
nuevo del editor que estés utilizando.
3. Guarda el archivo con el nombre que quiera, pero no debe olvidarse de escribir la extensión
.html

Si hemos guardado correctamente el documento con la extensión .html veremos que el

archivo generado tiene el ícono de nuestro navegador por defecto. Esto no da la pauta de que
hicimos bien el trabajo y con hacer doble clic sobre el documento se tendría que abrir el
navegador y mostrar algo similar al siguiente texto:

Volviendo al código HTML del primer ejemplo, es importante conocer las tres etiquetas
principales de un documento HTML (<html>, <head>, <body>):
 <html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o
contenido puede colocarse antes o después de la etiqueta <html> (con una sola excepción
que se verá más adelante). En el interior de la etiqueta <html> se definen la cabecera y el
cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se
ignora.

 <head>: delimita la parte de la cabecera del documento. La cabecera contiene información
sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los
contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la
etiqueta <title>, que se utiliza para indicar el título del documento y que los navegadores
lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado
anteriormente, vuelve a abrir el primer ejemplo en cualquier navegador y observa dónde se
muestra el título de la página).

 <body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos
que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body>
de un documento contiene cientos de etiquetas HTML, mientras que el <head> no
contiene más que unas pocas.

5
Diseño Web- HTML- Unidad 3 4to año computación

1.3 Etiquetas, atributos y valores

Recordemos qué eran las etiquetas:

El lenguaje HTML se basa en la aplicación de múltiples etiquetas para dar formato y darle
características a un texto. Este texto es interpretado y mostrado por un navegador. Por lo cual
etiquetas (tags) son una marca o marcas que se dejan en un texto para que luego sean
interpretadas por el navegador, generalmente para realizar alguna acción sobre el mismo texto
marcado.
Las etiquetas pueden contener información adicional llamada atributos. No todos los
atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su propia lista de
atributos disponibles. Además, cada atributo también indica el tipo de valor que se le puede
asignar. Si el valor de un atributo no es válido, el navegador ignora ese atributo. Aunque cada una
de las etiquetas HTML define sus propios atributos, algunos de los atributos son comunes a
muchas o casi todas las etiquetas
Si vemos nuevamente el primer ejemplo de código HTML podemos ver que el texto está
encerrado entre las etiquetas <p> y </p>, es decir, la primera abre el párrafo y la segunda lo
cierra. En este caso no tenemos atributos, ya que solamente se indican las etiquetas para abrir y
terminar un párrafo. Ahora veamos la siguiente etiqueta que sirve para crear un hipervínculo (la
desarrollaremos más adelante en el presente módulo):

<a href="http://www.google.com">Ingresar a Google</a>

n el ejemplo vemos la etiqueta <a> para indicar el comienzo de un hipervínculo y la etiqueta de

cierre </a>. Pero la etiqueta de comienzo tiene un atributo que es href, luego un igual y el valor
de ese atributo, que en este caso es la url http://www.google.com entre comillas. Por otra parte,
el texto que se verá en la página será Ingresar a Google, marcado como un hipervínculo.

Actividad 2

Al código HTML de la actividad 1 agreguemos la línea de código con el

hipervínculo. El código nos debe quedar así:

6
Diseño Web- HTML- Unidad 3 4to año computación

<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>Los diseñadores utilizan el <b>lenguaje HTML</b> para crear sus páginas
web, los programas que utilizan los diseñadores generan páginas escritas en HTML
y los navegadores que utilizamos los usuarios muestran las páginas Web después
de leer su contenido.</p>
<a href="http://www.google.com">Ingresar a Google</a>

</body>
</html>

Guarde el documento HTML y pruébelo haciendo doble clic sobre él.

¿Qué diferencia encontró con respecto al primer código?

EJERCICIO DE PRACTICA GENERAL

Aplicando las etiquetas html vistas en la guía elabore su currículum. Se tendrá en cuenta en la
calificación que haga aplicación de las etiquetes vistas. Completa según corresponda

DATOS PERSONALES
NOMBRE:
APELLLIDO:
DIRECCION:
TELEFONO:
EMAIL.:

DATOS ACADEMICOS DESCRIPCIÓN

GUSTOS Y PASATIEMPOS

1.4 Estructurar un texto

La forma más sencilla de estructurar un texto consiste en separarlo por párrafos.
Además, HTML permite incluir títulos y subtítulos que delimitan cada una de las secciones
dentro del texto.
7
Diseño Web- HTML- Unidad 3 4to año computación

1.4.1 Párrafos
Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que permite definir
los párrafos que forman el texto de una página. Para delimitar el texto de un párrafo, se
encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo:

<html>

<head>

<title>Ejemplo de texto estructurado con párrafos</title>

</head>

<body>

<p>Este es el texto que forma el primer párrafo de la página.

Los párrafos pueden ocupar varias líneas y el navegador se encarga

de ajustar su longitud al tamaño de la ventana.</p>

<p>El segundo párrafo de la página también se define encerrando

su texto con la etiqueta p. El navegador también se encarga de

separar automáticamente cada párrafo.</p>

El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:

Ejemplo de texto HTML estructurado con párrafos

8
Diseño Web- HTML- Unidad 3 4to año computación

Alineación de párrafos

Para alinear un párrafo se utiliza el atributo align utilizado dentro de la etiqueta

<p>. Se puede alinear de tres formas diferentes:

Veamos algunos ejemplos:

Alinear a la izquierda

<p align="left"> Párrafo... </p>

Texto centrado

<p align="center"> Párrafo... </p>

Alinear a la derecha.

<p align="right"> Párrafo... </p>

Texto justificado

<p align="justify"> Párrafo... </p>

Actividad 3

Arme un texto con 4 párrafos y aplique un tipo de alineación a cada uno de ellos.

1. Recuerde que para escribir el código HTML debemos disponer de un editor de textos. En el
caso de Windows podemos utilizar el Bloc de notas o instalar un editor especializado para
programación como el NotePad++
2. Escribir el código HTML correspondiente.
3. Guarda el archivo con el nombre que quiera, pero no debe olvidarse de escribir la extensión
.html

1.4.2 Etiquetas de títulos de sección

Las etiquetas que definen los títulos predeterminados en HTML son:

9
Diseño Web- HTML- Unidad 3 4to año computación

<h1>, <h2>, <h3>, <h4>, <h5> y <h6>

La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los
titulares de la página. La importancia del resto de etiquetas es descendiente, de forma
que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes
de la página.

A continuación se muestra la definición formal de la etiqueta <h1>, siendo idéntica la

definición del resto de etiquetas de títulos de sección:

<h1> Texto del título... </h1>

1.4.3 Insertar líneas nuevas

Para incluir una nueva línea en un punto y forzar que el texto que sigue se muestre
en la línea inferior, se utiliza la etiqueta br. Esta etiqueta es de tipo de elemento en línea
y permite que el navegador cree una nueva línea

La etiqueta br es una de las pocas etiquetas especiales de HTML. La particularidad

de esta etiqueta es que es una etiqueta vacía, es decir, no encierra ningún texto. De esta
forma, la etiqueta debe abrirse y cerrarse de forma consecutiva: <br></br>.

En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se
está abriendo y cerrando de forma consecutiva: <br/>

Utilizando la etiqueta br se puede rehacer el ejemplo anterior para que respete las
líneas que forman el segundo párrafo:

<html>

<head>

<title>Ejemplo de etiqueta br</title>

</head>

<body>

<p>Este primer párrafo no contiene saltos de línea ni otro tipo de

espaciado.</p>

<p>Este segundo párrafo sí que contiene saltos <br/>

de <br/>

línea <br/>

y otro tipo de espaciado.</p>

</body>

</html>

10
Diseño Web- HTML- Unidad 3 4to año computación

El navegador mostrará las nuevas líneas que se indicaron en el código. A

continuación, se pueden ver las modificaciones implementadas:

MANEJO DE ETIQUETAS Y ATRIBUTOS AL TEXTO

El texto básico de un documento HTML puede escribirse sin etiquetas. Cada navegador lo visualiza
entonces con el tipo y tamaño de caracteres escogidos en su configuración por defecto, e
introduce un salto de línea cuando los caracteres alcanzan el borde de la ventana.

Para dominar las cuestiones de formato (de caracteres, de párrafo, etc.) es necesario utilizar las
etiquetas correspondientes.

La etiqueta básica

La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT>.

<FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos
entre <FONT> y </FONT>. Pero sin más especificaciones, la etiqueta aún no sirve para nada.

Se puede especificar el tipo de letra (es decir, la fuente de caracteres) añadiéndolo a la etiqueta,
de la siguiente manera (en este caso, la fuente escogida es Arial): <FONT
FACE="Arial">...</FONT>.

Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>. Para

especificar los colores, conviene saber al menos lo siguiente:
 Cada color posee su correspondiente código.
 Hay dos códigos: hexadecimal –lo más habitual– o RGB. En ambos casos se trata de
expresar las proporciones de tres colores básicos: rojo, verde y azul.
 Los valores hexadecimales de los tres colores se expresan de la siguiente manera:
 Rojo: color: #ff0000;
 Verde: color: #00ff00;
 Azul: color: #0000ff;
 Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:
 Rojo: color: RGB (255,0,0);
 Verde: color: RGB (0,255,0);
 Azul: color: RGB (0,0,255);
Todos los colores se expresan mediante combinaciones de estos tres colores básicos. Existen
muchos programas que proporcionan los valores de todos los colores que el usuario puede

11
Diseño Web- HTML- Unidad 3 4to año computación

componer. También en internet existen muchas páginas con los Códigos de colores.
https://htmlcolorcodes.com/es/

Los colores más básicos pueden especificarse sin código, simplemente escribiendo la palabra
correspondiente (por supuesto en inglés). Por ejemplo: <FONT
COLOR="blue">...</FONT>, <FONT COLOR="red">...</FONT>, etc.

Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE="?">...</FONT>. El

valor del tamaño ("?") deseado puede suministrarse de manera absoluta (un número del 1 al 7) o
relativa (+1, +2, -1, -2, etc., teniendo en cuenta que el valor por defecto es 3).6

Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, el
tipo, el tamaño y el color de los caracteres: <FONT FACE="Arial" COLOR="#0000FF"
SIZE="5">...</FONT>.

Con esta etiqueta hemos visto ya la sintaxis básica de las etiquetas HTML, que podíamos
formalizar así: <ETIQUETA [ATRIBUTO="valor"]>.

Lo anterior quiere decir que una etiqueta HTML (por ejemplo, FONT) puede llevar uno o varios
atributos (FACE, COLOR, SIZE), cuyos valores se colocan entrecomillados tras el signo igual
(="arial", ="#0000FF", etc.).

Esto será válido para todas las etiquetas HTML que veamos a partir de este momento.

AHORA practiquemos con las posibilidades de la etiqueta <FONT>.

1. Abre un nuevo editor de texto note pad++

2. Graba este documento en la carpeta páginas de tu sitio como: texto.html
3. Procede a escribir el siguiente código en tu editor. Recuerda guardar constantemente y
visualizar como se observa tu página en el navegador.

CODIGO HTML
<HTML>
<HEAD>
<TITLE>Ejemplo de etiquetas de texto</TITLE>
</HEAD>
<BODY>
<h1>ETIQUETAS PARA EL MANEJO DE TEXTO EN HTML</H1>
<hr align="left" width="300%" size="5" noshade>
Ejemplo de un texto simple: cada navegador lo visualizara segun su configuracion por defecto.
<FONT SIZE="1">MI NOMBRE EN TAMANO 1.</FONT>
<FONT SIZE="2">MI NOMBRE EN TAMANO 2.</FONT>
<FONT SIZE="3">MI NOMBRE EN TAMANO 3.</FONT>
<FONT SIZE="4">MI NOMBRE EN TAMANO 4.</FONT>
<FONT SIZE="5">MI NOMBRE EN TAMANO 5.</FONT>
<FONT SIZE="6">MI NOMBRE EN TAMANO 6.</FONT>
<FONT SIZE="+1">Este texto es tamano +1 (que es lo mismo que tamaño 4).</FONT>
<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT>
</BODY>
</HTML>

COMO SE OBSERVARA LA PAGINA EN EL NAVEGADOR

12
Diseño Web- HTML- Unidad 3 4to año computación

Nuestra página web, tal y como está diseñada en este ejercicio no posee ninguna especificación de
líneas. A pesar de que las etiquetas están ordenadas en varias líneas, el navegador coloca todos
los caracteres seguidos (sólo tiene en cuenta un único espacio entre palabras). Para corregir este
problema podemos utilizar la etiqueta <BR>, que introduce un salto de línea. Nuestra página
quedaría entonces así: (procede a añadir la etiqueta <BR> a las líneas de código del ejercicio)

CODIGO HTML
<HTML>
<HEAD>
<TITLE>Ejemplo de etiquetas de texto</TITLE>
</HEAD>
<BODY>
<h1>ETIQUETAS PARA EL MANEJO DE TEXTO EN HTML</H1>
<hr align="left" width="300%" size="5" noshade>
Ejemplo de un texto simple: cada navegador lo visualizara segun su configuracion por defecto.<BR>
<FONT SIZE="1">MI NOMBRE EN TAMANO 1.</FONT><BR>
<FONT SIZE="2">MI NOMBRE EN TAMANO 2.</FONT><BR>
<FONT SIZE="3">MI NOMBRE EN TAMANO 3.</FONT><BR>
<FONT SIZE="4">MI NOMBRE EN TAMANO 4.</FONT><BR>
<FONT SIZE="5">MI NOMBRE EN TAMANO 5.</FONT><BR>
<FONT SIZE="6">MI NOMBRE EN TAMANO 6.</FONT><BR>
<FONT SIZE="+1">Este texto es tamaNo +1 (que es lo mismo que tamaño 4).</FONT><BR>
<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT><BR>
</BODY>
</HTML>

COMO SE OBSERVARA LA PAGINA EN EL NAVEGADOR

1.4.4 Insertar espacios en blanco

HTML no muestra más de un espacio en blanco palabras. Para poder incluir

espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el
texto &nbsp;

Así, el código HTML del ejemplo anterior se debe rehacer para incluir los espacios
en blanco adicionales:

13
Diseño Web- HTML- Unidad 3 4to año computación

<html>

<head>

<title>Ejemplo de entidad &nbsp;</title>

</head>

<body>

<p>Este primer párrafo no tiene saltos de línea ni otro tipo de

espaciado.</p>

<p>Este segundo párrafo sí que contiene saltos <br/>

de <br/>

línea <br/>

y &nbsp;&nbsp; otro &nbsp; tipo &nbsp; de &nbsp; espaciado.</p>

</body>

</html>

A continuación podemos ver como se vería el texto en el navegador una vez que
implementemos las modificaciones:

1.5 Enlaces
El uso de hipertexto para crear documentos interactivos que permiten acceder a
información adicional cuando se solicita, es una de las claves del éxito del lenguaje HTML.
El elemento principal del hipertexto es el hipervínculo, también llamado enlace o vínculo.

14
Diseño Web- HTML- Unidad 3 4to año computación

Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría
de enlaces relacionan páginas Web, también es posible enlazar otros recursos como
imágenes, documentos y archivos.

Una característica que no se suele tener en cuenta en los enlaces es que están
formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un
recurso y apunta hacia otro recurso.

URL

Antes de empezar a incluir enlaces en las páginas HTML creadas, es necesario

comprender y dominar el concepto de URL. El acrónimo URL (Uniform Resource Locator)
hace referencia al identificador único de cada recurso disponible en Internet. Las URL son
esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML
como las imágenes y los formularios.

Cada página Web que está publicada en Internet tiene un “nombre” único que
permite diferenciarla de las demás. Ese “nombre único” es la URL de la página y coincide
con la dirección que muestra el navegador para esa página. Si se accede a la página
principal de Google, la dirección que muestra el navegador es:

http://www.google.com

La cadena de texto http://www.google.com es la URL de la página principal de

Google. La URL de una página es muy importante, ya que para crear un enlace que
apunte a una determinada página, es imprescindible conocer su URL. Las partes que
forman una URL sencilla son siempre las mismas. Si por ejemplo se considera la
siguiente URL:

http://www.welcomeargentina.com/ciudadbuenosaires/comollegar.html

Las partes que componen la URL anterior son:

▪ Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese
recurso. Todas las páginas web utilizan http://. Las páginas Web seguras (por ejemplo las de
los bancos y las de los servicios de email) utilizan https:// (se añade una letra s).

▪ Servidor (www.welcomeargentina.com): simplificando mucho su explicación, se

puede decir que se trata de la computadora en la que se encuentra guardada la página
que se quiere acceder.

▪ Ruta (/ciudaddebuenosaires/comollegar.html): camino que se debe seguir, una

vez que se ha llegado al servidor, para localizar la página concreta que se quiere acceder.

Por lo tanto, las URL no sólo identifican de forma única a cada recurso de Internet,
sino que también proporcionan la información necesaria para poder llegar hasta ese
recurso. Aunque la mayoría de URL son similares a la mostrada anteriormente, las URL
pueden llegar a ser muy complejas y estar formadas por más partes.

15
Diseño Web- HTML- Unidad 3 4to año computación

1.5.1 Enlaces relativos y absolutos

Cuando hacemos clic sobre algunos enlaces, el navegador abandona el sitio Web
para acceder a una página que se encuentra en otro sitio. Estos enlaces se denominan
enlaces externos. Sin embargo, la mayoría de enlaces de un sitio Web apuntan a páginas
del propio sitio Web, por lo que se llaman enlaces internos.

Además de interno/externo, la otra característica importante que diferencia los

enlaces (y por tanto, también a las URL) es si el enlace es absoluto o relativo. Las URL
absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se
necesita más información para obtener el recurso enlazado.

Las URL relativas prescinden de algunas partes de las URL para hacerlas más
breves. Como se trata de URL incompletas, es necesario disponer de información
adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea
útil es imprescindible conocer la URL del origen del enlace.

Las URL relativas se construyen a partir de las URL absolutas y permiten prescindir
de la parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del
recurso enlazado. Aunque las URL relativas pueden ser difíciles de entender para los que
comienzan con HTML, son tan útiles que todos los sitios Web las utilizan.

Pensemos en una página publicada en

http://www.ejemplo.com/ruta1/ruta2/pagina1.html

y quieres incluir en ella un enlace a otra página que se encuentra en

http://www.ejemplo.com/ruta1/ruta2/pagina2.html.

Como las URL identifican de forma única a los recursos de Internet y proporcionan
la información necesaria para llegar hasta ellos, el enlace debería utilizar la URL completa
de la segunda página.

Las URL completas también se llaman URL absolutas, ya que el navegador no

necesita disponer de información adicional para localizar el recurso enlazado. Si se
utilizan siempre las URL absolutas, los enlaces están completamente definidos.

Sin embargo, escribir siempre las URL completas es bastante aburrido, cuesta
mucho tiempo y hace imposible cambiar la ubicación de los contenidos de un sitio web.
Por ese motivo, casi todos los sitios web de Internet utilizan URL relativas siempre que es
posible.

Una URL relativa es una versión abreviada de una URL absoluta. Su objetivo es
eliminar todas las partes de la URL absoluta que se pueden adivinar a partir de la
información de contexto de la página web. En otras palabras, las URL relativas
aprovechan la inteligencia de los navegadores para crear URL incompletas que los
navegadores pueden completar deduciendo la información que falta.

16
Diseño Web- HTML- Unidad 3 4to año computación

Considerando de nuevo el ejemplo anterior, la URL a la que se quiere enlazar

utiliza el mismo protocolo y se encuentra en el mismo servidor que la página origen, por lo
que la URL relativa puede prescindir de esas partes:

URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html

URL relativa: /ruta1/ruta2/pagina2.html

En el ejemplo anterior, las dos URL son equivalentes porque cuando no se indica el
protocolo y el servidor de una URL, los navegadores suponen que son los mismos que los
de la página origen.

Diferentes URL relativas

1) El origen y el destino del enlace se encuentran en el mismo directorio

Si desde una página Web se quiere enlazar un recurso que se encuentra en el

mismo directorio (carpeta) del servidor, la URL relativa puede prescindir de todas las
partes de la URL absoluta salvo el nombre del recurso enlazado.

Ejemplo:

URL de la página de origen, es decir donde se encuentra el

enlace http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html

Recurso enlazado: una página Web llamada pagina2.html y que se encuentra en el

mismo directorio.

URL absoluta: http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina2.html

URL relativa: pagina2.html

Tengamos en cuenta…

Cuando el navegador encuentra una URL relativa que sólo consiste en el nombre
de un recurso, supone que el protocolo, servidor y directorio del recurso enlazado son los
mismos que los del origen del enlace.

2) El destino del enlace se encuentra cerca de su origen y en un nivel superior

En este caso, el recurso que se enlaza no está en el mismo directorio que el origen
del enlace, pero sí que está cerca y en algún directorio superior. La ruta de la URL relativa
debe indicar de alguna manera que es necesario subir un nivel en la jerarquía de
directorios para llegar hasta el recurso.

Para indicar al navegador que debe subir un nivel, se incluyen dos puntos y una
barra (../) en la ruta del recurso enlazado. De esta forma, cada vez que aparece ../ en una
URL relativa, significa que se debe subir un nivel.

17
 Diseño Web- HTML- Unidad 3 4to año computación

URL de la página de origen, es decir donde se encuentra el

enlace http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html

Recurso enlazado: una página Web llamada pagina2.html y que se encuentra en el

directorio superior llamado ruta2

URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html

URL relativa: ../pagina2.html

Si se intentan subir más niveles jerárquicos de los que es posible, el navegador ignora
todos los ../ sobrantes. Si la página que tiene el enlace es
http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html y la URL relativa que se incluye es
../../../../../pagina2.html, el navegador realmente la interpreta como ../../../pagina2.html.

Tengamos en cuenta…

Como el objetivo de las URL relativas es crear URL más cortas y sencillas que las URL
absolutas, este método sólo se puede utilizar cuando el origen y el destino se encuentran cerca,
porque de otro modo la URL relativa se complica demasiado.

3) El destino del enlace se encuentra cerca de su origen y en un nivel inferior

Este caso es muy similar al anterior, pero más sencillo. Si el recurso enlazado se
encuentra en algún directorio inferior al que se encuentra el origen, sólo es necesario indicar el
nombre de los directorios a los que debe entrar el navegador.

URL de la página de origen, es decir donde se encuentra el enlace

http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html

18
Diseño Web- HTML- Unidad 3 4to año computación

De la misma forma, se pueden indicar varios directorios seguidos para que el

navegador descienda jerárquicamente por la estructura de directorios:

URL de la página de origen, es decir donde se encuentra el

enlace http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html

Recurso enlazado: una página Web llamada pagina2.html y que se encuentra en un

directorio interior llamado ruta6 que está dentro del directorio ruta5 y que a su vez está
dentro del directorio ruta4

URL absoluta:

http://www.ejemplo.com/ruta1/ruta2/ruta3/ruta4/ruta5/ruta6/pagina2.html

URL relativa:

ruta4/ruta5/ruta6/pagina2.html

Atributo href

El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la
URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador
se dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser
absolutas, relativas, internas y externas.

Con la definición anterior, para crear un enlace que apunte a la página principal de
Google solamente habría que incluir lo siguiente en un documento HTML:

<a href="http://www.google.com">Página principal de Google</a>

Como el atributo href indica una URL, un enlace puede apuntar a cualquier tipo de
recurso al que pueda acceder el navegador. El siguiente enlace apunta a una imagen,
que se mostrará en el navegador cuando el usuario pinche sobre el enlace:

<a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante para un

fondo de escritorio</a>

De la misma forma, los enlaces pueden apuntar directamente a documentos PDF,

Word y otros.

<a href="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a> <a

href="http://www.ejemplo.com/informe.doc">Descargar informe completo [DOC]</a>

19
Diseño Web- HTML- Unidad 3 4to año computación

Atributo Target

Es interesante utilizar esta opción cuando la página de destino está fuera de

nuestro sitio para que el sitio enlazado se abra en una nueva pestaña del navegador.

<a href="http://www.google.com" target ="_blank">Buscar información</a>

Atributo name

El otro atributo básico de la etiqueta <a> es name, que permite definir enlaces
dentro de una misma página web. Si una página es muy larga, puede ser útil mostrar
enlaces de tipo “Ir a la segunda sección”, “Volver al principio de la página” o ir a un
concepto que se desarrolla posteriormente en la misma página.

Este tipo de enlaces son especiales, ya que la URL de la página siempre es la

misma para todas las secciones y por tanto, debe añadirse otra parte a las URL para
identificar cada sección.

<a name="primera_seccion"></a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris

id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praesent
condimentum mattis ligula.</p>

...

<a name="segunda_seccion"></a>

<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia

a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat
varius, facilisis eget.</p>

...

Una vez definidas las secciones con el atributo name, es posible crear un enlace
que apunte directamente a una sección concreta de una página.

20
Diseño Web- HTML- Unidad 3 4to año computación

Ejemplos:

<!-- Enlace normal a la página -->

<a href="http://www.ejemplo.com/pagina1.html">Enlace a la página 1</a>

<!-- Enlace directo a la segunda sección de la página -->

<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion">Enlace
a la sección 2 de la página 1</a>

La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces
normales, salvo que se añade el símbolo # seguido del nombre de la sección a la que se
apunta.

Cuando el usuario pincha sobre uno de estos enlaces, el navegador accede a la

página apuntada por la URL y baja directamente a la sección cuyo nombre se indica
después del símbolo #.

También es posible utilizar este tipo de enlaces con URL relativas en una misma
página.

El siguiente ejemplo añade enlaces de tipo “Volver al inicio de la página” en varias

secciones:

<a name="inicio"></a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula
eu felis adipiscing ultrices. Praesent condimentum mattis ligula.</p>

<a href="#inicio">Volver al inicio de la página</a>

Actividad 4

Confeccionar una página principal llamada index.html con dos hipervínculos a las
páginas pagina2.html y pagina3.html En total se deberán crear 3 archivos HTML.

Luego en las dos páginas secundarias crear enlaces a la página principal.

1. Recuerde que para escribir el código HTML debemos disponer de un editor de textos. En el
caso de Windows podemos utilizar el Bloc de notas o instalar un editor especializado para
programación como el NotePad++
2. Escribir el código HTML correspondiente a cada página (en total 3) y guardar cada
documento como se indica en el punto 3.
21
Diseño Web- HTML- Unidad 3 4to año computación

3. Guarda cada archivo con el nombre indicado, pero no debe olvidarse de escribir la
extensión .html

1.6 Imágenes
Las imágenes de contenido son las que proporcionan información y complementan
la información textual. A continuación se muestra la definición de la etiqueta <img>,
utilizada para incluir las imágenes en las páginas HTML:

Etiqueta img

Atributos que pueden incluirse dentro de la etiqueta

img: src = "url" - Indica la URL de la imagen que se

muestra alt = "texto" - Descripción corta de la imagen

name = "texto" - Nombre del elemento imagen

height = "unidad_de_medida" - Indica la altura con la que se debe mostrar la imagen (no
es obligatorio que coincida con la altura original de la imagen)

width = "unidad_de_medida" - Indica la anchura con la que se debe mostrar la imagen (no
es obligatorio que coincida con la anchura original de la imagen)

El atributo src es similar al atributo href de los enlaces, ya que establece la URL de
la imagen que se va a mostrar en la página. Las URL indicadas pueden ser absolutas o
relativas. El atributo alt tiene la función de describir brevemente la imagen a la que hace
referencia. También es muy útil para la accesibilidad de un sitio Web, imagina que una
persona ciega visita tu Web y para ellos usa un navegador que convierte el texto a voz y
al tratar de leer la imagen no va a leer nada ya que si no tiene el atributo alt el navegador
no sabrá interpretar la imagen

Ejemplo sencillo para incluir una imagen:

<img src="logo.gif" alt="Logotipo de la empresa" />

La etiqueta img no tiene etiqueta de cierre, la forma de cerrar cerrarla es mediante

el símbolo /> al final de la etiqueta.

Los formatos de imagen que más utilizados en las páginas web y que leen todos
los navegadores son: GIF, JPG PNG y SVG

<img src="imagenes/proyecto2.jpg" alt="Imagen del Proyecto 2" />

22
Diseño Web- HTML- Unidad 3 4to año computación

Tengamos en cuenta…

En el ejemplo anterior, la imagen se encuentra en el directorio imágenes en el

servidor. Debemos separar el nombre del directorio (carpeta) con una / del nombre y
extensión de la imagen, sin dejar espacios en blanco. Se trata de una estrategia habitual
en la mayoría de sitios web el guardar todas las imágenes en un directorio dentro del
directorio principal del sitio donde se encuentran el resto de contenidos HTML. Además, el
directorio siempre suele llamarse de la misma manera: “imagenes” o “images”.

Atributos width y height

Los atributos width y height se utilizan para indicar la anchura y altura con la que se
muestran las imágenes.

Ejemplo:

<img src="imagenes/foto1.jpg" alt="Fotografía de un paisaje" width="450"

height="200" />

Si el valor del atributo width o height se indica mediante un número entero, se

sobreentiende que hace referencia a la unidad de medida píxel. Por tanto, en el ejemplo
anterior, la foto se muestra con una anchura de 450 píxeles y una altura de 200 píxeles.

También es posible indicar la anchura y altura en forma de porcentaje. En este

caso, el porcentaje hace referencia a la altura/anchura del elemento en el que está
contenida la imagen. Si la imagen no se encuentra dentro de ningún otro elemento, hace
referencia a la anchura/altura total de la página.

Atributos vspace y hspace

Se utilizan para indicar el espacio libre (en píxeles) que tiene que colocarse entre la
imagen y los demás elementos que la rodean, como texto u otras imágenes. El atributo
vspace deja espacio arriba y debajo de la imagen y hspace deja espacio a los lados
izquierdo y derecho.

Enlaces a través de imágenes

Una imagen, lo mismo que un texto, puede servir como un enlace. El siguiente es
un ejemplo simple del código necesario:

<a href="http://www.google.com"><img src="boton.gif" width="100" height="10"></a>

23
Diseño Web- HTML- Unidad 3 4to año computación

Actividad:
Realizar una página web sobre la contaminación ambiental, para ello deberás trabajar con el texto
que se encuentra dentro de esta misma carpeta, con nombre “contaminación”

Las imágenes deberás extraerlas de internet y guardarlas en una carpeta

La página a diseñar deberá tener:

1 imagen.
1 color de fondo a elección (ingresar al link para seleccionar color
https://htmlcolorcodes.com/es/)
1 enlace para extraer más información
Y establecer un enlace entre páginas

Una ayudita…

24
Diseño Web- HTML- Unidad 3 4to año computación

Para tener en cuenta: …

Estructura básica

 Cada página comienza con: < HTML > .

 A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
 Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las
instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.
 La página acabará con < /HTML > .

Es decir:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>

Cabecera

La cabecera de un documento está delimitada por las etiquetas < HEAD > y </HEAD > Sus
componentes son opcionales. El más importante es <TITLE> , que permite escribir el título del
documento. El título no se muestra en la página, sino en la parte superior de la ventana del
visualizador, como identificador en los bookmarks y en la history list. Se utiliza de la
siguiente forma:

25
Diseño Web- HTML- Unidad 3 4to año computación

<HEAD>
<TITLE>Título del documento HTML</TITLE>
</HEAD>

Cuerpo

Es la parte delimitada por <BODY> y < /BODY > . Puede llevar los siguientes atributos:

 BACKGROUND="imagen": define el fondo.

 BGCOLOR="######": color del fondo (sólo si no se define una imagen de fondo, o si

ésta imagen no puede obtenerse. Por ahora nos basta saber que para los colores básicos
se puede utilizar su nombre en inglés: White, blue, red, green ...

 TEXT="######": color del texto. Por defecto será negro.

 LINK="######": color de los links. Por defecto será azul.

Ejemplos

<body background= "fondo.gif"> El documento tendrá como fondo la imagen indicada.

<body bgcolor="white" text="blue" El fondo será blanco, el texto azul, y todos los links
link="red" vlink="red"> (visitados o no) serán rojos

Actividad repaso general

Realiza la actividad que se encuentra dentro de la carpeta html
Recuerda guardar las imágenes dentro de la carpeta

26