Introduccion A HTML
Introduccion A HTML
- 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.
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.
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.
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.
Un comienzo <etiqueta>
Un cierre </etiqueta>
Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML escribiéramos:
El resultado será:
Otras etiquetas
3
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>
<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
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
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 <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):
Actividad 2
6
<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>
DATOS PERSONALES
NOMBRE:
APELLLIDO:
DIRECCION:
TELEFONO:
EMAIL.:
GUSTOS Y PASATIEMPOS
1.4.1 Párrafos
7
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>
</head>
<body>
8
Alineación de párrafos
Alinear a la izquierda
Texto centrado
Alinear a la derecha.
Texto justificado
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
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.
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>
</head>
<body>
de <br/>
línea <br/>
</body>
</html>
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
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>.
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.
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.
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>
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>
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.<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>
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>
</head>
<body>
de <br/>
línea <br/>
</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
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
http://www.welcomeargentina.com/ciudadbuenosaires/comollegar.html
▪ 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).
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.
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.
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.
http://www.ejemplo.com/ruta1/ruta2/pagina1.html
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.
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.
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.
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:
enlace http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.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.
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.
enlace http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.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:
enlace http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
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:
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:
18
Atributo Target
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.
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
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
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
Tengamos en cuenta…
Los atributos width y height se utilizan para indicar la anchura y altura con la que se
muestran las imágenes.
Ejemplo:
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.
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.
Una imagen, lo mismo que un texto, puede servir como un enlace. El siguiente es un
ejemplo simple del código necesario:
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”
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…
Estructura básica
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:
Ejemplos
<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