Tema 1A
Introducción al
lenguaje HTML
1
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
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
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
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
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
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
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
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
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
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
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
1. Introducción
Además 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.
Indice
13
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
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.
No utilizaremos ni espacios ni caracteres extraños
(,;/\@...) en los nombres de archivo.
Indice
15
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
4. El color
Por lo tanto:
FF0000
00FF00
0000FF
000000
FFFFFF
Indice
es el rojo base
es el verde base
es el azul base
es el negro
es el blanco
36
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
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
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
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
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
6. Mapa de la web
Estructura lineal:
Indice
42
6. Mapa de la web
Estructura lineal ramificada:
Indice
43
6. Mapa de la web
Estructura jerárquica:
Indice
44
6. Mapa de la web
Estructura lineal ramificada:
Indice
45
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
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
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
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
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
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
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
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
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
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
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
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
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
7. Formateo de texto y párrafos
Alineación:
Con la directiva <CENTER> podemos alinear
elementos al centro
Se finaliza con </CENTER>
Indice
59
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
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
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
7. Formateo de texto y párrafos
Ejercicio:
Buscar un programa de diseño de letra como
imagen. Xara
Indice
63
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
Descargar

Diapositiva 1