Introducción al HTML

1. Introducción al
lenguaje HTML
1

2. 1. Introducción
2. Etiquetas
3. Estructura de una página HTML
4. El color
5. Enlaces
6. Mapa de la web
7. Formateo de textos y párrafos
8. Ver código fuente
Indice 2

3. 1. Introducción
Responde a estas preguntas:
•¿Qué es Internet?
• ¿Cómo nació Internet?
• ¿Qué es www?
• ¿Qué servicios ofrece Internet además de WWW?
• ¿Qué es HTML?
Indice 3

4. 1. Introducción
Estamos acostumbrados a ver un ordenador como una
máquina individual, en la que trabajamos sobre los
archivos que tenemos en nuestro disco duro y
manejamos algún programa que tenemos instalado.
Sin embargo, los ordenadores no sólo pueden trabajar
individualmente. También pueden conectarse entre
ellos, con lo cual pueden compartir la información. A
esto se le denomina “tener los ordenadores en red”, o
“red de ordenadores”.
Indice 4

5. 1. Introducción
Internet no es más que un sistema que conecta a
multitud de ordenadores en red para que puedan
compartir la información.
Internet surgió a finales de los 60, desde el
departamento de defensa de los Estados Unidos.
Indice 5

6. 1. Introducción
¿Qué es HTML?
HTML son las siglas de Hyper Text Markup Lenguage,
lenguaje de Hipertexto, y es el lenguaje de mediante el
cual se escriben y diseñan las páginas Web.
En realidad es mucho más sencillo de lo que parece,
porque se escribe como si fuera un documento de
texto y es suficiente con un procesador/editor de
textos (por ejemplo el Bloc de Notas de Windows) para
poder realizar el trabajo.
Indice 6

7. 1. Introducción
Un documento HTML es simplemente un documento de
texto que contiene algunas instrucciones sobre cómo
se representarán los elementos.
El HTML permite incluir en el diseño de las páginas Webs
textos, sonidos e imágenes, combinándolos de acuerdo
a nuestras necesidades. Además, podemos incluir
enlaces (links) a otras páginas Web.
Indice 7

8. 1. Introducción
Para poder ver lo que hemos diseñado en HTML
necesitamos un navegador. El navegador “entiende” el
lenguaje HTML y hace visible lo que hemos escrito
usando el citado código.
El cliente (ordenador que quiere ver una página ) se
conecta al servidor (ordenador que tiene almacenada
el código html). El cliente solicita la página al servidor
y éste le envía el fichero de texto HTML que el
navegador del cliente interpreta. Esto se hace
mediante el protocolo HTTP.
Indice 8

9. 1. Introducción
¿Qué es un navegador?
Los navegadores son los programas informáticos que
comprenden” el lenguaje HTML y permiten visualizar
las páginas Web.
Dos de los más utilizados son:
Internet Explorer
Mozilla Firefox
Indice 9

10. 1. Introducción
Aplicaciones mínimas para construir una página HTML:
• Procesador de textos básico (p.e. Notepad)
• Navegador para visualizar el resultado (`p.e. Explorer)
Indice 10

11. 1. Introducción
En el editor de textos iremos introduciendo lo que
queremos visualizar y cómo queremos hacerlo para
que después pueda ser entendido por un navegador.
Indice 11

12. 1. Introducción
Pasos para crear la primera página:
• Creamos un directorio dentro “Mis documentos” llamado
HTML. Crear directorio Prueba01
• Abrir “Block de notas”
• Escribir: Página de prueba HTML
• Guardar como index.html en el directorio creado
• Abrir la página con un navegador
• Ya hemos creado nuestra primera página web
Indice 12

13. 1. Introducción
Aparte del block de notas de windows se pueden
encontrar muchos editores HTML, más elaborados y
complejos, que nos pueden facilitar el trabajo a la hora
de programar. Por ejemplo AlleyCode, CoffeeCup,
PageBreeze o WebGlu. Sin embargo, este curso lo
haremos simplemente con el bloc de notas de
windows, porque pretendemos conocer el lenguaje
HTML desde su inicio. Sólo así seremos capaces
después de sacar todo el rendimiento a los distintos
programas que existen en el mercado.
Indice 13

14. 1. Introducción
Ejercicio:
Bajar de Internet algún editor de textos que nos ayude a
escribir código HTML, por ejemplo, AlleyCode.
Abrir la página que hemos creado con el block de notas.
Este es nuestro punto de partida
Indice 14

15. 1. Introducción
Sobre los nombres de archivo:
El archivo puede tener el nombre que deseemos, no
obstante, se recomienda guardar los archivos con
algún criterio para facilitar su identificación. Es
habitual que la primera página o portada lleve el
nombre de “index.htm” o “index.html”. Es una
convención que nos ayuda a distinguir la página que
dará entrada a todas las demás.
Indice 15

16. 1. Introducción
En cuanto a las extensiones, podemos usar
indistintamente .htm o .html. Ambos archivos son
igualmente interpretados, aunque es recomendable
tener el hábito de guardar los archivos siempre con la
misma extensión.
IMPORTANTE: cuando incluimos archivos o enlaces a
ficheros en nuestro código, es importante que las
mayúsculas/minúsculas coincidan con el nombre del
archivo. De lo contrario podemos encontrarnos con
problemas inesperados
Indice 16

17. 1. Introducción
Podemos grabar los archivos generados en HTML en
cualquier directorio creado, pero, al igual que con los
nombres, es importante ser muy ordenado en su
colocación, ya que cuando enlazamos diferentes
páginas Web es vital conocer la ubicación exacta de los
archivos. Por ejemplo, las imágenes las agruparemos
en una misma carpeta, evitando así que se diseminen
entre los distintos archivos.
Indice 17

18. 2. Etiquetas
Las etiquetas (tags en inglés) son elementos especiales
que sirven para indicarle al navegador cómo tiene
que mostrar el texto, las imágenes.... que queremos
incluir en nuestra página
Indice 18

19. 2. Etiquetas
La mayoría de las etiquetas están formadas por dos
partes, una de Apertura y otra de Cierre:
Etiqueta de Apertura: <etiqueta>
Etiqueta de Cierre: </etiqueta>
Todo lo que introduzcamos entre ellas se verá afectado
por el formato que indique la etiqueta.
Indice 19

20. 2. Etiquetas
Hay otro tipo de etiquetas que no son necesario cerrar
como:
<BR> que indica un salto de línea
<HR> que muestra un separador
Indice 20

21. 2. Etiquetas
Ejemplo. en el directorio prueba02 crearemos el
fichero index.html y guardaremos lo siguiente:
Texto sin formato
Texto sin formato <br>
<b>Texto en negrita</b><br>
Texto sin formato
Indice 21

22. 2. Etiquetas
Ejercicio: crear una página que tenga este aspecto y
guardarla en el directorio prueba03:
__________________________________
Contenidos del tema:
Introducción
Etiquetas
Estructura de una página HTML
Formateo de textos y párrafos
Listas
Imágenes y color
Tablas
__________________________________
Indice 22

23. 2. Etiquetas
Atributos:
las directivas pueden contener atributos que indican
características del elemento al que hacen referencia.
Por ejemplo, la directiva FONT puede incluir el color
que tendrá el texto al que afecte de la siguiente
manera:
<FONT color=“red”>Rojo</FONT>Rojo
Indice 23

24. 2. Etiquetas
Es muy importante el orden de en que se escriben las
etiquetas. Ejemplo (prueba04):
<font color=red>
Contenidos del tema:<br><br>
<font color=green>
Introducción<br>
Etiquetas<br>
Estructura de una página HTML<br>
Formateo de textos y párrafos<br>
Listas<br></font>
Imágenes y color<br></font>
Tablas<br>
Indice 24

25. 3. Estructura de una página HTML
La estructura general de una página web es:
<HTML>
<HEAD>
…
</HEAD>
<BODY>
…
</BODY>
</HTML>
NOTA: aunque todo funcione sin estas etiquetas, es
conveniente estructurar correctamente las páginas.
Indice 25

26. 3. Estructura de una página HTML
Las etiquetas <HTML> y </HTML> delimitan el
principio y final de todo el documento HTML
<HTML>
</HTML>
Indice 26

27. 3. Estructura de una página HTML
Dentro de las etiquetas <HTML> y </HTML> podemos distinguir
dos partes :
• Cabecera: delimitada por las etiquetas <HEAD> y </HEAD>. Lo
que pongamos en la cabecera normalmente no se verá en la
página, pero sí será muy importante para incluir determinadas
informaciones.
• Cuerpo: delimitado por las etiquetas <BODY> y </BODY>.
Entre estas etiquetas colocamos el contenido que podremos
visualizar mediante un navegador. Aquí pondremos todo el
texto, imágenes, sonidos, tablas, etc.…
Indice 27

28. 3. Estructura de una página HTML
Cabecera:
<HEAD>
…
</HEAD>
Aquí podemos encontrar elementos que ayudan
a la correcta interpretación del cuerpo como
por ejemplo:
<TITLE>
<META>
Indice 28

29. 3. Estructura de una página HTML
Ejercicio:
Buscar en Internet un manual HTML y bajarlo
para utilizarlo de consulta cuando lo necesitemos
Ejercicio: buscar la utilidad de cada uno de estos
elementos
Indice 29

30. 3. Estructura de una página HTML
Cuerpo:
<BODY>
…
</BODY>
Es la parte que contiene los contenidos de la
página, lo que se visualizará en el
navegador
Indice 30

31. 3. Estructura de una página HTML
La directiva <BODY> puede contener
atributos que permitirán, entre otras cosas,
establecer un color de fondo, una imagen de
fondo, el color del texto por defecto,…
Ejemplo:
<BODY bgcolor=yellow text=blue>
…
</BODY>
Indice 31

32. 3. Estructura de una página HTML
Ejercicio: Enumerar utilizando el manual los
posibles atributos que podemos incluir en BODY
Ejercicio: Crear una página web con fondo azul,
texto amarillo, enlaces en blanco, y enlaces
visitados en verde. Guardar en el directorio
prueba05.
Indice 32

33. 4. El color
A muchos de los elementos que incluimos
en las páginas se les puede asignar color.
Cuando utilizamos un atributo de color,
éste se puede indicar de dos formas:
• Utilizando una de las palabras reservadas a tal
efecto como por ejemplo: red, purple, black,…
• Utilizando un valor numérico hexadecimal que
representa el color
Indice 33

34. 4. El color
En la siguiente tabla podemos ver una lista de
palabras reservadas junto al color que representan.
A la derecha de cada palabra podemos ver el
valor hexadecimal correspondiente.
Indice 34

35. 4. El color
El listado anterior es un listado limitado. En
realidad podemos usar una cantidad de colores
mayor a la de la tabla anterior. Para ello debemos
codificar los colores mediante una combinación de
rojo, verde y azul (RGB).
Esta combinación se va a expresar
mediante un número hexadecimal de 6 dígitos,
dos dígitos para el rojo, dos para el verde y dos
para el azul.
Indice 35

36. 4. El color
Por lo tanto:
FF0000 es el rojo base
00FF00 es el verde base
0000FF es el azul base
000000 es el negro
FFFFFF es el blanco
Indice 36

37. 4. El color
Para calcular el valor hexadecimal de un color
podemos utilizar cualquier programa de dibujo
(por ejemplo Paint de windows) o bien programas
especificos como GetColor o EyeDropper.
Ejercicio: Visitar la siguiente página:
http://www.pagetutor.com/colorpicker/index.html
Indice 37

38. 5. Enlaces
Los enlaces o hipertexto o hipervínculos permiten
pasar de una página a otra de manera sencilla,
simplemente pulsando el ratón sobre un trozo de
texto o una imagen.
Normalmente, los enlaces o links se identifican
por ser palabras que se diferencian en su color,
resaltando entre todas las demás. También, por
convencionalismo, el cursor cambia de forma para
transformarse en una pequeña mano señalando el
enlace.
Indice 38

39. 5. Enlaces
La etiqueta <A>…</A> nos permite crear enlaces
en nuestras páginas.
Para indicar a dónde queremos que salte
utilizaremos el atributo href. Por ejemplo si
queremos que salte a la página de google, lo
indicaremos de la siguiente forma:
<A href=“http://www.google.com”>
Indice 39

40. 5. Enlaces
Lo que pongamos entre <A …> y </A> es lo que
aparecerá en la página como hipervínculo, es
decir, donde tendremos que pulsar para saltar a
la página de destino.
Dentro de dichas etiquetas podremos poner texto
o bien alguna imagen.
Indice 40

41. 6. Mapa de la web
Una de las tareas más importantes a la hora de
concebir un sitio web es la organización de los
contenidos y el análisis del número de páginas
que conformarán nuestro sitio web, así como la
relación existente entre ellas. Veamos varios tipos
de estructura existentes.
Indice 41

42. 6. Mapa de la web
Estructura lineal:
Indice 42

43. 6. Mapa de la web
Estructura lineal ramificada:
Indice 43

44. 6. Mapa de la web
Estructura jerárquica:
Indice 44

45. 6. Mapa de la web
Estructura lineal ramificada:
Indice 45

46. 7. Formateo de texto y párrafos
En este apartado veremos las etiquetas o
directivas que permiten dar formato al texto, es
decir, poder representar saltos de línea,
tabuladores y otros separadores que el navegador
no interpreta y además hacer que el texto sea
más atractivo mediante los colores, los tipos de
letra, el tamaño,…
Indice 46

47. 7. Formateo de texto y párrafos
En los editores de texto basta con pulsar la barra
espaciadora tres veces para que se visualicen tres
espacios. En HTML hay que indicar esos espacios
de manera especial. Lo mismo ocurre con los
tabuladores, saltos de línea,..
Indice 47

48. 7. Formateo de texto y párrafos
Tenemos el siguiente texto en un archivo HTML:
WWW basa su diseño y funcionamiento en varios puntos:
La idea de un mundo sin límites para la información
El sistema de direcciones URL
El protocolo de red HTTP
El lenguaje HTML
Indice 48

49. 7. Formateo de texto y párrafos
Si visualizamos el texto anterior en un navegador
el resultado es el siguiente:
WWW basa su diseño y funcionamiento en varios puntos: La idea
de un mundo sin límites para la información El sistema de
direcciones URL El protocolo de red HTTP El lenguaje HTML
No hay separadores de ningún tipo, solo una
separación entre palabras
Indice 49

50. 7. Formateo de texto y párrafos
Espacios entre caracteres:
Para que el navegador muestre más de un
espacio entre palabras hay que añadir lo siguiente
por cada espacio:
&nbsp;
Indice 50

51. 7. Formateo de texto y párrafos
Caracteres especiales:
Existen caracteres especiales que se suelen
utilizar para especificar directivas entre otras
cosas, por ejemplo, <>. Para visualizar estos
caracteres y no sean interpretados hay que
escribirlos de forma especial, para ello
utilizaremos las referencias
Indice 51

52. 7. Formateo de texto y párrafos
Caracteres especiales:
Las referencias no son más que una forma
especial de escribir caracteres, como ocurre con
los espacios entre caracteres. Por ejemplo, para
visualizar <CENTER> en un navegador sin que se
interprete, debemos poner
&lt;CENTER&gt;
Indice 52

53. 7. Formateo de texto y párrafos
Saltos de línea:
Para visualizar un salto de línea basta con utilizar
la etiqueta abierta<BR>
Indice 53

54. 7. Formateo de texto y párrafos
Párrafo:
Para delimitar un párrafo se antepone la etiqueta
<P> al inicio del mismo y </P> al final.
Puede parecer que <BR> y <P> hacen lo mismo,
insertar una nueva línea, pero no es así.
Ejercicio: practicar con ambas para ver la
diferencia
Indice 54

55. 7. Formateo de texto y párrafos
Párrafo:
Hay dos diferencias fundamentales:
<P> deja un espacio mayor entre líneas
<P> no se acumula
NOTA: si queremos acumular <P> pondremos
entre ellos &nbsp;
Indice 55

56. 7. Formateo de texto y párrafos
Párrafo:
La directiva <P> puede contener el atributo align
que sirve para alinear el texto
Indice 56

57. 4. Formateo de texto y párrafos
Alineación:
En los procesadores de texto podemos alinear el
texto a la izquierda, a la derecha,… con un simple
click de ratón.
En HTML existen etiquetas para alinear el texto,
pero también podemos hacerlo mediante
atributos de algunas directivas.
Indice 57

58. 7. Formateo de texto y párrafos
Alineación:
Con el atributo ‘align’ de algunas etiquetas
podemos alinear el texto donde queramos. Los
valores que se pueden asignar son left (valor por
defecto), right y center
Agunas de las etiquetas que tienen este atributo
son: <P>, <HR>, <DIV>, <COL>, <IMG>,
<INPUT>, <TABLE>,...
Indice 58

59. 7. Formateo de texto y párrafos
Alineación:
Con la directiva <CENTER> podemos alinear
elementos al centro
Se finaliza con </CENTER>
Indice 59

60. 7. Formateo de texto y párrafos
Preformateo del texto:
La directiva <PRE> permite que el navegador
tenga en cuenta los separadores (espacios,
tabuladores,...) existentes en el código fuente.
Finaliza con </PRE>
Indice 60

61. 7. Formateo de texto y párrafos
Estilos del texto:
negrita
cursiva
subrayado
texto tachado
subíndice
superíndice
Ejercicio: Busca la etiqueta para cada uno de
estos estilos
Indice 61

62. 7. Formateo de texto y párrafos
Directiva FONT y BASEFONT:
<BASEFONT> nos permite establecer el tamaño y
el color de fuente para todo el documento
<FONT> nos permite cambiar el color, tamaño y
tipo de letra establecidos por defecto.
Ejercicio: enumera los atributos de la etiqueta
FONT
Indice 62

63. 7. Formateo de texto y párrafos
Ejercicio:
Buscar un programa de diseño de letra como
imagen. Xara
Indice 63

64. 8. Ver código fuente
Todas las páginas web tienen su programación
detrás, y ésta es pública en la mayoría de los
casos. Eso quiere decir que podemos ver el
código fuente de la mayoría de las páginas por las
que navegamos en Internet, lo que acaba siendo
el mejor método de aprendizaje de todos. Una
vez que tengamos la base de conocimientos
necesario, ver el código fuente de las páginas
web que nos gusten es una forma de seguir
aprendiendo en este mundo de la programación.
Indice 64