universidad francisco gavldla facultad de ingenier~a...

UNIVERSIDAD FRANCISCO GAVlDlA 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

SAN SALVADOR, JULIO DE 1,999.

. 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? 4 . 5 Ejemplo y ejercicios propuesto

5. Listas de Elementos 5. 1 Listas Ordenadas 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 8. 6 Ejemplo y ejercicios propuesto 85

9 . Publicación y Promoción de Páginas .................................................................... 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 4 . Lista de caracteres especiales ................................................................... 117

Manual básico de HTML

-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.

World Wide Web: Nombre colectivo de todas las páginas Web en lnternet


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

J 8 Mg. de memoria RAM 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

4 Proveedor para accesar a lnternet


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.

r Etiquetas Abiertas: constan de una sola palabra clave

Manual basicn de HTML

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>

cbody bgcolor= "#FFFFFF> </body> 1


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.

- Man~al básico de HTVL

l. 8 Ejercicios Propuestos:

Defina los siguientes términos:

- Internet:

- Página Web:

- World Wide Web:

- Enlace:

Manual básim de HTML

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>.

Manual basico de HTML

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 4bodyx 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 <Me> y 4tit les 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 #

.- - Manual basico de HTML

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 documento

El 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 de 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 la extensión .html

3. Seleccione el lugar donde quiere guardar el documento

4. En Guardar como tipo, seleccione Documentos de solo texto


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

Esta es una pr~eba

Cuando se escribe una pagina Web. cabe la posibilidad que en el fut~fro puedan

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:

<comrnent> Texto que contenga los comentarios necesarios</comrnent>


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\.::.

,:~~,,llt,ll~::..


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

Guarde el archivo y luego ábralo desde su navegador

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 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 IB>~ 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 . La etiqueta eEMs al igual que el>

hacen que el texto se vea en cursiva.

Texto Subrayado y Monoespaciado

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

y al final . 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 el@.

Ejemplo utilizando las etiquetas de formato.

3.2 Etiquetas de Párrafo

Fin de Párrafo

Para crear un fin de párrafo se utiliza la etiqueta . Esta etiqueta inserta una linea

extra en blanco entre los párrafos y no necesita al final una etiqueta de cierre. Utilice

la etiqueta 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 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).



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 csmalb al inicio del texto y al final 4smalb.

Con la etiqueta cbig> al inicio de un texto, este se presentará con el mayor

tamaño de fuente y se cierra con clbig>.

Utilice la etiqueta y cuando quiera que una letra, palabra o una

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.

Ejemplo utilizando formato de caracteres:

universidad francisco gavldla facultad de ingenier~a...

Documents