Manual HTML

Introducción breve a la programación en

HTML

Manual de HTML Ing. Julia Gabriela Nieva Paredes Página 1 de 26

CONTENIDO

ÍNDICE DE FIGURAS ............................................................................................... 2

CAPÍTULO I ......................................................................................................... 3

EL LENGUAJE DE PROGRAMACIÓN HTML .................................................................... 3

1.1 SIGNIFICADO DE HTML ......................................................................................... 3

1.2 BREVE HISTORIA ................................................................................................ 3

1.3 ESTRUCTURA DE UN PROGRAMA EN LENGUAJE HTML. .......................................................... 4

1.3.1 La cabecera del documento. ....................................................................... 4

1.3.2 El cuerpo del documento. .......................................................................... 4

1.4 ESTRUCTURA DE UNA SENTENCIA DE CÓDIGO EN LENGUAJE HTML. ............................................. 5

CAPÍTULO II ......................................................................................................... 6

ELEMENTOS BÁSICOS DE PROGRAMACIÓN EN HTML ....................................................... 6

2.1 ENCABEZADOS .................................................................................................. 6

2.2 PÁRRAFOS. ..................................................................................................... 6

2.3 LA ETIQUETA <DIV> ............................................................................................ 7

2.4 ESTILOS DE TEXTO. ............................................................................................. 7

2.5 FUENTES. ...................................................................................................... 8

2.6 COLOR. ........................................................................................................ 8

2.7 LISTAS. ....................................................................................................... 10

2.7.1 Listas desordenadas. ................................................................................ 10

2.7.2 Listas ordenadas. .................................................................................... 11

2.7.3 Listas de definición. ................................................................................ 12

2.8 IMÁGENES. .................................................................................................... 12

2.9 TABLAS........................................................................................................ 13

2.9.1. Alineación y dimensionamiento de celdas. .................................................... 15

2.9.2. Separación entre celdas. .......................................................................... 15

2.10 HIPERVÍNCULOS .............................................................................................. 15

2.10.1 Enlaces a un punto del mismo documento. ................................................... 16

2.10.2 Enlaces a otro documento. ....................................................................... 18

2.10.3 Enlaces a otros sitios. ............................................................................. 18

CAPÍTULO III ...................................................................................................... 21

SOFTWARE PARA CREACIÓN DE PÁGINAS WEB ............................................................ 21

3.1 BLOC DE NOTAS. .............................................................................................. 21

3.2 DREAMWEAVER ................................................................................................ 22

3.2.1 Creación de un nuevo sitio Web con Dreamweaver. .......................................... 23

3.2.2 Edición de un documento HTML con Dreamweaver. .......................................... 24

BIBLIOGRAFÍA .................................................................................................... 26

TICMCE - 2013 Página 2 de 26

Índice de Figuras

FIGURA 1.1 EVOLUCIÓN DEL LENGUAJE HTML ........................................................................ 3

FIGURA 1.2 ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML .......................................................... 4

FIGURA 1.3 ESTRUCTURA BÁSICA DE UNA SENTENCIA EN HTML ....................................................... 5

FIGURA 2.1 ETIQUETAS PARA ENCABEZADOS O TÍTULOS ................................................................ 6

FIGURA 2.2 USO DE LAS ETIQUETAS<P> Y <BR> ....................................................................... 7

FIGURA 2.3 ETIQUETAS PARA ESTILO DE TEXTO ........................................................................ 7

FIGURA 2.4 ATRIBUTOS DE FONT ...................................................................................... 8

FIGURA 2.5 NUMERACIÓN HEXADECIMAL .............................................................................. 9

FIGURA 2.6 EJEMPLO DE USO DEL ATRIBUTO COLOR ................................................................... 9

FIGURA 2.7 NEMÓNICOS DE COLOR .................................................................................... 9

FIGURA 2.8 EJEMPLO DE LISTA DESORDENADA ........................................................................ 10

FIGURA 2.9 EJEMPLO DE LISTA ORDENADA ............................................................................ 11

FIGURA 2.10 EJEMPLO DE LISTA DE DEFINICIÓN ....................................................................... 12

FIGURA 2.11 SENTENCIA IMG ........................................................................................ 12

FIGURA 2.12 EJEMPLO DE INSERCIÓN DE IMÁGENES ................................................................... 13

FIGURA 2.13 EJEMPLO DE CREACIÓN DE UNA TABLA .................................................................. 13

FIGURA 2.14 EJEMPLO DE LOS ATRIBUTOS COLSPAN, ROWSPAN, ALIGN Y VALIGN ............................. 14

FIGURA 2.15 EJEMPLO DE LOS ATRIBUTOS CELLSPACING Y CELLPADDING ............................................. 15

FIGURA 2.16 MENSAJES DE ERROR AL NO ENCONTRAR UN DOCUMENTO GENERADOS POR LOS TRES NAVEGADORES MÁS

POPULARES: INTERNET EXPLORER, GOOGLE CHROME Y MOZILLA FIREFOX. ..................................... 17

FIGURA 2.17 EJEMPLO DE HIPERVÍNCULOS A ZONAS DENTRO DEL MISMO DOCUMENTO ................................. 18

FIGURA 2.18 EJEMPLO DE HIPERVÍNCULOS OTROS DOCUMENTOS DEL MISMO SITIO ..................................... 18

FIGURA 2.19 EJEMPLO DE HIPERVÍNCULOS A DOCUMENTOS DE OTROS SITIOS .......................................... 20

FIGURA 3.1 ALMACENAMIENTO DE UN DOCUMENTO HTML CON BLOC DE NOTAS ...................................... 22

FIGURA 3.2 VENTANA DE INICIO DE ADOBE DREAMWEAVER CS5 ...................................................... 23

FIGURA 3.3 CREACIÓN DE UN NUEVO SITIO CON ADOBE DREAMWEAVER CS5 .......................................... 24

FIGURA 3.4 EDICIÓN DE UN DOCUMENTO HTML CON ADOBE DREAMWEAVER CS5 .................................... 25

FIGURA 3.4 BOTONES DE VISTAS DE ADOBE DREAMWEAVER CS5 ...................................................... 25


CAPÍTULO I

EL LENGUAJE DE PROGRAMACIÓN HTML

1.1 Significado de HTML

HTML es el acrónimo de Hyper Text Markup Language o Lenguaje de

Marcado de Hiper Texto. Es el lenguaje de marcado predominante para la

elaboración de páginas Web.

HTML es un lenguaje que se basa en el uso de etiquetas o marcas (de ahí el

nombre de “marcado”) que le indican a un navegador la forma de representar los

elementos que contiene un programa en lenguaje HTML.

1.2 Breve historia

La primera descripción de HTML se publicó por primera vez en Internet en

1991 por Tim Berners-Lee en un documento titulado “HTML tags” o “Etiquetas

HTML. Berners-Lee desarrolló HTML basado en el lenguaje SGML1. En la figura 1.1

se muestra la evolución del lenguaje.

FIGURA 1.1 EVOLUCIÓN DEL LENGUAJE HTML

1 SGML son las siglas de Standard Generalized Markup Language o "Estándar de Lenguaje de Marcado Generalizado". Consiste en un sistema para la organización y etiquetado de documentos.

1991

HTML

1993

HTML+

1995

HTML 3.0

1997

HTML 4.0

2007

HTML 5.0


1.3 Estructura de un programa en lenguaje HTML.

En la figura 1.2 se muestra la estructura básica de un programa escrito en

lenguaje HTML.

<HTML>

<HEAD>

Definiciones de la cabecera del documento

</HEAD>

<BODY>

Cuerpo del documento HTML que será mostrado por

el navegador

</BODY>

</HTML>

FIGURA 1.2 ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Como se puede apreciar, un documento HTML tiene dos partes principales:

una cabecera, delimitada por las etiquetas <Head> y </Head> y un cuerpo

delimitado por <Body> y </Body>.

1.3.1 La cabecera del documento.

La cabecera contiene información sobre el documento que no se muestra

directamente al usuario pero que en muchas ocasiones es utilizada por los

buscadores. Las etiquetas que se pueden incluir en esta sección son las siguientes:

<title> define el título de la página, el cual se muestra en la barra de

título de la ventana.

<link> para vincular el sitio a hojas de estilo (CSS).

<style> para colocar el estilo interno de la página; ya sea usando

CSS, u otros lenguajes similares. No es necesario colocarlo si se va a

vincular a un archivo externo usando la etiqueta <link>.

<meta> para metadatos como la autoría o la licencia.

1.3.2 El cuerpo del documento.

Por otra parte, el cuerpo de un documento contiene toda la información de

la página que se le presentará al usuario.

http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada

http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada


1.4 Estructura de una sentencia de código en lenguaje HTML.

Una sentencia (línea de código) en HTML consta de elementos, que tienen a

su vez dos propiedades básicas: los atributos y el contenido. Cada atributo y

contenido tiene ciertas restricciones para que se considere válido en el documento

HTML. La mayoría de los elementos tienen una etiqueta de inicio:

<nombreDeElemento> y una etiqueta de cierre: </nombreDeElemento>.

Los atributos de un elemento están contenidos en la etiqueta de inicio, y el

contenido está ubicado entre las dos etiquetas. En la figura 1.3 se muestra la

estructura básica. En este ejemplo, lo que se visualizará en el navegador será la frase

“Esto es un párrafo” con la fuente en Arial.

Elemento

Etiqueta de inicio Contenido Etiqueta de fin

<p font= ”Arial”> Esto es un párrafo </p>

atributo valor

FIGURA 1.3 ESTRUCTURA BÁSICA DE UNA SENTENCIA EN HTML


CAPÍTULO II

ELEMENTOS BÁSICOS DE PROGRAMACIÓN EN HTML

2.1 Encabezados

La serie de etiquetas H sirven para visualizar un título en el documento;

existen 6 etiquetas de este tipo que van desde H1 hasta H6, en donde H1 representa

un título de mayor importancia y por lo tanto se presenta en un formato con una

fuente más grande, y H6 representa el título de menor importancia. En la figura 2.1

se muestra un ejemplo del uso de estas etiquetas.

Etiqueta Ejemplo

<H1>Título 1 </H1>

<H2> Título 2 </H2>





FIGURA 2.1 ETIQUETAS PARA ENCABEZADOS O TÍTULOS

2.2 Párrafos.

El texto de una página se puede agrupar en párrafos; para ello se utilizan las

etiqueta <p> y </p>

Otra etiqueta asociada al manejo de párrafos es <br>, la cual no requiere

cerrarse y se usa para cambiar de línea. La figura 2.2 muestra un ejemplo del uso de

ambas etiquetas.


Código Visualización en el navegador

FIGURA 2.2 USO DE LAS ETIQUETAS<P> Y <BR>

Uno de los principales atributos de párrafo es la alineación definida por la

palabra clave align, la cual puede tener uno de tres posibles valores: “left”

(alineación a la izquierda) “center” (centrado) y “right” (alineación a la derecha). El

atributo align no es exclusivo de la etiqueta <p>, pues otras etiquetas también

pueden utilizar este atributo.

2.3 La etiqueta <div>

Esta etiqueta divide el documento en secciones separadas y puede utilizarse

estrictamente como herramienta organizativa, sin ningún tipo de formato asociado

con ella, pero es más eficaz si se añaden los atributos id y class para etiquetar la

división y asignarle posteriormente algún estilo.

2.4 Estilos de texto.

La figura 2.3 muestra un conjunto de etiquetas que sirven para dar estilo al texto.

Etiqueta Uso Visualización en el navegador

<B> Colocar texto en negrita

<I> Colocar texto en cursiva

<U> Subrayar el texto

<SUP> Colocar un superíndice

<SUB> Colocar un subíndice

<STRIKE> Texto tachado

<CITE> Muestra el texto como si fuese una cita

<EM> Muestra texto enfatizado (similar a cursiva)

<STRONG> Texto enfatizado en negrita (similar a negrita)

FIGURA 2.3 ETIQUETAS PARA ESTILO DE TEXTO


2.5 Fuentes.

La etiqueta <Font> se utiliza para indicar el tipo de fuente que se utilizará en

el contenido delimitado por ésta etiqueta y su respectivo cierre </Font>

Esta etiqueta puede estar acompañada de los siguientes atributos:

Atributo Uso Ejemplo

face Define el tipo de letra en el que se mostrará el texto. Si el equipo del usuario no tiene instalada esa fuente, el navegador utilizará el tipo por defecto que es Times New Roman.

<font face="Comic Sans”>

Texto en Comic Sans

</font>

size Define el tamaño de la letra, el cual puede ser absoluto o relativo. El tamaño absoluto va desde el valor más pequeño 1 hasta el 7 que es el más grande. El tamaño relativo se define en relación a un tamaño usado con anterioridad, mediante los signos + o -.

<font size="3”>

Texto en tamaño 3</font>

color Define el color del texto. Más adelante se detallará el uso del color en le lenguaje HTML

<font color="red”>

Texto en rojo</font>

FIGURA 2.4 ATRIBUTOS DE FONT

2.6 Color.

Ya se mencionó cómo el atributo color de la etiqueta Font define el color

de un texto. Para definir el color de fondo de una página Web se utiliza el atributo

bgcolor de la etiqueta body.

Cada color es definido por un número hexadecimal que esta compuesto a su

vez de tres partes. Dado que se utiliza el sistema RGB (Red - Green – Blue) cada una

de estas partes representa la contribución del rojo, verde y azul al color en cuestión.

Se utilizan dos dígitos hexadecimales para indicar la contribución de cada color, la

cual puede ser desde 00 (o ausencia del color) hasta FF (o saturación del color). El

sistema de numeración hexadecimal es base 16, pero como no existen tantos dígitos

numéricos, se utilizan las letras de la A a la F (figura 2.5)


0=0 4=4 8=8 C=12 1=1 5=5 9=9 D=13 2=2 6=6 A=10 E=14 3=3 7=7 B=11 F=15

FIGURA 2.5 NUMERACIÓN HEXADECIMAL

Para conseguir un color, mezclaremos valores de esta manera:

#RRGGBB

Donde cada valor puede crecer desde 00 hasta FF. Observe la figura 2.6: se

define un texto con tipo de fuente Verdana, y color con el valor 85 de contribución

de rojo, ausencia de verde y saturación de azul.

<font face=”Verdana” color =”#8500FF”>Texto</font>

FIGURA 2.6 EJEMPLO DE USO DEL ATRIBUTO COLOR

Por otra parte, es posible definir de una manera inmediata algunos de los

colores más frecuentemente usados para los que se ha creado un nombre:

Nombre Color Nombre Color

Aqua

Navy

Black

Olive

Blue

Purple

Magenta

Red

Gray

Silver

Green

Teal

Lime

White

Maroon

Yellow

FIGURA 2.7 NEMÓNICOS DE COLOR


2.7 Listas.

Las listas se emplean para presentar de forma ordenada una serie de líneas.

Estas pueden ser ordenadas, desordenadas, de definición, de menú y de directorio.

2.7.1 Listas desordenadas.

Este tipo de listas se utilizan para relacionar elementos sin orden específico.

Para ello, HTML coloca un símbolo (viñeta) delante de cada elemento,

dependiendo del valor especificado por el atributo TYPE. Las etiquetas que definen

este tipo de lista son <UL> y </UL>. Además, se utiliza la etiqueta <LI> para

señalar los distintos elementos de una lista. <LI> no utiliza etiqueta de cierre.

Los valores posibles del atributo TYPE son:

circle: círculo sin relleno:

disc: círculo con relleno:

square: cuadrado:

Además, es posible anidar las listas si se define una nueva <UL> dentro de

una lista ya definida. En la figura 2.8 se muestra un ejemplo de esto.

FIGURA 2.8 EJEMPLO DE LISTA DESORDENADA


2.7.2 Listas ordenadas.

Este tipo de lista se utiliza para relacionar elementos con un orden

determinado y precedido de un número que se incrementa automáticamente. Las

etiquetas que definen este tipo de lista son <OL> y </OL>. Nuevamente se utiliza

la etiqueta <LI> para definir cada elemento de la lista.

El atributo TYPE determina el formato del tipo de inciso a utilizar, en este

caso los posibles valores son:

A: incisos con letras mayúsculas

a: incisos con letras minúsculas

I: incisos con números romanos en mayúscula

i: incisos con números romanos en minúscula

1: incisos con números arábigos (opción por defecto)

Además también se cuenta con el atributo START el cual especifica el valor

del primer elemento de la lista, si no se define el valor por defecto será 1.

Independientemente del valor que se utilice en TYPE, START siempre recibirá un

valor numérico (1,2, 10, etc.)

Así como las listas desordenadas, las listas ordenadas también pueden

anidarse. En la figura 2.9 se muestra un ejemplo.

FIGURA 2.9 EJEMPLO DE LISTA ORDENADA


2.7.3 Listas de definición.

Estas listas son apropiadas para glosarios, catálogos, etc. Las etiquetas que

definen este tipo de lista son <DL> y </DL>, y están formadas por un primer

elemento denominado término o título establecido por la etiqueta <DT> y un

segundo llamado definición señalado con la etiqueta <DD>. En la figura 2.10 se

muestra un ejemplo.

FIGURA 2.10 EJEMPLO DE LISTA DE DEFINICIÓN

2.8 Imágenes.

Para incluir una imagen en un documento HTML se emplea la etiqueta

<IMG>, la cual tiene el atributo imprescindible SRC y el atributo ALT.

SRC indica el origen (source) de la imagen a mostrar, y ALT sirve para

indicar la descripción de la imagen con la finalidad de que los usuarios que acceden

a la página puedan hacerse una idea de las imágenes que contienen mientras éstas

están siendo cargadas.

<img src= “nombre del archivo” Alt = “Descripción de la imagen” > FIGURA 2.11 SENTENCIA IMG

Los formatos gráficos que se pueden utilizar son: .Gif, .JPG o .JPEG, .XBM y

.PNG. Si la imagen está un formato diferente, el navegador no la visualizará. En la

figura 2.12 se muestra un ejemplo.


FIGURA 2.12 EJEMPLO DE INSERCIÓN DE IMÁGENES

2.9 Tablas.

Las etiquetas <TABLE> y </TABLE> definen el principio y el final de una

tabla respectivamente. Una tabla está compuesta por renglones o filas, definidas por

las etiquetas <TR> y </TR>, y a su vez cada renglón puede contener celdas,

definidas por las etiquetas <TD> y </TD>.

También se pueden utilizar las etiquetas <TH> y </TH> para definir los

encabezados de columnas, los cuales se mostrarán en negrita y centrados.

En la figura 2.13 se muestra un ejemplo de la creación de una tabla.

FIGURA 2.13 EJEMPLO DE CREACIÓN DE UNA TABLA

Los atributos WIDTH y HEIGHT permiten especificar el ancho y el alto de

una tabla utilizando un porcentaje de la dimensión de la pantalla o un número de

pixeles. En la figura 2.10 se aprecia que se definió el ancho de la tabla al 100% con

respecto a la pantalla (<table width=”100%”>). La diferencia entre porcentaje y

pixeles la detecta el navegador por el uso del símbolo %.


El atributo BORDER indica el tamaño de borde de la tabla (ver figura 2.12), si

este atributo no se incluye, por defecto la tabla no tendrá bordes.

La etiqueta CAPTION se utiliza para establecer el título de una tabla. Esta

etiqueta además admite el uso del atributo ALIGN.

También existe la posibilidad de asignar color de fondo a toda la tabla o a

una celda determinada. Para ello se utiliza el atributo BGCOLOR, el alcance de este

atributo dependerá de donde haya sido colocado. Por ejemplo:

<table border=2 bgcolor=”blue”>

indica que toda la tabla tendrá fondo azul. En cambio:

<td bgcolor=”Green”>Texto</td>

indica que sólo una celda tendrá fondo verde. (Ver figura 2.14)

FIGURA 2.14 EJEMPLO DE LOS ATRIBUTOS COLSPAN, ROWSPAN, ALIGN Y VALIGN


2.9.1. Alineación y dimensionamiento de celdas.

Por defecto el contenido de una celda está alineado a la izquierda y centrado

verticalmente, pero se pueden cambiar estos valores. Mediante el atributo ALIGN

se alinea de forma horizontalmente, y el atributo VALIGN sirve para alinear de

forma vertical.

Los atributos COLSPAN y ROWSPAN permiten que una celda ocupe el

espacio de varias expandiéndose hacia la celda de la derecha y hacia la siguiente fila.

COLSPAN indica el número de celdas contiguas que debe ocupar hacia la derecha y

ROWSPAN indica cuantas filas hacia abajo se expande la celda. La figura 2.14

muestra un ejemplo aplicando estos atributos.

2.9.2. Separación entre celdas.

El atributo CELLSPACING permite cambiar la separación entre celdas, y el

atributo CELLPADDING permite cambiar la separación entre el borde de la celda y

el contenido de la misma. Estos atributos pertenecen a la etiqueta TABLE. La figura

2.15 muestra ejemplos del uso de estos atributos.

Cellspacing

Cellpadding

FIGURA 2.15 EJEMPLO DE LOS ATRIBUTOS CELLSPACING Y CELLPADDING

2.10 Hipervínculos

Una característica importante de un documento HTML es el hipertexto, que

consiste en la posibilidad que tiene un usuario de poder moverse a través de un

documento o varios, haciendo click en zonas de texto o imágenes programadas


para tal fin. Cualquier elemento de un documento HTML puede ser definido como

enlace.

Existen dos tipos de hipervínculos: los que llevan a un punto del mismo

documento, los que llevan a otros documentos del mismo sitio, y los que llevan a

otros sitios.

2.10.1 Enlaces a un punto del mismo documento.

Cuando se trabaja con documentos muy extensos o índices es más cómodo

para el usuario colocar hipervínculos para ir desde un punto a otro. Para ello se

deben seguir los siguientes pasos:

1. El primer paso es definir las zonas del documento a las que se desea poder ir

de forma inmediata, para lo que se utiliza la etiqueta <A> de la siguiente

forma:

<A name=”nombreZona”>

En donde ”nombreZona” la podemos tratar como si fuera el identificador

de una variable, es decir, un identificador con caracteres alfanuméricos, que debe

iniciar con letra, y sin usar caracteres especiales (como: ¿=;. y el espacio en blanco).

Además es importante considerar que los nombres de zona NO PUEDEN REPETIRSE

a lo largo de un documento HTML.

2. El siguiente paso consiste en la creación de los enlaces a las zonas definidas,

para ello se utiliza nuevamente la etiqueta <A> pero con el atributo

indispensable HREF.

<A href=”#nombreZona”>Elemento de enlace</A>

En donde el atributo HREF junto con el símbolo # le indica al navegador

saltar hacia la parte del documento definida como ”nombreZona”. Si no se

utiliza el símbolo #, el navegador tratará de buscar el documento llamado

”nombreZona”, lo cual sería un error y generaría la ventana de error que se

muestra en la figura 2.16. Es importante recordar que “Elemento de

enlace” típicamente es un texto, pero que también puede ser una imagen, en

cuyo caso, primero habría que insertar la imagen con su correspondiente

etiqueta <IMG>. Un ejemplo de la creación de enlaces a puntos del mismo

documento se muestra en la figura 2.17.


FIGURA 2.16 MENSAJES DE ERROR AL NO ENCONTRAR UN DOCUMENTO GENERADOS POR LOS TRES NAVEGADORES MÁS

POPULARES: INTERNET EXPLORER, GOOGLE CHROME Y MOZILLA FIREFOX.


FIGURA 2.17 EJEMPLO DE HIPERVÍNCULOS A ZONAS DENTRO DEL MISMO DOCUMENTO

2.10.2 Enlaces a otro documento.

Para abrir otros documentos HTML del sitio que se está diseñando,

nuevamente se utiliza la etiqueta <A> de la siguiente forma:

<A href=”nombreDocumento.html”>Elemento de enlace </A>

Un ejemplo de la creación de enlaces otros documentos se muestra en la figura

2.18.

FIGURA 2.18 EJEMPLO DE HIPERVÍNCULOS OTROS DOCUMENTOS DEL MISMO SITIO

2.10.3 Enlaces a otros sitios.

Para abrir documentos HTML que se encuentran en otros servidores,

nuevamente se utiliza la etiqueta <A> de la siguiente forma:


<A href=”protocolo://URL/nombreDocumento.html”>

Elemento de enlace </A>

Los protocolos que se pueden utilizar son:

HTTP: (HyperText Transfer Protocol) Protocolo de Transferencia de

Hipertexto, indica que el enlace deberá abrir un documento que utiliza el

protocolo HTTP, es decir, un documento HTML que se encuentra en la

dirección especificada por el URL. Un ejemplo de la creación de enlaces a

documentos de otros sitios se muestra en la figura 2.19. En esta figura

además se muestra el uso de una imagen como elemento de enlace.

FTP: (File Transfer Protocol) Protocolo de Transferencia de Archivos, en

este caso se indica que se realizará una descarga de archivos desde el sitio

especificado por la URL. Tiene el siguiente formato:

<A href=”ftp://usuario:pswd@servidor:puerto/ruta;type=codigo_tipo”>

Elemento de enlace </A>

Si se omite el campo pswd (contraseña o password) la mayoría de los

navegadores solicitarán una contraseña al usuario al acceder al servidor

FTP, lo cual es recomendado para evitar que usuarios mal intencionados

accedan a contraseñas.

MAILTO: indica que el enlace servirá para enviar un correo electrónico,

en este caso, al usar este protocolo, en lugar de una URL debería

escribirse una dirección de correo electrónico. El navegador se encargará

de abrir la ventana del editor de correo correspondiente conforme se

encuentre configurado en el equipo del usuario.

GOPHER: es un sistema de obtención de documentos similar a la Web

que adquirió popularidad antes del despegue de la WWW. Al escribir

gopher en el protocolo de un enlace se busca acceder a los documentos

en los aún existentes servidores Gopher. Para ello se utiliza de la siguiente

forma:

<A href=”gopher://servidor:puerto/ruta”>

Elemento de enlace< </A>


TELNET: este protocolo abre una sesión interactiva con un servidor

determinado, permitiendo al usuario entrar y utilizar esa máquina. Para

ello se debe utilizar de la siguiente forma:

<A href=”telnet://usuario:contraseña@servidor:puerto”>

Elemento de enlace< </A>

NEWS: sirve para acceder a un solo mensaje o a un grupo de noticias

dentro del sistema de noticias Usenet. Tiene dos formas:

<A href=”news:grupo_noticias”> Elemento de enlace< </A>

<A href=”news:mensaje_id”> Elemento de enlace< </A>

Además de los atributos name y href de la etiqueta A que ya han sido explicados,

existe el atributo target que permite especificar dónde visualizar los contenidos de

un hipervínculo seleccionado. Se utiliza en combinación con la etiqueta <frame>

(que ya ha caído en desuso) o con múltiples ventanas de navegador.

FIGURA 2.19EJEMPLO DE HIPERVÍNCULOS A DOCUMENTOS DE OTROS SITIOS


CAPÍTULO III

SOFTWARE PARA CREACIÓN DE PÁGINAS WEB

3.1 Bloc de notas.

La forma más sencilla y gratis de crear un documento HTML es usando

el programa Bloc de notas que viene instalado con cualquier versión de Windows.

En él podemos crear y editar código HTML, ya que este lenguaje requiere de la

creación de texto sin formato.

Existen sin embargo, dos consideraciones importantes cuando se

trabaja con este programa:

1. Cuidarse de crear documentos con extensión HTML y no con extensión

.TXT que es la estándar generada por el bloc de notas. En la figura 3.1 se

muestra el lugar donde se debe cambiar la extensión.

2. Crear una carpeta en el disco duro del equipo de trabajo y procurar

realizar ahí las creaciones y ediciones de documentos HTML, en lugar de

trabajar desde dispositivos de almacenamiento USB, pues estos cambian

de dirección de origen dependiendo del equipo en el que se conecte, de

tal modo que en ocasiones se puede mostrar como D:, F: o G:, y esto

hará perder la dirección de los hipervínculos y las imágenes a desplegar.

3. Además, en la carpeta de trabajo procure organizarla de tal forma que

tenga elementos comunes en carpetas con nombres apropiados, por

ejemplo, imágenes, archivos pdf, etc.


FIGURA 3.1 ALMACENAMIENTO DE UN DOCUMENTO HTML CON BLOC DE NOTAS

3.2 Dreamweaver

Existen diversas versiones de Adobe Dreamweaver, la más reciente es la

versión CS5. Dado que el propósito de este manual no es la enseñanza de este

software en particular, sólo se mencionarán los aspectos básicos para la creación de

páginas Web.

En la figura 3.2 se muestra la ventana de inicio de Adobe Dreamweaver CS5,

identificándose con números del 1 al 6 cada uno de sus componentes:

1. Para iniciar un nuevo documento HTML, es necesario hacer click sobre la

opción HTML mostrada con el número 1.

2. En esta zona se encuentran los comandos para insertar diversos elementos

HTML, para Forms y Sprys

3. En esta sección, Dreamweaver muestra los archivos de estilo enlazados al

documento HTML actual o también puede mostrar las reglas de estilo

asignadas a un elemento HTML seleccionado.

4. En esta zona Dreamweaver muestra el directorio local del sitio web

actual.


5. El panel de propiedades muestra los atributos del elemento HTML

actualmente seleccionado, así como también permite su modificación.

6. La barra de menú de Dreamweaver, en donde también a la derecha se

pueden configurar diversas vistas.

FIGURA 3.2 VENTANA DE INICIO DE ADOBE DREAMWEAVER CS5

3.2.1 Creación de un nuevo sitio Web con Dreamweaver.

Ya se mencionó en el apartado anterior lo que se debe realizar para

comenzar a construir un nuevo documento HTML. Sin embargo, si lo que se desea

es el diseño de todo un sitio Web, deberá definirse primero en Dreamweaver para

facilitar su creación:

1. En Dreamweaver, selecciones Site -> New site. Haga click en la pestaña

“Advanced”

2. En la caja “Nombre del Sitio”, escriba el nombre de su aplicación Web.

3. Haga click en el icono de folder que está junto a la caja Local Site Folder,

y navegue para seleccionar la ubicación de la carpeta de trabajo. Haga

click en Guardar. (Ver Figura 3.3)


FIGURA 3.3 CREACIÓN DE UN NUEVO SITIO CON ADOBE DREAMWEAVER CS5

3.2.2 Edición de un documento HTML con Dreamweaver.

En la figura 3.4 se muestra la ventana de Dreamweaver editando un

documento HTML. Como se puede apreciar, Dreamweaver ofrece la oportunidad

de programar código HTML a través de su botón “Code”, o insertar elementos

HTML usando el panel Insert y la vista proporcionada por el botón “Design”.

También podemos observar ambas vistas si se oprime el botón “Split”. Estos

botones se observan con más detenimiento en la figura 3.5.

Una característica importante de Dreamweaver es que permite la

previsualización en el navegador mediante la tecla F12, con lo que se abrirá una

ventana del navegador por default mostrando el documento HTML. Si desea

configurar el navegador por defecto, puede ir al menú File->Preview in Browser-

>Edit Browsers List… para configurarlo.


FIGURA 3.4 EDICIÓN DE UN DOCUMENTO HTML CON ADOBE DREAMWEAVER CS5

FIGURA 3.4 BOTONES DE VISTAS DE ADOBE DREAMWEAVER CS5


Bibliografía Cabello, J. C. (2000). Diseño de páginas Web interactivas con JavaScript. México:

Alfaomega.

MEDIAactive. (2010). El gran libro fr Dreamweaver CS4. México: Alfaomega.

Momparler, R. S. (1998). HTML. Diseño y creación de páginas Web. México: Alfaomega.

Momparler, R. S. (2002). HTML 4. Diseño y creación de páginas Web. México: Alfaomega.

Musciano, C., & Kennedy, B. (2000). HTML y XHTML. La guía definitiva. España:

Ediciones Anaya Multimedia.

Manual HTML

Documents

Transcript of Manual HTML