You are on page 1of 2

I.E.

P ROSA DE LAS AMERICAS DISEÑO WEB CON HTML

Profesor: Robert Sotil Luján.
1
HTML
¿Qué es HTML?
El HTML (Hyper Text Markup Language) es el lenguaje con el
que se escriben las páginas web. Es un lenguaje de hipertexto,
es decir, un lenguaje que permite escribir texto de forma
estructurada, y que está compuesto por etiquetas, que marcan el
inicio y el fin de cada elemento del documento.
Un documento hipertexto no sólo se compone de texto, puede
contener imágenes, sonido, videos, etc., por lo que el resultado
puede considerarse como un documento multimedia.

Los documentos HTML deben tener la extensión html o htm ,
para que puedan ser visualizados en los navegadores
(programas que permiten visualizar las páginas web, como
Internet Explorer, Firefox, Safari, Opera o Chrome).
Los navegadores se encargan de interpretar el código HTML de
los documentos, y de mostrar a los usuarios las páginas web
resultantes del código interpretado.

Editores.
Un editor es un programa que nos permite redactar documentos.
Hoy en día existen un gran número de editores que permiten
crear páginas web sin la necesidad de escribir ni una sola línea
de código HTML. Sin embargo, es importante que comiences
con un editor sencillo para que te familiarices con el lenguaje.
Etiquetas.
Las estiquetas o marcas delimitan cada uno de los componentes
de un documento HTML. Existen 2 tipos de estiquetas:

a) Etiqueta de comienzo o inicio.
b) Etiqueta final o de cierre.

Cada uno de los elementos de la página se encontrará entre una
etiqueta de comienzo y su correspondiente etiqueta de cierre, a
excepción de algunos elementos que no necesitan etiqueta de
cierre.


Estructura de una página.
La estructura básica de una página de internet es:


<html>
<head>
...
</head>
<body>
...
</body>
</html>
A continuación vamos a ver el significado de cada una de estas
etiquetas.

Identificador del tipo de documento <html>
Todas las páginas web escritas en HTML tienen que tener la
extensión html o htm . Al mismo tiempo, tienen que tener las
etiquetas <html> y </html> .
Entre las etiquetas <html> y </html> estará comprendido el resto
del código HTML de la página.

Cabecera de la página <head>
La cabecera de la página se utiliza para agrupar información
sobre ella, como puede ser el título. Está formada por las
etiquetas <head> y </head> . La etiqueta <head> va justo debajo
de la etiqueta <html>.
Título de la página <title>
El título de la página es el que aparecerá en la parte superior de
la ventana del navegador, cuando la página esté cargada en él.
Para asignar un título a una página es necesario escribir el texto
deseado entre las etiquetas <title> y </title> . Estas etiquetas
han de estar dentro de la cabecera, es decir, entre las etiquetas
<head> y </head>
Cuerpo del documento <body>
El cuerpo del documento contiene la información propia del
documento, es decir lo que queremos que se visualice, el texto
de la página, las imágenes, los formularios, etc.

Todos estos elementos tienen que encontrarse entre las
etiquetas <body> y </body> , que van justo debajo de la
cabecera.


EJERCICIOS:

1.- Copia en el bloc de notas el código de tu primera página de
internet. Cuando termines guárdalo como primeraPagina.html y
ábrelo con Firefox.




Consejo para nombrar archivos: Utiliza nombres en tus archivos
que tengan algunas normas básicas para ahorrarte disgustos y
líos.

No utilices acentos ni espacios ni otros caracteres raros.
También te ayudará escribir siempre las letras en minúsculas.

Esto no quiere decir que debes hacer nombres de archivos
cortos, es mejor hacerlos descriptivos para que te aclaren lo que
I.E.P ROSA DE LAS AMERICAS DISEÑO WEB CON HTML

Profesor: Robert Sotil Luján.
2
hay dentro. Algún caracter como el guión "-" o el guión bajo "_"
te puede ayudar a separar las palabras. Por ejemplo
quienes_somos.html

2.- Diseña 10 páginas de Internet que contengan como título el
nombre de alguno de tus compañeros y en el cuerpo de la
página 3 características del mismo.

3.- Crea 10 páginas de Internet cuyo título sea un nombre de
alguna película que te guste, y en el cuerpo de la página incluya
el nombre de 5 de los actores que participan y el nombre del
personaje que interpretan.

4.- Diseña 10 páginas de internet que tengas como título el
nombre de algún héroe de la Independencia de México, y en el
cuerpo de la página incluya la biografía del mismo.

Cuando termines avisa a tu maestro para que te califique.

Color de fondo (bgcolor)
El color de fondo puede establecerse usando el atributo bgcolor,
al cual es posible asignarle un valor representado en
hexadecimal o por el nombre del color.

Ejemplo:

<body bgcolor="#0000FF">
...
</body>
</html>
Sería equivalente a poner:
...
<body bgcolor="blue">
...
</body>
</html>
EJERCICIOS:

1.- Con la ayuda de tu maestro, diseña en Notepad (bloc de
notas) 15 páginas con color de fondo diferente utilizando el valor
hexadecimal del color. El título de cada página será el nombre
del color que usaste como fondo. En el cuerpo de la página
deberá aparecer un texto con el nombre del color. Guarda cada
página creada en una carpeta nueva llamada colores
hexadecimal dentro de Archivos D: o Disco Local D:

Los colores que puedes utilizar puedes encontrarlos aquí.

2.- Con la ayuda de tu maestro, diseña en Notepad (bloc de
notas) 15 páginas con color de fondo diferente utilizando el
nombre del color. El título de cada página será el nombre del
color que usaste como fondo. En el cuerpo de la página deberá
aparecer un texto con el nombre del color. Guarda cada página
creada en una carpeta nueva llamada colores nombre dentro
de Archivos D: o Disco Local D:

Ejemplo:




Cuando termines avisa a tu maestro para que te califique.