Introduccion A HTML

DISEÑO WEB
- HTML-
4to AÑO
1
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 qué parte del texto será un título, cuáles 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
2
Internet Explorer o Edge Safari
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 y definen un texto en
negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código:
Este texto tiene negrita
Este texto tiene negrita
Las etiquetas y definen un párrafo. Si en nuestro documento HTML escribiéramos:
Este texto pertenece al primer párrafo

Ahora hemos cambiado de párrafo
El resultado será:
Este texto pertenece al primer párrafo

Ahora hemos cambiado de párrafo
Otras etiquetas
3
Etiqueta Significado PRACTICA EL CODIGO EN TU DOCUMENTO HTML
 cursiva Bienvenido a mi sitio web 
 subrayado Bienvenido a mi sitio web 
<s> tachado <s>Bienvenido a mi sitio web <s>
También podemos combinar estas etiquetas:
<s>Bienvenido a mi sitio web<s>
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>
Los diseñadores utilizan el lenguaje HTML 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.
</body>
</html>
4
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
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 y , 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
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
Los diseñadores utilizan el lenguaje HTML 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.
<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.
1.4.1 Párrafos
7
Una de las etiquetas más utilizadas de HTML es la etiqueta , 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 , como muestra el siguiente ejemplo:
<html>
<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>
<body>
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.
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.
El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:
Ejemplo de texto HTML estructurado con párrafos
8
Alineación de párrafos
Para alinear un párrafo se utiliza el atributo align utilizado dentro de la etiqueta

. Se puede alinear de tres formas diferentes:
Veamos algunos ejemplos:
Alinear a la izquierda
 Párrafo... 
Texto centrado
 Párrafo... 
Alinear a la derecha.
 Párrafo... 
Texto justificado
 Párrafo... 
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:
<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
9
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: .
En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se está
abriendo y cerrando de forma consecutiva: 
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>
Este primer párrafo no contiene saltos de línea ni otro tipo de

espaciado.
Este segundo párrafo sí que contiene saltos 
de 
línea 
y otro tipo de espaciado.
</body>
</html>
El navegador mostrará las nuevas líneas que se indicaron en el código. A

continuación, se pueden ver las modificaciones implementadas:
10
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 .

 es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos
entre y . 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): ....
Se puede especificar el color de la fuente con la etiqueta .... 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
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: ..., ..., etc.
Se puede especificar el tamaño de la fuente con la etiqueta .... 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
11
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: ....
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 .
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.
MI NOMBRE EN TAMANO 1.
Este texto es tamano +1 (que es lo mismo que tamaño 4).
Este texto posee varias especificaciones de formato.
</BODY>
</HTML>
COMO SE OBSERVARA LA PAGINA EN EL NAVEGADOR
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 , que introduce un salto de línea. Nuestra página
quedaría entonces así: (procede a añadir la etiqueta a las líneas de código del ejercicio)
CODIGO HTML
<HTML>
<HEAD>
<TITLE>Ejemplo de etiquetas de texto</TITLE>
</HEAD>
12
<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. 
MI NOMBRE EN TAMANO 1. 
Este texto es tamaNo +1 (que es lo mismo que tamaño 4). 
Este texto posee varias especificaciones de formato. 
</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
Así, el código HTML del ejemplo anterior se debe rehacer para incluir los espacios
en blanco adicionales:
<html>
<head>
<title>Ejemplo de entidad </title>
</head>
<body>
Este primer párrafo no tiene saltos de línea ni otro tipo de

espaciado.
Este segundo párrafo sí que contiene saltos 
de 
línea 
y otro tipo de espaciado.
</body>
</html>
13
A continuación, podemos ver como se vería el texto en el navegador una vez que
implementemos las modificaciones:
Tarea
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.
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.
14
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.
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.
15
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.
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.
16
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.
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
17
De la misma forma, se pueden indicar varios directorios seguidos para que el
navegador descienda jerárquicamente por la estructura de directorios:
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>
18
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>
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.
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
19
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" />
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
20
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>
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.
21
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…
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>
22
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:
<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
23

Introduccion A HTML

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccion A HTML

Cargado por

Copyright:

Formatos disponibles

DISEÑO WEB

Un documento hipermedia es un hipertexto, pero que no incluye sólo

El lenguaje estandarizado para la creación de páginas Web es el

Mozilla Firefox Google Chrome

1.1 Sintaxis del lenguaje

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

<b>Este texto tiene negrita</b>

Este texto tiene negrita

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

Este texto pertenece al primer párrafo

También podemos combinar estas etiquetas:

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

1.2 Estructura de un documento HTML

Esquema de las partes que forman un documento HTML

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

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

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

<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

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

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

DATOS ACADEMICOS DESCRIPCIÓN

1.4 Estructurar un texto

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

<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

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

Veamos algunos ejemplos:

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

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

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

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

1.4.2 Etiquetas de títulos de sección

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

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

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

1.4.3 Insertar líneas nuevas

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

<title>Ejemplo de etiqueta br</title>

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

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

y otro tipo de espaciado.</p>

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

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

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

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

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

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

COMO SE OBSERVARA LA PAGINA EN EL NAVEGADOR

COMO SE OBSERVARA LA PAGINA EN EL NAVEGADOR

1.4.4 Insertar espacios en blanco

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

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

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

<title>Ejemplo de entidad </title>

y otro tipo de espaciado.</p>