Manual HTML-Dreamwaver [by IrvingSd].Desbloqueado
-
Upload
oscar-f-riuga -
Category
Documents
-
view
227 -
download
8
description
Transcript of Manual HTML-Dreamwaver [by IrvingSd].Desbloqueado
L.I. Irving Santamaría Domínguez ● DISEÑO DE
SOFTWARE PARA WEB
HTM
L - E
l LE
NG
UA
JE H
TM
L.
1
C o n t e n i d o
El Lenguaje Html. ______________________________ 5 Mi Primer Documento Html. _____________________ 5 Características Generales De Html.. _______________ 6 Cuatro Normas Fundamentales __________________ 7 Estructura De Un Documento Html. _______________ 9 Comandos Básicos De Html ______________________ 9 Enlaces: A. __________________________________ 17 Imágenes ___________________________________ 21 Tablas ______________________________________ 25 Editores Y Conversores ________________________ 30
Dreamweaver 8 ______________________________ 31 Editar Páginas Web Dw8 ______________________ 32 Mi Primera Página En Dreamwaver ______________ 33 El Entorno De Trabajo De Dreamwaver ___________ 36 Configuración De Un Sitio Local En Dw8 __________ 39 Propiedades Del Documento En Dw8 _____________ 40 Los Colores En Dw8 ___________________________ 42 Listas Dw8 __________________________________ 43 Caracteres Especiales En Dw8 ___________________ 43 Estilos Css En Dw8 ____________________________ 44 Hiperenlaces En Dw8 __________________________ 44 Imágenes En Dw8 ____________________________ 47 Tablas En Dw8 _______________________________ 48 Marcos En Dw8 ______________________________ 49 Formularios En Dw8 __________________________ 51 Multimedia En Dw8 ___________________________ 54 Las Plantillas En Dw8__________________________ 56 Html Desde Dreamweaver _____________________ 57
Otros Elementos _____________________________ 60 Publicar Las Páginas En Internet. ________________ 62 Direcciones Internet De Interés. _________________ 62 Bibliografía. _________________________________ 64
EEnn eessttee mmaannuuaall nnooss iinnttrroodduucciirreemmooss eenn llaa ccrreeaacciióónn ddee ssiittiiooss WWeebb,, pprriimmeerroo ddee uunnaa mmaanneerraa mmaannuuaall ppaarraa llaa ccoommpprreennssiióónn ddeell ccóóddiiggoo HHTTMMLL yy ppoosstteerriioorrmmeennttee ccoonn uunn ssooffttwwaarree ddee ddiisseeññoo ccoommoo lloo eess DDrreeaammwwaavveerr..
Compiled by
L.I. Irving Santamaría Domínguez
www.irvingsd.co.cc
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
El L
EN
GU
AJE
HT
ML
.
2
INTRODUCCIÓN Este manual está pensado para aprender los conceptos básicos necesarios para construir sus propias páginas Web. Para quien quiera ampliar sus conocimientos se suministran también unas referencias de consulta a otros sitios del Web. En su confección se ha procurado seguir siempre un criterio eminentemente práctico. Para mejor asimilar los conceptos tratados, se propone al final de cada apartado un ejemplo práctico. Primeras herramientas: Para comenzar sólo son necesarios dos elementos: Un editor de texto. Vale cualquiera, siempre que no formatee el texto. Por ello, los más
adecuados son los más sencillos (como por ej., El block de notas de). Si se utilizan procesadores como el Word, se deben guardar los archivos como 'Sólo Texto', para que no introduzca órdenes de formateo, que pueden provocar errores al cargarlo en el navegador.
Un visualizador o navegador del Web: Netscape, MSI Explorer, Mosaic, etc. El editor de texto lo usaremos para ir escribiendo los documentos HTML, que será posteriormente interpretado por el navegador, con lo que iremos comprobando los cambios y añadidos que vayamos efectuando. Existen ciertos programas que nos ayudan a automatizar este proceso, pero es muy conveniente comenzar a hacerlo de una manera manual, para comprender bien la estructura del lenguaje HTML Método de trabajo: Con el editor de texto crearemos un archivo con el nombre que queramos (p. ej. ejemplo1), pero que debe tener necesariamente la extensión .html (o .htm si nuestro sistema operativo no soporta extensiones de más de tres letras). Habrá un archivo distinto para cada apartado; conviene crear un directorio específico en su ordenador e irlos guardando en él, para poder repasar lo aprendido, aparte de que pueden ser necesarios para ejecutar otros ejemplos prácticos. Dreamweaver es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
El L
EN
GU
AJE
HT
ML
.
3
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
El L
EN
GU
AJE
HT
ML
.
4
| A C T I V I D A D | Investiga y los siguientes términos y
escribe las conclusiones a las que hayan llegado en tu grupo.
A que se refiere el termino WEB
Diferencia entre página web y sitio web.
Diferencia entre HTML y HTTP
Diferencia entre web estática y web dinámica
Diferencia entre hosting y dominio
De la siguiente dirección escribe las partes de la URL:
http:// www. cbtvillagro .edu .mx /Galeria/ Fotos2012 .html
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
El L
EN
GU
AJE
HT
ML
.
5
EL LENGUAJE HTML. EL LENGUAJE HTML.
HTML es un lenguaje que se utiliza para la creación de páginas en la WWW. Por página
entenderemos el documento que aparece en el navegador.
HTML se compone de una serie de comandos, que son interpretados por el navegador, o
programa que utilizamos para navegar por el WWW. En última instancia es el navegador el que
ejecuta todas las órdenes contenidas en el código HTML, de forma que un navegador puede estar
capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página
tenga una imagen de fondo, o un texto parpadeando, pero si nuestro navegador no está
capacitado para esas funciones, no podremos verlas.
MI PRIMER DOCUMENTO HTML (PRÁCTICA # 1).
Siga las siguientes instrucciones atentamente; ellas le permitirán crear un documento HTML en
su ordenador; este archivo no será visible para otros usuarios de Internet.
Le recomiendo que cree un directorio en su ordenador para almacenar las páginas web que vaya
haciendo al aprender; y que practique un tiempo antes de poner páginas en Internet.
1. Abra el editor de textos: en Windows abra el Block de Notas 2. Teclee lo siguiente:
<HTML> <HEAD>
<TITLE>Ejemplo 1 - Mi primera pagina Web</TITLE> </HEAD> <BODY>
<CENTER><H1>Mi primera pagina Web</H1></CENTER> <HR> Esta es mi primera pagina, aunque todavia es muy sencilla. <BR>Como el lenguaje HTML no es dificil, pronto estare en condiciones de hacer cosas mas interesantes. <P> Aquí va un segundo parrafo.</P>
</BODY> </HTML>
3. Grabe este archivo con el nombre: ejemplo1.html 4. Abra el navegador. No necesita conectarse a Internet para ver las páginas en su computador.
Puede trabajar Off‐line
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
CA
RA
CT
ER
ÍST
ICA
S G
EN
ER
AL
ES
DE
HT
ML
..
6
5. Elija "Archivo/Abrir página" en la barra de menú del navegador. 6. Seleccione el archivo ejemplo1.html que acaba de crear. Las líneas en blanco y las especificaciones del texto se han puesto para mayor claridad, pero no son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores. Obsérvese además la falta de los acentos. Se hablará más adelante sobre el motivo de ello. ¡Usted ha creado su primer documento HTML!.
CARACTERÍSTICAS GENERALES DE HTML..
Marcas y atributos.
El lenguaje HTML se estructura utilizando marcas o etiquetas o comandos (a partir de ahora
utilizaremos indistintamente uno de 3 términos para denominar a los elementos que se
estructura HTML). La forma general de una marca es la de un comando HTML encerrado entre
dos signos de menor y mayor como a continuación se muestra:
<marca [atributos]> ......................................[</marca>]
El mecanismo de funcionamiento de estas marcas es muy sencillo. Cuando el navegador
encuentra el signo menor (<), examina todos los caracteres hasta que encuentra el final de la
marca ‐ el símbolo mayor (>). Entonces, interpreta el contenido de la marca, y aplica esa
propiedad al texto que viene a continuación.
Hay marcas que se aplican a todo el documento HTML, o sólo desde el punto en que son
insertadas hasta el final del documento. Otras se aplican exclusivamente a un fragmento del
texto. En ese caso, el final de la aplicación se especifica con la misma marca precedida de la barra
inclinada hacia atrás (/).
Las marcas pueden contener de forma opcional u obligatoria, lo que se denominan atributos o
modificadores. Los atributos matizan el significado de la marca, y que se expresan de la siguiente
forma:
<marca atrib1=“valor1” atrib2=“valor2”..............>
El valor de los atributos se expresan encerrados entre comillas.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
CU
AT
RO
NO
RM
AS
FU
ND
AM
EN
TA
LE
S
7
En la mayor parte de los navegadores es posible omitir las comillas y colocar directamente el
valor del atributo. Esta práctica. a pesar de estar extendida, no es muy aconsejable ya que no
está normalizada, y no esta soportada por la totalidad de los navegadores.
Algunos atributos sólo viene definidos por su nombre (no tienen valor); son los atributos
llamados compactos.
Concatenación de marcas.
Las marcas se pueden anidar o encadenar una a continuación de otra, de forma que se pueden
aplicar simultáneamente varias propiedades a una misma porción de documento. Así el texto
encerrado en las marcas:
<MARCA1><MARCA2> Texto </MARCA2></MARCA1>
queda afectado tanto por las propiedades de la MARCA1 como por los de la MARCA2. Todas las
marcas son independientes entre sí, por los las siguientes líneas de código HTML, tiene efectos
idénticos, sean cuales sean las marcas concretas:
<MARCA1><MARCA2> Texto </MARCA2></MARCA1> <MARCA1><MARCA2> Texto </MARCA1></MARCA2> <MARCA2><MARCA1> Texto </MARCA1></MARCA2> <MARCA2><MARCA2> Texto </MARCA2></MARCA1>
A pesar de que son expresiones completamente idénticas, es recomendable seguir el orden
lógico de la concatenación, ya que esto facilita de forma sustancial la edición de documentos
HTML. De las cuatro opciones anteriores, las correctas serían la primera y la tercera.
CUATRO NORMAS FUNDAMENTALES
HTML es simplemente texto
Lo primero es saber que un documento HTML es un archivo de texto simple, luego, se puede
editar con cualquier editor de texto sencillo, como el Block de Notas de Windows.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
CU
AT
RO
NO
RM
AS
FU
ND
AM
EN
TA
LE
S
8
Igualdad de mayúsculas y minúsculas.
HTML no distingue entre mayúsculas y minúsculas en la especificación de marcas y sus atributos.
Sin embargo, por legibilidad, es aconsejable codificar tanto marcas como atributos en
mayúsculas.
No importan los tabuladores, ni los saltos de línea
Los navegadores no toman en cuenta las tabulaciones, los saltos de línea ni los espacios en
blanco extra. Esto tiene ventajas y desventajas. La principal ventaja es que permite obtener
resultados uniformes y de buena presentación de manera bastante fácil.
La principal desventaja es que un documento HTML, por lo menos se debe usar las marcas
<P>...</P> o <BR> para evitar que quede todo el texto en una sola línea.
Caracteres especiales
En HTML existen algunos caracteres que son especiales porque juegan un papel dentro del
mecanismo del funcionamiento de HTML, como sucede con los símbolos mayor que (>) y menor
que (<), y otros porque en los primeros tiempos de HTML, no formaban parte del juego de
caracteres internacionales del alfabeto, como sucede con los acentos.
Sea por los motivos que fuere, el caso es que existen ciertos símbolos que no pueden escribirse
directamente, sino que deben sustituirse por una cadena de caracteres que el navegador
interpretará de forma correcta. Estas cadenas de caracteres comienzan siempre por el símbolo
(&) seguido de una combinación de caracteres alfabéticos que tienen un significado especial en
HTML. En la siguiente tabla se muestra cómo escribir algunos de estos caracteres:
Carácter especial Transcripción HTML Comentario
Los acentos &<vocal a acentuar> acute; En la actualidad la mayoría de los browsers los soportan
Símbolo menor que (<) <:
Símbolo mayor que (>) >
La eñe ñ En la actualidad la mayoría de los browsers la soportan
Espacios en blanco (non breaking space) HTML sólo reconoce un espacio en blanco entre palabras
De manera más general, para representar símbolos reservados o símbolos particulares, se puede
utilizar el código ASCII del símbolo mediante la sintaxis siguiente:
&#código_ASCII;
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
ES
TR
UC
TU
RA
DE
UN
DO
CU
ME
NT
O H
TM
L.
9
ESTRUCTURA DE UN DOCUMENTO HTML.
Un documento HTML, no es más que el texto definido entre las marcas:
<HTML> ..................... </HTML>
Un documento HTML siempre se compone de las siguientes 2 partes:
<HTML> <HEAD> Cabecera del documento </HEAD> <BODY> Contenido del documento </BODY>
</HTML>
Cabecera: Se inicia mediante el comando <HEAD> y se termina con </HEAD>. Dentro de la cabecera hay información del documento, que no se ve en la pantalla principal, y que precisa las características del documento, principalmente el título del documento. El título del documento se declara entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o agenda de direcciones favoritas).
Cuerpo: se inicia mediante el comando <BODY> y se termina con el comando </BODY>. Este comando acepta numerosos modificadores. Dentro del cuerpo del documento se incluye cualquier carácter imprimible.
En la práctica algunos navegadores no necesitan las etiquetas de comienzo y cierre de <HTML>,
<HEAD>, y <BODY> para interpretar un documento HTML. Sin embargo, cuando diseñemos un
página Web debemos tener en cuenta a la mayoría de usuarios posibles, por lo que es muy
recomendable incluir estas marcas.
COMANDOS BÁSICOS DE HTML
A continuación se describen las marcas básicas de HTML que se pueden incluir en el cuerpo de un
documento HTML.
Definición de párrafos: P
La marca <P> sirve para separar párrafos en HTML. Además de introducir un retorno de carro,
fuerza un segundo retorno de carro para dejar una línea en blanco entre un párrafo y el
siguiente. De esta manera los párrafos quedan más espaciados y el texto se vuelve más legible
En esta marca la etiqueta de fin es opcional.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
CO
MA
ND
OS
BÁ
SIC
OS
DE
HT
ML
10
Por defecto, el párrafo de un documento HTML está justificado a la izquierda. Pero podemos
modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la marca <P>, que
puede tomar los valores siguientes.
LEFT: el párrafo es justificado a la izquierda. Valor por defecto.
CENTER: el párrafo es centrado.
RIGHT: el párrafo es justificado a la derecha.
Ruptura de líneas: BR.
La marca <BR> introduce un retorno de carro (o salto de línea) en el punto del documento en el
que es colocada. Es equivalente al punto y aparte de un texto normal.
Esta marca es vacía de manera que no necesita de la etiqueta de fin de marca.
Titulos de encabezamiento
HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se activan con el comando <Hn> y se desactivan con </Hn>, donde n es un número de 1 a 6. siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.
<H1>Nivel de encabezado 1</H1> <H2>Nivel de encabezado 2</H2> <H3>Nivel de encabezado 3</H3> <H4>Nivel de encabezado 4</H4> <H5>Nivel de encabezado 5</H5> <H6>Nivel de encabezado 6</H6>
Puede experimentar en el ejemplo anterior, cambiando el número para comprobar el efecto que se logra.
Los títulos de encabezado requieren la marca de fin, y siempre provocan un salto de línea,
aunque no se le indique.
Dando estilo al texto
Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, ..), tamaño, color que
se desea que aparezca el texto.
Tipos de letras
Algunas de las marcas que permiten especificar la tipografía de los caracteres son las siguientes:
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
CO
MA
ND
OS
BÁ
SIC
OS
DE
HT
ML
11
<B>Negrita (Bold)</B> <I>Cursiva (Italic)</I> <BLINK>Parpadeante (Blink)</BLINK> <TT>Tamano fijo (TypeWriter)</TT> <EM>énfasis (Emphasis)</EM> <STRONG>Gran énfasis (Strong)</STRONG> <U>Subrayado (Underline)</U>
Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar.
Tamaño del texto.
Para modificar el tamaño se utiliza el atributo SIZE de la marca <FONT>, de la manera siguiente:
<FONT SIZE="tamaño">Texto</FONT>
El comando <FONT> requiere la etiqueta de cierre.
HTML define siete tamaños de letra distintos, siendo el tamaño 3 el que se adopta por defecto.
Sin embargo, la mayoría de los navegadores permiten establecer cuál es la correspondencia real
del tamaño 3. Así, se puede hacer que el tamaño 3 corresponda a una fuente Arial de 16, o a una
Times de 8.
Existen dos formas de establecer el tamaño de un trozo de texto.
Tamaño de texto absoluto. <FONT SIZE=”argumento”>Texto</FONT>
donde argumento es un número entre 1 y 7
Tamaño de letra relativos. <FONT SIZE=”argumento”>Texto</FONT>
donde argumento es una cadena de caracteres que nos indica, con un signo + ó ‐,
el número de veces que esa fuente va ser mayor o menor que el tamaño de la
fuente por defecto
El uso de tamaños relativos nos permite olvidarnos de cual es el tamaño de letra que se está
utilizando en el momento actual, por lo que, en general, será preferible a utilizar tamaños de
letra absolutos.
Si queremos modificar el tamaño de todo el texto del documento, una forma de hacerlo sería
englobar todo el cuerpo del documento en una etiqueta con el tamaño de letra que queremos
utilizar. Así escribiremos algo parecido a lo que sigue:
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
CO
MA
ND
OS
BÁ
SIC
OS
DE
HT
ML
12
<HTML> <HEAD> ........... </HEAD> <BODY><FONT SIZE=“4”> ........ (contenido del documento) ....... </FONT></BODY> </HTML>
Sin embargo, hay otra forma de hacerlo más elegante y legible, utilizando la siguiente etiqueta:
<BASEFONT SIZE="tamaño">
Este etiqueta puede situarse en cualquier lugar del documento. Sin embargo, como se trata de
una etiqueta que afecta a todo el documento, para mantener la legibilidad lo más lógico es
colocarlo en la cabecera.
Si fijamos un tamaño de letra básico distinto del 3, debemos tener en cuenta que es posible que
alguno de los tamaños relativos no pueda llevarse a cabo, puesto que se sale de los límites
especificados.
Colores del texto.
Para dar color a un texto se utiliza el comando siguiente:
<FONT COLOR="color">Texto</FONT>
En un principio la forma de especificar un color en HTML, era mediante el formato hexadecimal.
Consistía en tres números hexadecimales (números expresados en base 16) de dos dígitos cada
uno. Con un número hexadecimal de dos dígitos podemos expresar hasta 256 valores distintos. El
primer número hexadecimal nos va a indicar la cantidad de rojo que tiene nuestro color, el
segundo la cantidad de verde, y el tercero la cantidad de azul (el blanco será FFFFFF, el negro
000000). Esta forma de definir los colores como combinación de los colores rojo, verde, y azul se
denomina RGB (red ‐ green ‐ blue).
Afortunadamente, la mayoría de los navegadores, al menos en sus últimas versiones, admiten
otra forma de insertar colores. En lugar de expresarlos, en formato hexadecimal, se expresan
como cadena de caracteres. Esta cadena es el nombre del color en inglés.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
CO
MA
ND
OS
BÁ
SIC
OS
DE
HT
ML
13
Para dar color a todo el texto del documento podemos hacerlo con: <BODY TEXT=“blue”>
Para especificar el color de fondo del documento deberemos utilizar: <BODY BGCOLOR=“blue”>
Listas
Las listas en HTML proporcionan una forma de clasificar la información, y hacer que ésta sea más
inteligible por parte del visitante de las páginas.
Listas ordenadas: OL.
También llamadas listas numeradas son aquellas en las que cada elemento tiene delante un
número que indica el orden del elemento dentro del conjunto de la lista.
La marca para crear una lista ordenada es <OL> .... </OL>. Son obligatorias las etiquetas de
comienzo y fin de estas marcas.
Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca <LI> .... </LI>.
La etiqueta de fin puede ser omitida.
Con la marca LI no es necesario introducir un retorno de carro detrás de cada elemento de la
lista.
Es posible especificar el tipo de numeración que se dará (números arábigos, números romanos,
letras, etc.), por defecto se sigue la numeración árabe.
Las listas numeradas pueden ser anidadas una dentro de otra.
Listas desordenadas: UL.
También llamadas listas no numeradas son listas en las que no es necesario numerar de alguna
manera los elementos que la componen, sino que cada elemento tiene delante un símbolo (un
punto, un cuadrado, etc..).
La forma de especificar una lista desordenada es mediante la marca <UL>. Las etiquetas de
comienzo y fin de esta marca son obligatorias.
Cada elemento de la lista se identifica mediante la marca <LI>. La etiqueta de fin para la marca
<LI> se puede omitir
También es posible en las listas desordenadas especificar el símbolo que va a aparecer delante de
cada elemento de la lista.
Las listas desordenadas también pueden ser anidadas una dentro de otra.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
CO
MA
ND
OS
BÁ
SIC
OS
DE
HT
ML
14
Listas de definición: DL.
A diferencia de los dos tipos anteriores de listas, las listas de definición, se utilizan para presentar
la información sin marcas, ni números, sino que utiliza los sangrados de los párrafos.
Las listas de definición están constituidas por términos y su subsiguiente definición.
La forma de implementar las listas de definición es con la marca <DL> de la siguiente forma:
<DL> <DT> Nombre del termino <DD> Definición del término
</DL>
Cada término de la lista de definición se indica con la marca <DT> y no sangrará, mientras que la
descripción del término se indica con la marca <DD> y sangrará hacia la derecha para resaltarla
del término.
Antes y después de la descripción de cada palabra clave, las listas de definición incorporan un
retorno de carro,
Las listas de definición también pueden anidarse.
Texto preformateado: PRE.
El hecho de que HTML ignore los retornos de carro a la hora de mostrar un texto no es un
comportamiento arbitrario, sino que es la forma que tenemos de que, independientemente de la
ventana del navegador, nuestro párrafo quede convenientemente justificado
Sin embargo, es posible que en alguna ocasión queramos que el texto aparezca en el navegador
tal y como lo hemos introducido, respetando los retornos de carro e incluso los espacios que
podamos haber dejado entre caracteres. Para ello podemos utilizar la marca <PRE> y englobar en
ella todo el texto del documento.
La marca <PRE> respeta tanto los retornos de carro como los espacios en blanco del archivo
original, y la letra aparece como tipo de letra de espacio no proporcional (El tipo de letra usado
por el texto preformateado es el mismo que el de <TT> ... </TT>), y no con el tipo de letra
habitual del navegador. Esta marca permite mostrar el texto preformateado tal cual.
Además, en el texto preformateado no se interpretan los caracteres especiales HTML: <, > y &.
Esta marca requiere de las etiquetas de comienzo y fin.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
CO
MA
ND
OS
BÁ
SIC
OS
DE
HT
ML
15
Centrando texto.
Para centrar una parte del documento, se delimita lo que se desea centrar mediante el comando
<CENTER> ... </CENTER>.
Líneas horizontales.
La marca <HR> permite trazar una líneas horizontales para separar distintas secciones de una
página HTML
Por defecto, las líneas horizontales van de la parte izquierda de la ventana del navegador a la
derecha.. Por otro lado tienen la parte superior oscura y la inferior clara, por lo que dan una
sensación de relieve.
Esta marca sólo requiere la etiqueta de comienzo.
Esta etiqueta tiene varios modificadores que permite cambiar el aspecto de la línea horizontal
(ancho, longitud,...).
Comentarios no visibles en la pantalla
A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos símbolos: <!-- y --> Ejemplo:
<!-- Esto es un comentario al código que no se verá en pantalla -->
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
CO
MA
ND
OS
BÁ
SIC
OS
DE
HT
ML
16
Ejemplo práctico nº2. Formato en HTML
En el editor de textos copiamos: <HTML> <HEAD> <TITLE>Ejemplo 2 - Comandos básicos</TITLE> </HEAD> <BODY> <CENTER><H1>Comandos básicos</H1></CENTER> <!-- Este documento contiene todo lo que he aprendido hasta ahora sobre HTMl --> <H2>Párrafos</H2> <P>Este es mi primer párrafo del ejemplo 2</P> <P>Este es mi segundo parráfo. Aquí hay una ruptura de línea<BR>de texto</P> <HR> <H2>Listas</H2> <H3>Ordenadas</H3> <P>La <FONT SIZE="+1"><I>musica</I></FONT> que mas me gusta es <I> (en orden de preferencia): </I></P> <OL>
<LI>El rock</LI> <LI>El jazz <!-- la marca LI no necesita de la etiqueta de cierre --> <LI>La musica clasica
</OL> <H3>Desordenadas</H3> <P>Sin un orden particular, mis <FONT COLOR="green"><B> aficiones </B></FONT> son las siguientes:</P> <UL>
<LI>El cine <LI>El deporte <LI>Natacion <LI>Baloncesto
</UL> <H2>De definición</H2> <DL>
<DT>Descripcion</DT> <DD>Es nombrar las propiedades de algo <DT>Lista descriptiva</DT> <DD>Es nombrar las propiedades de varios objetos
</DL> <HR> <CENTER>También sabemos centrar el texto</CENTER> <PRE> y escribir preformateado </PRE> <BLINK>y a escribir texto parpadeante</BLINK> <HR> </BODY> </HTML> Guardamos el archivo de texto con el nombre ejemplo2.html y lo cargamos en el navegador.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
EN
LA
CE
S:
A.
17
ENLACES: A.
La clave de la facilidad de uso de los documentos HTML, reside fundamentalmente en los enlaces. Los enlaces (o links) proporciona al que visita las páginas un mecanismo muy sencillo para moverse entre distintos documentos, permitiéndole moverse en aquellos aspectos que considere más importantes, mientras que desde el punto de vista del que crea las páginas permite distribuir de forma transparente al visitante el lugar o lugares en los que se van a almacenar los distintos documentos.
Para definir enlaces hipertexto se utiliza la marca <A> de la manera siguiente:
<A HREF=”direccion”>Texto del enlace</A>
donde: direccion: es el destino del enlace. texto del enlace: es el texto indicativo del enlace que aparece en la pantalla
normalmente con color especial y subrayado.
<A> requiere de la marca de fin.
Vamos a distinguir tres tipos de enlaces: 1. Enlaces a otras zonas de la misma página, 2. Enlaces a otras páginas., 3. Enlaces a otras zonas
de otras páginas.
Enlaces a otras zonas de la misma página
A veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde una posición a otra determinada. Así es posible hacer enlaces que lleven al usuario de una parte del documento a otra dentro del
mismo documento con solo hacer click. A este tipo de enlaces los llamaremos enlaces locales.
Estos enlaces constan de dos objetos:
El enlace: Corresponde a la zona en la cual el usuario hará click, para viajar a otra parte del
documento. Esta zona aparece subrayada en el documento. Un enlace local se crea delimitando
la zona con el comando <A href="#nombre"> ... </A>, en que nombre es la etiqueta que se está
referenciando.
El nombre enlazado o referenciado Corresponde a la zona del documento a la cual el usuario llegará al hacer click en la
referencia correspondiente. Un nombre local se crea delimitando la zona con el comando
<A NAME="nombre"> ... </A>, en que nombre es la etiqueta que asignamos a esta zona.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
EN
LA
CE
S:
A.
18
Ejemplo práctico nº 3 de enlaces locales
<HTML> <HEAD> <TITLE>Ejemplo 3 - Enlaces locales</TITLE> </HEAD> <BODY> <H2>Enlaces locales</H2> <H3><A NAME="indice">Indice</A></H3> <UL>
<LI><A HREF="#uno">Sección uno</A> <LI><A HREF="#dos">Sección dos</A> <LI><A HREF="#tres">Sección tres</A> <LI><A HREF="#cuatro">Sección cuatro</A> <LI><A HREF="#cinco">Sección cinco</A> <LI><A HREF="#seis">Sección seis</A> <LI><A HREF="#siete">Sección siete</A> <LI><A HREF="#ocho">Sección ocho</A>
</UL> <H3><A NAME="uno">Sección uno</A></H3> <P>Esta es la sección 1 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="dos">Sección dos</A></H3> <P>Esta es la sección 2 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="tres">Sección tres</A></H3> <P>Esta es la sección 3 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="cuatro">Sección cuatro</A></H3> <P>Esta es la sección 4 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="cinco">Sección cinco</A></H3> <P>Esta es la sección 5 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="seis">Sección seis</A></H3> <P>Esta es la sección 6 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="siete">Sección siete</A></H3> <P>Esta es la sección 7 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> <H3><A NAME="ocho">Sección ocho</A></H3> <P>Esta es la sección 8 de la pagina de enlaces locales</P> <P>Click aqui para <A href="#indice">volver al índice</A> </BODY> </HTML> Guardamos el archivo de texto con el nombre ejemplo3.html y lo cargamos en el navegador. Como vemos, las referencias locales son muy útiles para crear índices al comienzo del
documento.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
EN
LA
CE
S:
A.
19
Enlaces a otras páginas
Para enlazar a otro documento, es necesario conocer la ubicación exacta del documento que se
referenciará. Una ubicación, puede ser referenciada en forma relativa o absoluta
Ubicación relativa: Se indica especificando la posición del documento en la estructura de subdirectorios a
partir de la ubicación del documento actual. Sólo se puede usar para documentos
ubicados en el mismo ordenador.
Una referencia relativa a otro documento se hace usando el comando:
<A HREF="ubicación"> ... </A>
Ubicación absoluta: Se indica especificando el URL (uniform resurce locator) de la página que se está
referenciando.
Los URL son una manera universal de especificar una dirección. La forma más básica de referenciar un hypertexto es usar el comando:
<A href="http://ordenador/directorio/archivo"> ... El ordenador indica la máquina donde se encuentra el documento. El directorio y archivo
indican su posición dentro de ese ordenador. Los URL tienen muchas formas distintas
para referenciar distintos objetos.
Ejemplo práctico n° 4
<HTML>
<HEAD> <TITLE>Ejemplo 4 - Enlaces a otras páginas</TITLE> </HEAD>
<BODY>
<H1>Enlaces a otras páginas</H1>
<H2>Referencias relativas</H2>
<P>Se puede referenciar, por ejemplo, a un archivo localizado en el
mismo directorio, como por ejemplo, al <A
href="ejemplo1.html">ejemplo número 1</A>. También a un archivo
localizado en otro directorio, por ejemplo, esta
<A HREF="../guiahtml.html">guia HTML</a></P>
<H2>Referencias absolutas</H2>
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
EN
LA
CE
S:
A.
20
<H3>Algunos servicios WWW en España</H3>
<P>La <A
HREF="http://www.um.es/~biblio/">biblioteca de la Universidad de Murcia</A> que
permite
acceso al catalogo de la biblioteca. También está el servidor WWW de <A
HREF="http://www.rediris.es/">RedIris</A> y el servidor
de <A HREF="http://www.boe.es/">BOE</A> para leer consultar de BOEs
</P>
<H3>Algunos servicios en el extranjero</H3>
<P>Para informarse de la actualidad mundial, se puede acceder al
servicio <A HREF="http://www.cnn.com/">CNN</A>. Para los amantes de
la música se encuentra el servidor oficial de la <A
HREF="http://mtv.com/">MTV</A> y para localizar distintos tipos de
información está <A HREF="http://www.yahoo.com/">Yahoo!</A>.
</BODY>
</HTML>
Guardamos el archivo de texto con el nombre ejemplo4.html y lo cargamos en el navegador.
Enlaces a una zona de otra página
Para este tipo de enlaces se utiliza una mezcla de las dos formas anteriores. Se indica el URL de la
página a referenciar, luego un signo # y luego el nombre de la zona a referenciar.
Ejemplo práctico nº5
<HTML>
<HEAD> <TITLE>Ejemplo 5- Enlaces a zonas de otras páginas</TITLE> </HEAD>
<BODY>
<H1>Enlaces a zonas de otras páginas</H1>
<P>Enlazamos a la
<A HREF="ejemplo3.html#uno">la
seccion 1 del ejemplo 3</A>.</P>
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
IM
ÁG
EN
ES
21
<P>Enlazamos a la
<A HREF="ejemplo3.html#cinco">la
sección 5 del ejemplo 3</A>.</P>
</BODY>
</HTML>
Guardamos el archivo de texto con el nombre ejemplo5.html y lo cargamos en el navegador.
IMÁGENES
Las imágenes son un elemento esencial para diseñar páginas atractivas. No obstante, un excesivo
número de imágenes en una página pueden hacer ralentizar el proceso de visualización (las
imágenes son las partes de las páginas que más espacio ocupan, por lo que su transferencia
requiere más tiempo que la del texto). Es importante conseguir un compromiso entre una página
atractiva (lo que lleva incluir gráficos), y una página que pueda cargarse en un tiempo razonable
Principales formatos gráficos en Internet.
Existen una gran cantidad de formatos gráficos en el mundo de los ordenadores, cada uno de
ellos con sus ventajas e inconvenientes. Sin embargo, a la hora de publicar en Internet,
solamente debemos tener en cuenta dos formatos muy específicos: el GIF y el JPEG. Su elección
no es en absoluto un capricho, además de la alta resolución que consiguen, se trata como
veremos, de dos formatos que comprimen el tamaño de las imágenes, por lo que éstas pueden
transmitirse más rápidamente por Internet.
Para crear y manipular imágenes hay que utilizar un editor de imágenes, entre los más conocidos
se encuentran: Paint Shop Pro, Gif Construction Set, y Graphic Workshop.
Formato GIF.
Las siglas GIF provienen del inglés Graphics Interchange Format o formato de intercambio de
gráficos. Est formato fue desarrollado por CompuServe para proporcionar un mecanismo de
transmisión de archivos de imágenes mediante líneas telefónicas. Este mecanismo consiste en
comprimir las imágenes para una transmisión más rápida en un medio de baja capacidad como
son los hilos telefónicos.
Las imágenes en formato GIF están limitadas a 256 colores simultáneos.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
IM
ÁG
EN
ES
22
Una propiedad interesante del formato GIF es la de poder seleccionar un color “transparente”.
Así, cuando la imagen en cuestión es mostrada en un navegador, la zona de la imagen con el
color transparente toma el color del fondo del documento.
Otra propiedad interesante del formato GIF, es la poder crear gráficos animados, el formato de
este tipo de imágenes se le denomina GIF 89.
Los archivos de imágenes en este formato tienen asociados la extensión .gif.
Formato JPEG.
JPEG son las iniciales de Joint Photographic Expert Group (Grupo de Expertos Fotográficos
Reunidos). Al igual que el formato GIF, comprime las imágenes para una transmisión más rápida,
aunque difiere en el algoritmo de compresión.
Mientras que con el formato GIF la comprensión de un archivo de imágenes viene determinada,
JPEG nos permite especificar la relación de compresión deseada, por lo que podemos variar el
tamaño del archivo. Naturalmente, a mayor relación de compresión, menor tamaño y peor
calidad en la imagen final. Disminuyendo la compresión obtenemos imágenes de mayor calidad
pero también de mayor tamaño.
No debemos obsesionarnos con la calidad de las imágenes. Hay que tener presente que Internet
es en ocasiones un medio de transmisión bastante lento, por lo que a veces es preferible perder
algo de calidad en las imágenes antes de aburrir al visitante con nuestros documentos.
Los archivos de imágenes en este formato tienen asociado la extensión .jpg.
Inclusión de imágenes
La etiqueta que se utiliza para la inclusión de imágenes en una página Web es la siguiente:
<IMG SRC=”imagen.jpg”></IMG> donde imagen.jpg es un archivo de imagen
Tamaño de las imágenes.
Si no especificamos nada más, las imágenes aparecerán en el navegador con el tamaño que
tienen originalmente.
Para modificar el tamaño de las imágenes se utilizan los siguientes modificadores en la etiqueta
<IMG>:
WIDTH: especifica la anchura en pixels de la imagen.
HEIGTH: especifica el número de pixels que tendrá de alto la imagen.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
IM
ÁG
EN
ES
23
Escalado de imágenes.
Con el uso de loa modificadores HEIGHT y WIDTH podemos ampliar, y reducir las imágenes sin
deformarlas, es decir, escalarlas. Una manera cómoda de hacerlo es solamente especificar una
de las dos dimensiones, se asume que la reducción o la ampliación es proporcional a la otra.
Bordes de la imagen.
Mediante el modificador BORDER se puede añadir bordes a nuestras imágenes.
Alineación de texto con las imágenes.
La alineación del texto con las imágenes se realiza mediante el modificador ALIGN. Los valores
que este modificador puede tomar son: TOP, TEXTOP, CENTER, ABSCENTER, MIDDLE,
ABSMIDDLE, BOTTOM, LEFT, y RIGTH.
Además podemos especificar la distancia que queremos establecer entre el gráfico y el texto. Si
este parámetro no se establece, el texto es situado justo a continuación de la imagen. Para
introducir espacios horizontales y verticales a continuación de la imagen se utilizan los
modificadores VSPACE y HSPACE.
Imágenes con texto alternativo.
Los navegadores tienen la opción de no mostrar las imágenes, en un intento de acelerar el acceso
a las páginas. Muchas veces, las imágenes incluidas en una página son fundamentales para
comprender la información que se ofrece. Por ejemplo, una
página destinada a alumnos universitarios de asignaturas de estadística o matemáticas puede
contener imágenes de fórmulas matemáticas. Para estos casos se puede añadir a la imagen un
texto ALTernativo, que dé una idea del contenido de la imagen. Para añadir un texto alternativo,
se utiliza la orden como se muestra a continuación:
<IMG SRC="nombre_imagen" ALT="Texto_alternativo">
Uso de imágenes como enlaces.
Para utilizar una imagen como enlace a otra parte de la página o a otra página, simplemente hay
que introducirlas dentro de la etiqueta <A HREF> de la siguiente manera:
<A HREF=”enlace”> <IMG SRC=”imagen”> </A>
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
IM
ÁG
EN
ES
24
Imágenes como fondo de un documento.
Un efecto muy utilizado es el uso de imágenes como fondo de un documento HTML. La manera
de hacerlo es con el atributo BACKGROUND de la marca <BODY>.
La imagen de fondo en general será más pequeña que el área de documento del navegador. Lo
que hace entonces el navegador es repetir, partiendo de la esquina superior izquierda, la imagen
que hemos elegido como fondo del documento.
A la hora de elegir la imagen de fondo, es preciso tener en cuenta que el texto del documento
debe ser legible por encima de la imagen, por lo que hay que evitar colocar imágenes con colores
demasiado fuertes.
Mapas sensitivos.
Los mapas sensitivos o mapas de imágenes son un tipo determinado de enlace mediante gráficos.
Constituyen una herramienta de gran potencia, aunque son algo complicados de construir y
mantener.
Los mapas sensitivos están compuestos de dos elementos fundamentales: la imagen del mapa y
los enlaces de cada zona del mapa.
La imagen del mapa es la imagen que vamos a dividir en zonas distintas. Pulsando en cada una de
esas zonas iríamos a un enlace distinto.
Los mapas sensitivos no se explican en esta guía. Puede encontrar información más información
sobre los mapas sensitivos en las referencias que se incluyen en el apartado "Direcciones Internet
de interés".
Ejemplo práctico nº6
<HTML>
<HEAD> <TITLE>Ejemplo 6 - Imagenes </TITLE> </HEAD>
<BODY BACKGROUND="nubes.jpg" TEXT="#AA0000">
<CENTER>
<H1>Imágenes</H1>
</CENTER>
<HR>
Esta es mi página del Web. No es muy extensa, pero tiene todos los
elementos básicos. Espero que os guste. Poco a poco le iré
añadiendo más cosas interesantes.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
TA
BL
AS
25
<P> <A HREF="ejemplo2.html"> <IMG SRC="hombre.gif"> </A> <FONT SIZE=+3>Mis
aficiones</FONT>
<P> <A HREF="ejemplo4.html"> <IMG SRC="casa.gif"> </A> <FONT SIZE=+3>Mis
páginas
favoritas</FONT>
<CENTER>
<H3> Un lugar ideal para mis vacaciones </H3>
<IMG SRC="isla.gif" ALT="isla">
<HR>
<CENTER>
<H3>Expediente X - Mulder</H3>
<IMG SRC="3mulder.gif" WIDTH=119 HEIGHT=160></CENTER>
<HR>
</BODY>
</HTML>
Guardamos el archivo de texto con el nombre ejemplo6.html y lo cargamos en el navegador.
TABLAS
Una tabla es una manera muy compacta y clara de mostrar la información. Una tabla en HTML se
entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a
su vez un conjunto de celdas, puestas una al lado de la otra.
Una tabla se declara usando el comando <TABLE> ... </TABLE>. Dentro de la tabla, se usa <TR>..
</TR>para indicar una fila y dentro de una fila, <TD> ... </TD> para delimitar el contenido de una
celda. El elemento de cierre de fila y de celda es optativo.
El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiqueta vistas
anteriormente
Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir
celdas, especificar la alineación del contenido de la celda, y mucho más.
Para entender mejor el comando <TABLE> ... </TABLE>, está disponible una muy amplia gama de
ejemplos.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
TA
BL
AS
26
Ejemplo de tabla
Aquí se muestra una tabla muy simple:
<TABLE>
<TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR>
<TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda C2</TD></TR>
<TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda C3</TD></TR>
</TABLE>
Título de la tabla.
Es conveniente que las tablas tengan un título que las identifique y aclare su contenido. Aunque
ese título puede ser contenido colocando texto formateado antes de la tabla, HTML dispone de la
etiqueta <CAPTION> para darle nombre a la tabla, de la siguiente forma:
<TABLE> <CAPTION> Nombre de la tabla </CAPTION> ……….
</TABLE> Esta etiqueta tiene la ventaja que el texto formateado se coloca automáticamente en el centro
de la anchura de la tabla.
Bordes de la tabla.
Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de la etiqueta
<TABLE>. La sintaxis es:
<TABLE BORDER="anchura"> ……….
</TABLE>
donde anchura indica la anchura en pixels del borde exterior de la tabla.
El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura que se
especifica solo afecta a los bordes externos.
El efecto de sombreado del borde exterior se produce cuando el modificador BORDER toma un
valor superior a uno. Si queremos que el borde exterior de la tabla sea igual que los bordes
interiores, debemos hacer BORDER=”1”.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
TA
BL
AS
27
Cabeceras de filas y de columnas.
La inclusión de cabeceras en cada fila y columna ayuda a comprender el contenido de la tabla.
No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. Sin embargo, existe
una forma alternativa de indicar la cabecera de una fila o columna mediante la etiqueta <TH>. La
desventaja de usar esta etiqueta es que el texto que va dentro de ella no admite formateado
como el de las otras celdas.
Tamaño de la tabla.
Por defecto el tamaño de la tabla viene dado por el texto o los gráficos que contiene. Sin
embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra tabla.
La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH dentro de
la etiqueta <TABLE>. La sintaxis es:
<TABLE WIDTH="anchura"> ……… </TABLE>
Aquí anchura puede ser un número que especifique en pixels la anchura absoluta de la tabla, o
bien un porcentaje que indique la anchura de la tabla en relación a la anchura del área del
documento del navegador.
A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas ocupa una
anchura mayor, la tabla tomará la anchura mínima para que el texto de las celdas pueda verse
íntegramente.
Justificación de la tabla.
Por defecto, nuestra tabla quedará justificada a la izquierda. La forma de centrarla es mediante la
etiqueta <CENTER>.
Espacio dentro de las celdas.
Es posible que queramos que nuestro texto no quede apretado dentro de las celdas, sino que
exista más espacio entre los textos de las celdas contiguas de forma que pueda leerse mejor. Esto
puede hacerse mediante los dos siguientes modificadores:
CELLPADDING: establece la distancia mínima en pixels entre los bordes de cada celda y el texto que va encerrado en ellas. Su valor por defecto es 1.
CELLSPACING: establece la anchura en pixels de los bordes de cada celda.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
TA
BL
AS
28
Forma de las celdas individuales.
Justificación del texto de las celdas.
HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para ello
implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. La forma de hacerlo
es:
<TABLE> <TR>
<TD ALIGN=”horizontal” VALIGN=”vertical”> ….. </TD>
</TR> ……….
</TABLE>
donde:
horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por defecto vale LEFT.
vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE. Por defecto vale CENTER.
Si queremos que una determinada justificación horizontal o vertical afecte a todas las celdas de
una fila, podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro de la etiqueta <TR>.
Celdas de diferentes tamaños.
Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo tamaño. Sin
embargo, es posible establecer el tamaños de una determinada celda mediante dos
modificadores de la etiqueta <TD>, que son WIDTH y HEIGHT:
WIDTH: especifica la anchura del texto en una celda concreta. Se puede especificar como valor absoluto o bien como relativo en forma de porcentaje de la anchura de la tabla.
HEIGHT: establece la altura de una celda individual.
No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. La única
forma de hacerlo es poniendo en cada celda de la fila los valores correspondientes de WIDTH y
HEIGHT.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
TA
BL
AS
29
Celdas irregulares.
Podemos desear que una de nuestras celdas ocupe varias filas y/o columnas. La forma de hacerlo
es introducir los modificadores COLSPAN y ROWSPAN en la etiqueta <TD>:
COLSPAN= especifica la altura de una celda en concreta en función de la altura de las celdas adyacentes. Se especifica en número de celdas adyacentes.
ROWSPAN: especifica la anchura de una concreta en función del celdas que están debajo. Se especifica en número de celdas de debajo.
Color de cada celda.
Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la
etiqueta <TD>. Como formato de colores se acepta el hexadecimal o una cadena de caracteres.
Texto en una solo línea.
Si hemos indicado la anchura de una celda y ésta es menor que el texto incluido en ella, y
queremos que el texto no ocupe más líneas, sino que se amplíe la anchura de la celda, debemos
añadir el modificador NOWRAP dentro de la etiqueta <TD>.
Ejemplo práctico nº7
<HTML>
<HEAD> <TITLE>Ejemplo 7 - Tablas</TITLE> </HEAD>
<BODY>
<CENTER><H1>Tablas</H1></CENTER>
<H2>Demostracion de COLSPAN y Encabezados</H2>
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TH COLSPAN="2">Head1</TH>
<TH COLSPAN="2">Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
ED
ITO
RE
S Y
CO
NV
ER
SO
RE
S
30
</TR>
</TABLE>
</BODY>
</HTML>
Guardamos el archivo de texto con el nombre ejemplo7.html y lo cargamos en el navegador.
EDITORES Y CONVERSORES
En el presente apartado se provee de algunos comentarios y reflexiones acerca del uso de
herramientas automatizadas para la generación de páginas Web: editores y conversores.
Editores
Seguramente usted ha visto o conoce programas que pueden asistir a una persona en la creación
de páginas Web, y quizás se ha preguntado: ¿ uso un editor o aprendo HTML ?
La respuesta que yo le daría es la misma que si usted me preguntara si es mejor saber aritmética
o ocupar una calculadora: ambas cosas no se contraponen entre sí.
Un editor HTML es una gran ayuda al diseñador Web: brinda la posibilidad de disponer y ver la
página mientras se crea, y de observar inmediatamente cómo aparecerán distribuidos los colores
y los elementos dentro del documento, es una ayuda para recordar las marcas y sus atributos, sin
embargo; puede resultar inadecuado por lo siguiente:
Poca flexibilidad, y en algunas ocasiones el código que generan en general es difícil de editar o mantener.
El conjunto de comandos que incorpora puede ser limitado, en caso de que sea un editor producido por alguna empresa que haga navegadores, o puede estar obsoleto.
El HTML que generan está fuertemente orientado al formato físico, más que a la estructura, con lo cual se pierde universalidad en el documento.
Es recomendable comenzar por lo básico, procurando aprender HTML bien, creando documentos
con editores de texto plano. Después si se desea se puede ocupar una combinación editor de
texto plano más editor HTML para crear documentos, a fin de explotar al máximo las capacidades
de ambos sistemas.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
HTM
L ►
Dre
amw
eave
r 8
31
Los editores HTML se clasifican en dos tipos:
Wysiwyg "what you see is what you get": en ellos se puede ir viendo en pantalla inmediatamente lo que se va creando. son muy útiles para apreciar los colores y la disposición en pantalla de los elementos.
No Wysiwyg: ellos usualmente invocan una aplicación externa (un browser) para mostrar lo que se va creando. Son muy útiles para recordar los comandos HTML y sus atributos.
Existen editores mixtos: presentan la pantalla dividida en dos segmentos, uno con el código HTML y otro con el resultado final.
Por ejemplo, uno de los editores HTML Wysiwyg más completos es el FrontPage 98 de Microsoft
(http://www.eu.microsoft.com/frontpage/), aunque es Wysiwyg, también permite trabajar en
modo comando.
Conversores
Las herramientas de conversión permiten transformar un documento escrito en otro formato a
un documento HTML.
El código HTML que generan es casi imposible de leer, debido a que hay muchas distinciones que
existen en lenguajes de formateo de texto que no existen en HTML, y deben ser simuladas, con
algún grado de truculencia.
¿Cuándo usarlos? cuando no hay otra alternativa, porque es inviable o ya se hizo un gran trabajo
previo en otro sistema.
¿Cómo usarlos? la idea básica es simplificar al máximo el documento (eliminar las sangrías,
uniformar los tamaños de letra, etc.) para luego pasar el conversor, generando un documento
HTML.
Finalmente conviene revisar la salida usando un editor de texto, revisando que el código
obtenido sea sintácticamente correcto, y dejando el documento lo suficientemente ordenado y
legible como para que sea fácil de modificar al momento de realizar futuras actualizaciones.
Por ejemplo, el paquete ofimático Oficce 97 (Word, Excel, PowerPoint, ...) de Microsoft incorpora
un conversor de documentos en formato Word a HTML. También el editor FrontPage 98,
anteriormente mencionado, incorpora un conversor de distinto tipos de formato de documentos
a HTML.
DREAMWEAVER 8 DREAMWEAVER 8
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
32
Dreamweaver 8 es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver 8 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te animas a comprar la versión de pago de este estupendo programa.
EDITAR PÁGINAS WEB DW8
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromedía Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.
Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Mi p
rim
era
pági
na e
n dr
eam
wav
er
33
MI PRIMERA PÁGINA EN DREAMWAVER
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categoría Página básica, HTML.
Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.
Una vez introducido el texto, vas a modificar el título y el color de fondo del documento.
Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Entonces se abrirá una ventana como la que aparece más abajo.
Cambia el Título por Mi primera página.
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul.
Seguidamente pulsa sobre el botón Aceptar.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Mi p
rim
era
pági
na e
n dr
eam
wav
er
34
Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd‐rom o en un disquete, pero preferiblemente en el disco duro.
Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un archivo de nuestro disco duro.
En los navegadores más modernos al colocar el cursor sobre una imagen aparecen estos iconos
en una esquina de la imagen, si haces clic en el icono del disquete aparecerá el mismo menú Guardar imagen como... a que hacíamos referencia anteriormente.
Copia una imagen de tus archivos, para luego poder insertarla en la página web que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.
Ahora tienes que insertar la imagen debajo de la segunda línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen.
En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, y después seleccionarla.
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:
Si no te aparece, puedes mostrarlo a través del menú Ventana, con la opción Propiedades.
Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraido. Para que te aparezca desplegado debes pulsar sobre el
botón , que aparece junto al nombre.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Mi p
rim
era
pági
na e
n dr
eam
wav
er
35
Selecciona la primera línea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen.
Después de esto, la apariencia de la primera línea habrá cambiado. Selecciona la imagen y las dos
útimas líneas de texto. Pulsa sobre el botón para centrarlos.
Una vez hayas centrado la imagen y las otras dos líneas siguientes, selecciona la segunda línea de texto, que aún no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el
botón y pulsa tres veces sobre el botón .
Selecciona de nuevo la última línea, y en Vínculo introduce http://www.elpais.es, para crear un enlace a esa otra página:
Después de todos estos pasos, puedes ver cómo ha quedado el documento pulsando la tecla F12.
Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar.
Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensión ha de ser htm o html.
Por ejemplo, puedes llamarlo prueba1.htm.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
El e
nto
rno
de
trab
ajo
de
Dre
amw
aver
36
EL ENTORNO DE TRABAJO DE DREAMWAVER
Vamos a ver cuáles son los elementos básicos de Dreamweaver 8 , la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.
La pantalla inicial
Al arrancar Dreamweaver
aparece una pantalla inicial como ésta, vamos a ver sus
componentes fundamentales.
Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas
las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante.
La barra de título
La barra de menús
La barra de herramientas estándar
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
El e
nto
rno
de
trab
ajo
de
Dre
amw
aver
37
La barra de herramientas de documento
La barra de estado
Los paneles e inspectores
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.
El inspector de Propiedades
El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc.
Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior‐derecha.
Seguramente será la herramienta de Dreamweaver que más vayas a utilizar.
La barra de herramientas Insertar o panel de objetos
La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc.
Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
El e
nto
rno
de
trab
ajo
de
Dre
amw
aver
38
Vistas de un documento
Puedes cambiar la vista del documento a través de la barra de herramientas de documento.
La vista Diseño
La vista Diseño permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente.
La vista Código
La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.
La vista Código y Diseño
La vista Código y Diseño permite dividir la ventana en dos zonas. La zona superior muestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Con
figu
raci
ón d
e u
n s
itio
loca
l en
dw
8
39
CONFIGURACIÓN DE UN SITIO LOCAL EN DW8
En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.
Crear o editar un sitio web sin conexión a Internet
Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en Dreamweaver.
Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios....
Recuerda que a través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opción Administrar sitio.
En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir las características del sitio.
Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.
Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.
Vamos a ver los datos que hay que editar para la categoría Datos locales.
Debe definirse el Nombre del sitio y la
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Pro
pie
dad
es d
el d
ocum
ento
en
dw
8
40
Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local.
Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto.
Estas tres características son las imprescindibles para definir un sitio local.
Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.
Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio
Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.
También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable de la pestaña Archivos.
PROPIEDADES DEL DOCUMENTO EN DW8
Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinación de teclas Ctrl+J.
Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página. Se abrirá el cuadro de diálogo siguiente:
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Pro
pie
dad
es d
el d
ocum
ento
en
dw
8
41
Las propiedades están organizadas en categorías.
En la categoría Aspecto, como ves en la imagen anterior, encontramos las propiedades:
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo.
Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
Tamaño: permite definir el tamaño de la letra.
Color del texto: es el color de la fuente.
Márgenes: permiten establecer márgenes en el documento. Los márgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de márgen solo funcionan para Netscape Navigator. Ninguno de estos márgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarán en los navegadores.
En la categoría Título/Codificación encontramos la propiedad:
Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver.
En la categoría Vínculos encontramos las propiedades:
Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Los
col
ores
en
dw8
42
Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si unos vínculos ya han sido visitados o no.
Vínculos activos: es el color de los vínculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.
En la categoría Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo.
LOS COLORES EN DW8 Para asignar colores es posible desplegar una paleta de colorescomo ésta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.
También es posible personalizar los colores a través del botón de la parte superior de la paleta.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el número hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul con
valor #3399FF, el botón quedaría del siguiente modo: .
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Lis
tas
dw
8
43
LISTAS DW8 Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.
Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Texto.
La lista con viñetas (desordenada) se selecciona a través del botón , mientras que la lista
numerada (ordenada) se selecciona a través del botón .
Ejemplo de lista numerada (ordenada):
1. Preparar la mochila 1. Sacar los libros de ese día 2. Introducir los libros del día
siguiente 2. Ponerme el pijama 3. Lavarme los dientes 4. Poner el despertador
Ejemplo de lista con viñetas (desordenada):
Perro Gato Aves
o Canario o Loro
Hamster
CARACTERES ESPECIALES EN DW8
A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á, ê, ì, ö, ç.. de forma rápida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación.
Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen de la derecha.
Sólo coloca el puntero del ratón sobre Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado.
Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Est
ilos
CS
S e
n d
w8
44
Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia.
ESTILOS CSS EN DW8
Con Dreamweaver 8, las características que apliquemos a un texto crearán automáticamente estilos CSS que se incrustarán en el documento actual y se aplicarán únicamente sobre él.
Veámoslo:
Para crear un Estilo CSS personalizado:
1. En el documento, se selecciona el texto al que se desea aplicar características concretas.
2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la fuente y del párrafo que queramos.
Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... según los nombres de los estilos ya creados.
Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades.
HIPERENLACES EN DW8
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo.
La ubicación es en Internet, por ejemplo, http://www.misitio.com/pagina/pagina1.html.
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Hip
eren
lace
s en
dw
8
45
del directorio en el que se encuentra el documento actual.
Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../
Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.
El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio.
En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier página del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se crearía como /pagina/secciones/seccion1.html.
Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual porque se define dependiendo del sitio raíz y no de la ubicación donde se encuentra.
Puntos de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínvulo debe ser nombre_de_documento.extension#nombre_de_punto.
El punto se define dentro de un documento a través del menú Insertar, opción Anclaje con nombre.
Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2
Crear enlaces
La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Hip
eren
lace
s en
dw
8
46
Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://
Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #.
Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo.
_blank: Abre el documento vinculado en una ventana nueva del navegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.
_self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
_top: Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema de Marcos.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Im
ágen
es e
n d
w8
47
IMÁGENES EN DW8
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana.
Si por algún motivo se desea insertar un BMP, este noaparecerá a no ser que en Tipo se seleccione Todos losarchivos.
Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:
Imagen de sustitución. Rollover
Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.
Aquí tienes un ejemplo de rollover. Sitúa el puntero sobre él para ver qué es lo que ocurre.
Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Tab
las
en d
w8
48
Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca.
El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador.
El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.
TABLAS EN DW8
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.
Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño.
Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla.
Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla. Las propiedades de la tabla se especifican a través de su inspector de propiedades.
A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Mar
cos
en d
w8
49
izquierda, al centro o a la derecha), el color de fondo (en Col. Fondo) o de borde de la tabla (en Col. borde ), o la imagen de fondo (en Im.).
Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia,
para permitir especificar otros valores.
MARCOS EN DW8
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la página que contiene los marcos agrupados.
Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
50
Crear marcos
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.
Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.
Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.
Vamos a ver el marco a la Izquierda.
Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.
Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.
En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.
Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vacío aparecerá a la derecha del documento original.
En esta imagen puedes ver un ejemplo de marco a la derecha.
Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha.
Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que teníamos inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco padre será el de la izquierda.
El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
For
mul
ario
s en
dw
8
51
FORMULARIOS EN DW8
Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.
Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.
Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programación, ya sea en VBScript, en JavaScript o en otro lenguaje de programación, y esto no entra en los objetivos del curso.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
Elementos de formulario
Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario.
A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página.
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.
Campo de texto y Área de texto
Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.
Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente.
También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
For
mul
ario
s en
dw
8
52
A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
Campo de t
Área de texto
A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.
Botón
Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).
Enviar
También es posible cambiar el texto del botón, a través de la propiedad Etiqueta del inspector de propiedades.
Casilla de verificación
Es un cuadrito que se puede activar o desactivar.
Deseo recibir información
Puede asignársele el Estado inicial como Activado o como Desactivado.
Botón de opción
Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, sólo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás.
Superman
Spiderman
Lista/Menú
Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.
--- Elige opción lista ---
--- Elige opción menú---PerroGato
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
For
mul
ario
s en
dw
8
53
Los elementos se añaden a través del botón Valores de lista... del inspector de propiedades.
Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.
Etiqueta
Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos.
Puedes crear formularios a través del menú Insertar, opción Formulario.
Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas rojas discontinuas, similar al de la imagen de la derecha.
Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a través del menú Insertar, opción Formulario.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.
Validar formularios
La validación de formularios sirve para hacer que Javascript valide el formulario antes de que se envíe el formulario, para que en el caso de que hayan campos del formulario que sean obligatorios, tengan que rellenarse antes de poder enviarse.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús+F3.
En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir una versión de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0.
Después de esto, hay que volver a desplegar el botón , y pulsar sobre la opción Validar formulario, deberás haber seleccionado el formulario previamente.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Mu
ltim
edia
en
dw
8
54
Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario.
Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir.
Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numérico (Número), una Dirección de correo electrónico, etc.
MULTIMEDIA EN DW8
Vamos a ver cómo insertar elementos multimedia. En concreto, veremos cómo insertar una animación Flash, un sonido y un vídeo
Las películas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de animación.
Estas películas pueden crearse mediante el programa Flash de Macromedía, y necesitan que el usuario tenga instalado el plug‐in para poder ser visualizadas.
Las películas Flash pueden insertarse en una página a través del menú Insertar, Media, opción Flash, o pulsando Ctrl+Alt+F.
También pueden insertarse pulsando sobre la opción Flash que aparece en la pestaña Común
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Mu
ltim
edia
en
dw
8
55
del panel Insertar, botón Media. El inspector de propiedades de las películas Flash es prácticamente igual que el de los botones y el texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualización de la película.
La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.
La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada más cargarse la página comenzará a reproducirse la película Flash.
Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película.
Interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.
Sonido
No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo.
Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug‐in.
Vídeos
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Las
pla
nti
llas
en
dw
8
56
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, elMPEG y el MOV.
Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug‐in.
A la derecha tienes un ejemplo de un archivo de vídeo, para el que se muestran los controles de vídeo. Puedes reproducirlo pulsando sobre los controles.
El inspector de propiedades para los archivos de vídeo insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug‐in.
LAS PLANTILLAS EN DW8
Las plantillas pueden crearse desde cero, o a partir de una página ya existente.
Una forma de crear una plantilla desde cero es a través del panel Archivos, pestaña Activos.
La pestaña Activos se puede abrir a través del menú Ventana, opción Activos. También pulsando F11.
Una vez abierto el panel hay que seleccionar el botón
, para poder trabajar con las plantillas.
Los botones inferiores del panel Activos son similares a los del panel Estilos CSS.
El único botón diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla.
Para crear una nueva plantilla hay que pulsar sobre el botón (Si este botón no está activado, pulsa con el botón derecho del ratón y elige Nueva Plantilla).
Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre él.
Para modificar una plantilla la seleccionamos de la lista y pulsamos el botón .
Paraeliminar una plantilla la seleccionamos de la lista y pulsamos el botón .
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automáticamente.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
HT
ML
des
de D
ream
wea
ver
57
Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y después guardarlo como plantilla a través del menú Archivo, opción Guardar como plantilla.
Cuando se pulsa dicha opción, aparece una ventana como la de la derecha.
En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a través del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.
HTML DESDE DREAMWEAVER
En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio código HTML, y no únicamente sobre el editor gráfico de la vista diseño.
En este tema no se pretende enseñaros el lenguaje HTML sino cómo poder realizar algunos reajustes directamente en el código estando dentro de Dreamweaver.
Etiquetas
Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web.
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle un título. Consistía simplemente en escribir el título deseado entre las etiquetas <TITLE> y </TITLE>.
Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre.
Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta.
Por ejemplo, un párrafo se inserta entre las etiquetas <P> y </P>, pero es posible cambiar sus características predeterminadas, como puede ser alinearlo a la derecha. Para ello, en lugar de introducir el texto del párrafo entre las etiquetas anteriores, ha de insertarse entre las etiquetas <P align="right"> y </P>.
También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May+INTRO
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
HT
ML
des
de D
ream
wea
ver
58
dentro del código HTML equivale a la etiqueta <BR>.
También podrás ver la etiqueta <br /> en las páginas que sigan el estándar XHTML. Éste obliga a que todas las etiquetas se cierren, incluso aquellas que no tienen etiqueta final, por lo que <BR>pasa a ser <br /> o <HR> a <hr />.
Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras posibilidades para trabajar directamente sobre el código.
Entidades HTML
HTML también dispone de códigos especiales para representar caráceteres especiales como pueden ser letras con acentos o no pertenecientes al alfabeto latino internacional, signos de puntuación o tipográficos y símbolos especiales que presenten un problema en HTML como < ó >,que podrían malinterpretarse por el inicio de una etiqueta.
Estos códigos pueden mostrarse como un código numérico o con un nombre de entidad. Ambos métodos son igualmente aceptables, pero ambos deberán ir encerrados entre los símbolos & y ;.
De este modo, < se escribirá como < o <
Usar este método es muy aconsejable, de esta forma los navegadores que estén configurados para visualizar juegos de caracteres que no contengan letras como la ó o la ñ podrán ver el sitio correctamente. En caso contrario estos caracteres se mostrarían de forma extraña.
En el tema 4 vimos que podíamos escribir estos caracteres utilizando el menú Insertar. Ahora te mostraremos otra forma para escribir caracteres que no se incluían en el listado de Dreamweaver y que podrás insertar escribiendo sus entidades en la vista de Código.
Aquí tienes una tabla de los caracteres más utilizados con sus Entidades HTML numérica y de nombre de entidad:
Carácter Entidad
con nombre
Entidad numérica
CarácterEntidad
con nombre
Entidad numérica
á á á Á Á Á
é é é É É É
í í í Í Í Í
ó ó ó Ó Ó Ó
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
HT
ML
des
de D
ream
wea
ver
59
ú ú ú Ú Ú Ú
ü ü ü Ü Ü Ü
ñ &ntide; ñ Ñ Ñ Ñ
¿ ¿ ¿ α α α
¡ &iexc; ¡ β β β
– – – © © ©
→ → → ® ® ®
← ← ← € € €
< < < espacio  
> > >
& & &
Si escribes más de un espacio en Dreamweaver, cuando lo visualices en un Navegador sólo veras uno. Esto es debido a que en HTML las palabras separadas por más de un espacio se visualizan sapradas de uno.
Para saltarte esta norma puedes escribir tantas veces como quieras y se visualizarán tantos espacios como elementos de entidad hayas introducido.
El inspector de código
Recordarás que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista Diseño, vista Código y vista Dividir (Código y Diseño).
Todas estas vistas se aplican directamente sobre la ventana del documento.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Otr
os e
lem
ento
s
60
Pero existe un panel que permite visualizar el código independientemente de la vista aplicada en el documento. Este panel es el llamado Inspector de código y puede abrirse a través del menú Ventana. Si la opción Inspector de código no te aparece directamente en este menú, posiblemente esté dentro de la opción Otros. También puedes abrir el Inspector de código pulsando F10.
El Inspector de código muestra el código HTML de la misma forma que lo hacen la vista Código y la vista Dividir (Código y Diseño), pero puede resultar más cómodo trabajar con el panel, ya que puede situarse en cualquier parte de la pantalla, y no se limita sólo al espacio del documento.
OTROS ELEMENTOS
Vamos a ver una serie de elementos que suelen aparecer en las páginas web, como pueden ser las marquesinas, las reglas horizontales y la fecha.
Marquesinas
Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea.
Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través del código.
Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina.
También es posible especificar algunas características de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. Por ejemplo, si pones <marquee behavior="slide">, la marquesina hará el desplazamiento una sola vez y se detendrá.
Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazará de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo código puedes ver a continuación:
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Otr
os e
lem
ento
s
61
<marquee behavior="alternate"> Bienvenid@s a PerrosGatos <img src="imagenes/logo_animales.gif"> </marquee>
Fecha
Dreamweaver permite insertar fácilmente la fecha de última modificación de las páginas.
Cuando se modifica una página en la que se ha insertado este tipo de fecha, se actualizará automáticamente con la fecha del sistema.
Conviene insertar la fecha de modificación cuando la página ha de contener información actualizada cada poco tiempo, para que los usuarios puedan saber cuando fue la última vez que se actualizaron los datos. Pero en el caso de que la página no se actualice hasta que pase cierto tiempo, es preferible no incluir la fecha de modificación.
Para insertar la fecha hay que dirigirse al menú Insertar, a la opción Fecha.
En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o no automáticamente al modificar y guardar la página de nuevo.
Regla horizontal
El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Una regla horizontal no es más que una línea horizontal.
Para insertar una regla hay que dirigirse al menú Insertar, opción HTML, luego la opción Regla horizontal.
El inspector de propiedades para las reglas es el siguiente
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
PU
BL
ICA
R L
AS
PÁ
GIN
AS
EN
IN
TE
RN
ET
.
62
PUBLICAR LAS PÁGINAS EN INTERNET.
Ahora que tenemos nuestra página terminada y registramos el nombre de dominio, llegó el momento de "subirla" a la Red. Y para eso tenemos dos posibilidades: armar el propio servidor o "host", ‐opción que requiere de una inversión considerable, por lo que sólo se aplica en grandes empresas‐ ; la otra consiste en conseguir un "pedacito" de espacio en uno de estos grandes servidores. Las empresas y los sitios que brindan este servicio lo hacen bajo el nombre de "web hosting".
Los usuarios y los pequeños comercios tienen que recurrir a un servicio web hosting. En este sentido la decisión pasará por determinar si se opta por un servicio gratuito o uno pago.
Por una cuestión obvia, los web hosting pagos suelen brindar un servicio mejor que los gratuitos. Aunque ‐como veremos más adelante‐ se pueden obtener, sin invertir un centavo, lugares para alojar páginas Web cuya calidad tiene poco y nada que envidiarle a algunos servicios pagos.
Cuando un usuario contrata los servicios premium de un proveedor de acceso a Internet, además de la conexión recibe casillas de e‐mail y, en muchos casos, un espacio para hospedar una página personal de prestaciones limitadas. Esto constituye para muchos la primera experiencia para publicar contenidos en la Web.
En definitiva, un host gratuito es una opción muy interesante para quienes desean publicar una página de servicios, de su afición, club de fan, hobby, etc. Si la página pertenece a una asociación o empresa de la que se necesita brindar una imagen profesional, seguramente habrá que ir pensando en un host pago (empresas comerciales que se dedican a la venta de espacios en la Red y servicios para tal fin). Estas empresas, entre otras cosas, van a brindar la posibilidad de que la página en cuestión tenga el nombre de dominio (la dirección de que deseamos en el formato elegido), es decir www.nombreelegido.com
Esta quizás es la diferencia más notoria ‐junto con el soporte técnico‐ entre los servicios pagos y los gratuitos: la posibilidad de que el nombre de dominio no sea "ensuciado" por agregados ya que, en mayor o menor medida, los hosts gratuitos hacen resaltar su presencia en la barra de direcciones del navegador.
Te recomiendo usemos para nuestra práctica un hosting gratuito, visita www.miarroba.es y generemos un cuenta, la cual aprenderemos a administrar en nuevo artículo.
Los usuarios y los pequeños comercios tienen que recurrir a un servicio web hosting. En este sentido la decisión pasará por determinar si vamos a optar por un servicio gratuito o uno pago.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
Pas
os p
ara
crea
r n
ues
tro
pro
pio
sit
io w
eb
63
PASOS PARA CREAR NUESTRO PROPIO SITIO WEB
By L.I. Irving Santamaría Domínguez
| www.irvingsd.co.cc | twiiter@irving_sd |[email protected] |
Breve descripción de los pasos que debemos seguir para crear nuestro sitio web o página web,
desde la idea u objetivo hasta la publicación y mantenimiento…
Muchas veces tenemos la idea de crear un sitio web, o simplemente queremos hacer nuestra
propia página web, y cuando comenzamos nos conseguimos con una gran cantidad de
interrogantes, que al final no sabemos por dónde empezar, con esta guía quiero organizar esos
pasos que debemos seguir para construir nuestro sitio web.
Como pasos principales debemos:
1. Definir el objetivo del sitio. Es decir, antes de tener el nombre de la página, debemos
definir cuál será el objetivo de montar nuestra página web, para ello hay que tener muy en
cuenta lo que vamos a ofrecer, incluso el tipo de personas que visitaran nuestro sitio web
2. Nombre del Dominio. Cumplido el paso 1, tienes que escoger el nombre de nuestro sitio
web, el mismo debe ser medianamente corto, y que le permita al cliente o usuario
recordarlo. Una vez escogido el nombre, debemos proceder a comprarlo, para ello
debemos considerar que nos permitan manejar los DNS del dominio, que se registre a
nuestro nombre y que posea panel de control. Ejemplo de nombres: necesitamos un
nombre de dominio para nuestra empresa que cuyo objetivo es dar soporte técnico de
computación. villagrosptecnico.com (este nombre además de ser muy largo, seguro el
usuario no se recordará) serviciotecnicosb.com (es un nombre corto y permite al usuario
recordar el objetivo del sitio web)
3. Bosquejo del Diseño. Debemos crear un borrador de cómo queremos nuestro sitio web, allí
hay que considerar, opciones del menú, colores, tipo de letra, imágenes, entre otras
características. Al finalizar esta fase se tendrá la idea o borrador de nuestro sitio web.
4. Programación y Diseño. Crear el sitio utilizando un lenguaje de programación o un software
de diseño, tales como: Php, Asp, Dreamweaver, entre otros
5. Adquirir un Hosting. Normalmente nuestras páginas web, deben permanecer guardadas en
un servidor que esté disponible en Internet, para ello hacemos la contratación de un plan
de Hosting, aquí debemos considerar: espacio en disco que ocupa nuestro sitio web, la
aplicación que utilizamos (php, html, asp, entre otros), si manejamos bases de datos, la
cantidad de transferencia, la garantía de que nuestro sitio web estará 100% disponible, que
nos permita tener nuestro panel de control
6. Subir, configurar y Publicar. Este paso sencillamente consiste en copiar todos los archivos
de nuestro sitio web hacia el hosting o servidor que adquirimos, así como configurar la
información de los DNS del dominio. En cuanto a Publicar, no es más que inscribir en los
buscadores nuestro nuevo sitio web.
L.I. Irving Santamaría Domínguez ◄ DISEÑO DE SOFTWARE PARA WEB
DW
8 ►
64
7. Mantenimiento. Este último paso, es importante tenerlo en cuenta, ya que muchas
personas cometen el error de tener su sitio web y olvidarse después que lo suben a
internet, el mantenimiento debe hacerse como mínimo mensualmente, ya que así los
visitantes del sitio sabrán que usted está pendiente de actualizar la información que
muestra en la internet
Estos serian los principales pasos que debemos tener en cuenta para crear nuestro sitio web, no
quiere decir que no puedas incluir otros que consideres necesarios, mientras más detalles tengas el
trabajo resultará 100% profesional, dando una buena imagen a tus visitantes.
DIRECCIONES INTERNET DE INTERÉS.
Las siguientes direcciones Internet contienen
guías y manuales donde puede encontrar más
información sobre el lenguaje HTML:
Diversos manuales HTML ‐ http://www.dic.uchile.cl/manual.html Dpto. Informática y Comunicaciones Universidad de Chile WebMaestro – http://www.wmaestro.com/webmaestro/ Francisco Arocena Tutorial HTML ‐ http://dns.uncor.edu/info/tutorial.htm Mercedes Doffi [email protected] Universidad Nacional de Córdoba Argentina
BIBLIOGRAFÍA.
Tejedores del Web ‐ http://www.dic.uchile.cl/~manual/ Carlos Castillo Dpto. Informática y Comunicaciones Universidad de Chile Tutorial de HTML ‐ http://www.um.es/~psibm/tutorial/ Juan José López García [ [email protected] ] Dpto. Psicología Básica y Metodología Universidad de Murcia WebMaestro – http://www.wmaestro.com/webmaestro/ Francisco Arocena Tutoriales www.Aulaclic.com Dreamwaver.