UNIVERSIDAD FRANCISCO GAVlDlA FACULTAD DE INGENIER~A Y ARQUITECTURA

FACULTAD DE INGENIER~A

Y ARQUITECTURA

ELABORADO

POR

:

MAYRA YANET SALVADOR MERINO

CARRERA

:

PROFESORADO EN EDUCACIÓN MEDIA PARA LA

ENSEÑANZA DE LA COMPUTACIÓN

lndice

Pág .

1

.

Introducción al

HTML

1

.

1 Conceptos básico ...

...

1

.

2 ‘Cómo funciona la Web?

1

.

3 Herramientas para comenzar a diseñar páginas Web ...

...

1

.

4 Historia del Lenguaje HTML

1 . 5

'Qué

es el lenguaje HT

1 . 6 Requerimientos para el ... 1

.

7 Otras herramientas para crear páginas Web ...

1

.

8 Ejercicios propuestos ... ...

2

.

Cómo

Crear

una Página

Web

2

.

1 Estructura básica del HTML

2

.

2 División de un documento HTML ...

2

.

3 Editar. Guardar y Visualizar un documento HTML ...

... 2

.

4 Uso de comentarios

2

.

5 Ejemplo y ejercicios propuestos ...

3

.

Formato y Alineación de Texto

... ...

3

.

1 Etiquetas de formato

.

.

3

.

2 Etiquetas de párraf

3

.

3 Formato de caractere 3

.

4 Alinear texto ...

3

.

5 Ejemplo y ejercicios propuestos ...

4

.

Fuentes y Caracteres Especiales

4

.

1 Fuentes y colores ...

4

.

2 ¿Cómo seleccionar un tipo de letra

4

.

3 Caracteres especiales ... ... 4

.

4 ¿Cómo cambiar el color del fondo de la página?

5. 2 Listas no Ordenadas

5. 3 Listas de Definición ... 44

5. 4 Ejemplo y ejercicios propuestos ... ... 46

6.

Enlaces

o Links

6 . 1 ¿Qué es un enlace 48

6 . 2 ¿Qué es una URL 48

6. 3 Enlaces Internos: Anclas ... 50 6. 4 Enlaces a otras páginas ... ... 52

6. 5 Enlaces fuera del sistema.. ... .... ... .... ... ... ... ... ... 54

6. 6 Enlaces hacia Correo Electrónico 55

6. 7 Ejemplo y ejercicios propuestos 58

7.

Creación

de

Tablas

7. 1 Estructura básica de las tablas

7. 2 Parámetros opcionales en las tabla 7. 3 Tamaño de las tablas

7. 4 Alineación del texto en una celda 7 . 5 ¿Cómo cambiar el es

7. 6 Etiqueta para titular una tabl

7. 7 Color de fondo en las tablas ...

7.

8 Espaciados entre celda

7.

9 Ejemplo y ejercicios propuestos

8.

Agregar

Imágenes a las Páginas

8. 1 Insertar imágenes a las páginas ... . 77

8.

2

Parámetros para cambiar ancho y alto a las imágenes .... ... 80

8.3 Alinear imágene 81

8 . 4 Imágenes como 82

8 . 5 Imágenes como vinculos 83

9

.

1 Publicación de páginas 87

9

.

2 Transferir páginas a un servidor ... 88

.

.

.

. 9

.

3 Promocion de paginas ... 89

10.Cómo Diseñar Adecuadamente Páginas Web

... 10

.

1 Reglas básicas en el diseño 91 10

.

2 Normas fundamentales del HTML ...

....

. . . 93

10

.

3 Estructura básica de las páginas Web ... 94

. . . 10

.

4 Composicion ...

.

.

... 95

10

.

5 Facilitar el mantenimiento de las páginas ... 96

11

.

Demos de Aplicación

11

.

1 Ejemplo #1 ... 97

11

.

2 Ejemplo

#2

... 101

Bibliografía

... 104

Anexos

1 . Estructura básica de un documento HTML ...

.

.

... 106

2 . Lista de herramientas para elaborar páginas Web ...

.

.

... 108

3 . Resumen de etiquetas y atributos ... 112

-l.

INTRODUCCIÓN AL HTML

El lenguaje de marcado de hipertexto(HTML) se utiliza para la creación de páginas Web. Conozca algunos conceptos importantes, herramientas y un poco de historia

acerca del HTML.

'l. 1

Conceptos

Básicos

Antes de empezar con el diseño de nuestra página Web debemos tener claros los siguientes conceptos:

lnternet : Es "la red de redes" que conecta millones de computadoras en todo el mundo.

Página Web : Es un documento de texto que utiliza comandos en un lenguaje especial llamado HTML para afiadir formato, gráficos y otros elementos y vínculos con otras páginas.

Navegador: Un programa que se usa para tener acceso a Worl Wide Web y que interpreta el código HTML que llega a nuestras computadoras por medio del protocolo de transferencia de hipertexto.

Protocolo: Una descripción formal de los formatos y las reglas de mensajes que

dos computadoras deben seguir para intercambiar dichos mensajes.

*

Etiquetas: Comandos HTML codificados, que se utilizan para indicar cómo debe

mostrarse una parie de una página Web.

Atributos: Código especial que se utiliza dentro de una etiqueta HTML, para

controlar exactamente qué hace la etiqueta.

Hipertexto: Texto que permite a los lectores saltar directamente entre

documentos y otros recursos, al seleccionar las palabras claves que aparecen en cada pantalla.

*

Correo Electrónico: Sistema que permite que una persona redacte mensajes en

una computadora y lo transmita a través de una red de computadoras, como Internet, hacia otro usuario de computadoras.

URL: También llamado dirección. Es un sistema de direcciones que localiza documentos en Internet.

Servidor Web: Computadoras en lnternet que almacena datos a los que puede tenerse acceso mediante navegadores Web que utilicen el protocolo HTTP.

Módem: Dispositivo que convierte las señales digitales de una computadora a un formato analogico para su transmisión a través de líneas telefónicas.

*

HTTP: Método estándar de intercambiar información entre servidores HTTP y

sus clientes en la Web. La especificación HTTP proporciona las reglas sobre la forma en que deben trabajar conjuntamente los servidores Web y los navegadores.

Enlaces o Links: Un ícono, una imagen, o una cadena de texto resaltado, que conecta la página Web actual con otras páginas Web, sitios de Internet, gráficos, animación o sonido. En Web salta de página a página haciendo clic en los vínculos.

-

Página Web Básica: Es una página que está escrita en lenguaje HTML y que contiene texto, imágenes, tablas, listas y enlaces.

1 . 2

¿Cómo Funciona la Web?

La Web funciona en una forma muy sencilla. Las transacciones tienen cuatro fases:

+

Conexión: es cuando ei cliente intenta conectarse con el Se~idor. La barra de estado del navegador (browser) nos indica Conexión con

....

+

Pedido: el cliente envia el pedido y el protocolo que se usará

+

Respuesta: el servidor envia la respuesta

+

Cierre: termina el dialogo. Después el navegador muestra los datos pedidos de

acuerdo al formato de éstos; puede ser texto, gráficos, audio, etc.

l.

3 Herramientas Principales para Comenzar a Diseñar

Páginas

Web.

Una computadora

Con características mínimas:

J Microprocesador 486 o superior

J Velocidad 233 Mhz. o más

Editor de Texto:

El editor de texto, puede ser cualquiera, siempre que no formatee el texto. Entre los más recomendables está: WordPad en Windows o Simple Text en Macintosh. Siempre los archivos deberán guardarse como "solo texto", para no tener errores a la hora de cargarlo en el Navegador.

El editor de texto nos servirá para crear un archivo con cualquier nombre, pero debe tener la extensión .html o .htrn Cuando escribamos algo nuevo en el archivo, debemos guardarlo antes de cargarlo en el navegador. Para la elaboración del manual se utilizará WordPad.

Un Navegador del Web:

La tarea principal del navegador es interpretar los documentos HTML escritos en el procesador de texto. Algunos navegadores del Web mas utilizados son: Netscape, Microsoft Interne1 Explorer, Mosaic. etc. En la elaboración del manual se utilizara lnternet Explorer 4.0

*

Una conexión a lnternet

Módern 32.000 bps. 4 Linea telefónica

1 . 4 Historia

del

Lenguaje

HTML

Este lenguaje nace con Tim Berners-Lee de CERN en 1,991. Es un sistema de hipertexto con el objetivo de servir como medio de transmisión entre físicos que eran parte de la iniciativa W.

En 1,993 Dan Connelly escribió el primer documento que describía el lenguaje. A principios de 1,993; World Wide Web era un proyecto que apenas tenía una presencia moderada entre el público. fuera del interés técnico altamente especializado.

Un año más tarde (1.994), la aceptación del sistema era tan impresionante que la especificación había quedado obsoleta, había adquirido más popularidad y ganaba la atención del público en los diarios alrededor del mundo. Ya en 1,995 se mencionaba en los medios de comunicación como algo innovador.

Hasta hace poco, la versión oficial del HTML era la HTML 2.0 y esta cumplía perfectamente la función para la cual había sido creada. Por su parte Netscape, líder de los navegadores, introducía cada vez etiquetas y atributos que no estaban contemplados en el estándar oficial y que eran aceptados y copiados por otros navegadores.

Todo esto provocó que el comité de trabajo del HTML, propusiera un borrador de una nueva versión, el HTML 3.0, en la cual se había hecho muchas mejoras. Lo extenso de la versión, lleva a que los navegadores sólo utilicen una pequeña parte de esta; promoviendo el abandono de la misma.

Se tenía la necesidad de un estándar que fuera aceptado por todos. Para ello, se creó un comité apoyado por los más reconocidos vendedores de software. La versión HTML 3.2 se desarrolló durante todo el ano 1,996 y en enero de 1,997 fue aprobada. En julio de 1,997 fue presentado el primer borrador público de la versión HTML 4.0; de aquí en adelante el lenguaje ha seguido perfeccionándose aún más.

4 . 5 ¿

Qué

es

el

Lenguaje

H

TML?

Las páginas Web se diseñan utilizando el HTML. El HTML es un lenguaje sencillo pensado para presentar información en la W. Las iniciales HTML significan "Hiper Text Markup Languaje", su nombre indica que es un lenguaje de marcas para la creación de hipertexto, cuando hablamos de hipertextos entenderemos, que es aquel texto con una presentación agradable, a la cual se le puede agregar elementos multimedia (gráficos, videos, audio) y puede contener hiperenlaces que le permitan estar en contacto o relacionarse con otras fuentes de información.

Se le llama lenguaje de marcas, porque las instrucciones son trozos de texto resaltados y que definen la estructura lógica del documento. Estos documentos pueden ser mostrados por los navegadores de páginas Web en lnternet como: Netscape. Mosaic o Microsoft Explorer. Las órdenes, etiquetas o comandos que contiene el HTML son las que le indican al navegador la forma de representar los elementos(texto, gráficos, tablas, etc.) que posee el documento.

Los tipcs de etiquetas en HTML:

Etiquetas Cerradas: contienen una palabra clave que indica el principio de la directiva y otra que indica el final. Aquí se incluye el carácter " I " antes de la palabra clave para indicar el final.

Las etiquetas o comandos se distinguen del resto del documento encerrándolas entre los símbolos " " y " > ". Los atributos

o

parámetros que pueden contener los comandos se indican después de la palabra clave del comando

Ejemplos:

Ver estructura básica de un documento

HTML

en Anexo 1

(Pág.

106)

-

Directiva Cerrada

1 . 6

Requerimientos

para el Uso

del

Manual

%enter> UFG <Icenter>

Las personas que deseen utilizar el manual, deben poseer conocimientos básicos sobre entorno de Windows y tener algunos conocimientos generales de Internet. Ya que, a medida que profundice en la información del manual, encontrará que están contemplados aspectos en forma vaga, considerando que estos, ya son parte del acetvo de conocimientos de los usuarios.

-

Directiva Abierta

Directiva con parámetro

<HR>

1 . 7 Otras Herramientas para Crear Páginas Web.

Además de las herramientas que se utilizaran en el manual, para el diseño de páginas Web, existe un número considerable de ellas. Estas herramientas son navegadores (browsers), lenguajes de programación, editores de HTML, etc.

Una buena parte de estas herramientas puede encontrarse fácilmente en la red y

pueden bajarse de forma gratuita y utilizarse sin ningún obstáculo.

A continuación se presentan los nombres de algunas herramientas para el diseño de páginas Web:

. ~.

1

Lenguajes de Programación

1

Editores HTML

l

Javascript l -- Java (applets)

/

Action Pad

l

Para hacer páginas Web, además de los editores y procesadores de texto; se pueden utilizar los editores de HTML, lo cual evita aprenderse las etiquetas y atributos del lenguaje, ya que ellos lo generan.

También existen algunos lenguajes de programación como: Javascript, Visual Basic Script y Java(App1ets) que tienen aplicaciones que se ejecutan dentro de un navegador o browser.

En el Anexo 2 (pág. 108 ) encontrará un listado más grande de herramientas para la elaboración de páginas Web, con sus respectivas versiones; y también estarán algunos sitios a los que puede hacer referencia para obtener las herramientas gratis.

l.

8 Ejercicios

Propuestos:

Defina los siguientes términos:

-

Internet:

- Página Web:

-

World Wide Web:

-

Enlace:

2. CÓMO

CREAR UNA

PÁGINA WEB

Puede ser que piense que hacer una página Web es complicado, este capítulo introductorio cambiará por completo esa idea. Ya que. para la elaboración de páginas sólo es necesario conocer algunas de las etiquetas básicas.

2 . 1

Estructura

Básica

del

HTML

La etiqueta de apertura <HTML> y la etiqueta de cierre </HTML> son las que definen a un documento HTML. Un documento escrito en HTML básicamente incluirá las directivas siguientes:

<HTML>

<head>

<title>

ponga aquí el titulo </title>

cIhead>

<body>cuerpo del documento Ibody> <IHTML>

En el Anexo 3(pág. 112) se encuentra un resumen de etiquetas y atributos que se estudiarán en el Manual.

<html>: Es la etiqueta que identifica a un documento html. Debe incluirse en la

primera línea y finalizar el documento debe cerrarse <Ihtrnl>.

Dentro de <headz se encuentra la etiqueta ~ t i t l e s la cual especifica el titulo del documento, solo es permitido un titulo para cada documento. Al finalizar cerraremos las instrucciones c/fitle> y 4head-2.

<body>: Es el cuerpo del documento y por lo tanto dentro de esta etiqueta deberán estar todos sus elementos: texto, imágenes. vinc~ilos. etc., al finalizar cerraremos la instrucción 4 b o d y x Como podemos observar, las etiquetas poseen una orden de inicio que se representa por <etiqueta> y otra de fin </etiqueta> que es la misma etiqueta antecedida por el signo l . Las etiquetas pueden escribirse en letras minúsculas o mayúsculas sin ninguna consecuencia.

2 . 2

DNísíón de un Documento HTML

O

Cabecera del documento:

Esta parte del documento comienza justo después del comando <html>. La cabecera del documento se inicia con la etiqueta <head> y finaliza con elheads. Dentro de la cabecera se debe contemplar el titulo del documento (ditle> y c/title>). El Netscape muestra el texto contenido entre < M e > y 4titles en la parte superior de la ventana de Netscape. El tamaño de letra de las cabeceras puede ser de seis tipos diferentes, las cuales se activan con la etiqueta <h#> al inicio del texto y <Ih#> al final, donde #

puede ser un número entre "uno" y "seis". Donde <h6> es la cabecera más grande y < h l > la más pequetia.

Cuerpo del d o c u m e n t o

E l cuerpo del documento se encierra entre la etiqueta zbody> y <!body>. aquí se incluye todo el contenido de nuestra pagina, gráficos, texto, anlace. sonido, etc.

2 . 3

Editar, Guardar

y

Yjsuaiizar un

Documento

HTML

Editar:

En el área de edicion del editor de texto, que usted va a utilizar, escriba cada una de las etiquetas de las que se va a auxiliar para diseñar la página Web, como si lo estuviera haciendo con una maquina d e escribir

Guardar:

Cuando haya finalizado el documento HTML, proceda a guardarlo: 1. De la barra de menus, seleccione Archivo y luego Guardar como ...

2. Ponga un nombre a su documento y agregue l a extensión .html

3. Seleccione el lugar donde quiere guardar el documento

5. Oprima el botón Aceptar.

Visualizar la pagina Web: Permite ver los cambios o ver como va quedando nuestra página. Desde el navegador que esté utilizando:

1. Seleccione Archivo y luego Abrir 2. Busq~ie la ubicación del documento 3. Oprima Abrir

4. Haga clic en Aceptai

surgir cambios y que alguien tenga que hacerlos; es por eso. que para facilitar la lectura y revisión del código fuente de las páginas se deben incluir comentarios que indiquen lo que pasara en aquellos bloques que sean muy complejos.

Para poner esos comentarios que solo los verá en el código fuente, y que no serán vis~~alizados por los navegadores, se utiliza la siguiente etiqueta:

<!-Texto que contenga los comentarios necesarios->

Hoy en día ya se conoce la nueva forma oficial de incluir comentarios a las paginas Web, y es utilizando la etiqueta:

2. 5

Ejemplo

y

Ejercicios Propuestos

Ejemplos:

2.

.:[]tn1l:::-

-::hend:;:~

-title--,Prueba

del capit~ilci

2

title.:

::.:&=ad.

.

:.bc,dv

:-

testo'

gmfico. listas. tablas

>-

enlaces

.::,/bod\.::.

Ejercicios Propuestos:

En el editor o procesador de texto que este utilizando, escriba:

-

_{La estructura básica de un documento HTML.}

- _{El titulo debe ser: Mi primera página Web}

- _{En el cuerpo del documento escriba: Esta es una prueba}

3.

FORMATO

Y ALINEACIÓN DE

TEXTO

En este capítulo aprenderá a mejorar la apariencia del texto dentro de su página Web, a incorporar negritas, cursivas y distintos formatos especiales de texto a su página. Entre otras cosas se verá cómo centrar texto o alinearlo.

3 . 1

Etiquetas

de

Formato

r

Texto

con Negritas y Cursivas

Cuando se quiere poner el texto en negritas se utiliza la etiqueta cB> al inicio del texto y <IB> al final.

Para hacer cursivo un texto hay que escribir la etiqueta <I> al inicio del texto y < l b para cerrar. Tambien se puede hacer el texto negritas, cursivas poniendo cB><ls donde comienza el texto y c I B > ~ l l > .

Cuando se le pone negritas a los encabezados, las negritas no se verán, ya que los encabezados están en negritas por defecto. Existen otras etiquetas que hacen que el texto aparezca en negritas: la etiqueta <strong>. La etiqueta eEMs al igual que el>

Texto Subrayado y Monoespaciado

Para lograr que el texto aparezca subrayado, se le antepone al texto la etiqueta

<u>

y al final </u>. Si lo que quiere es que el texto se vea como que está escrito en máquina de escribir, antepóngale la etiqueta c t b y al final e l @ .

3 . 2

Etiquetas

de

Párrafo

Fin de Párrafo

Para crear un fin de párrafo se utiliza la etiqueta <p>. Esta etiqueta inserta una linea extra en blanco entre los párrafos y no necesita al final una etiqueta de cierre. Utilice la etiqueta <p> al final del párrafo, donde quiere hacer el salto de Iínea.

Línea Horizontal

La etiqueta <hr> provoca la aparición de una linea horizontal y simultáneamente

ocasiona un salto de línea. Esta etiqueta no requiere etiqueta de cierre. Se puede alinear a la izquierda o a la derecha (<hr align=leff o nght) y se puede variar su espesor (hr width=# de 1 a 100%).

Salto de Línea

Al incluir <br> en el texto produce un salto de Iínea. Se caracteriza porque no necesita una etiqueta de cierre

Ejemplo haciendo uso de las efiquefas de párrafo:

<hmil>

~head:~title:Ctiquetasc/titl~>.</head).

< b o d p

Esta es una prueba utilizando las etiquetas de parrafo.<br: Despues de este texto aparecera una linea en blanco <br> <p>Con esta etiqueta provocaremos un nuevo parrafocbr> y para finalizar una linea horizontakhri

dbody> <ihtmb

3 . 3 Formato de Caracteres

Además de las etiquetas de formato y de párrafo, existen otras etiquetas HTML para dar un formato especial al texto. Entre ellas están:

Para poner en nuestra página Web el menor tamaño de fuente, se utiliza la etiqueta c s m a l b al inicio del texto y al final 4 s m a l b .

Con la etiqueta cbig> al inicio de un texto, este se presentará con el mayor tamaño de fuente y se cierra con clbig>.

cadena de caracteres se vean en su página Web como subíndice;

Csup>

y

<Isup> si lo que desea es que

se

aparezca como superíndice.

La etiqueta <strike> al inicio de un texto y

<Istrike>

al final, traza una línea sobre el texto y se ve tachado.