2. • Dreamweaver es la herramienta de diseño de páginas web más
avanzada, tal como se ha afirmado en muchos medios. Aunque sea
un experto programador de HTML el usuario que lo maneje,
siempre se encontrarán en este programa razones para utilizarlo,
sobretodo en lo que a productividad se refiere. Cumple
perfectamente el objetivo de diseñar páginas con aspecto
profesional, y soporta gran cantidad de tecnologías, además muy
fáciles de usar:
Hojas de estilo y capas
Javascript para crear efectos e interactividades
Inserción de archivos multimedia...
3.
4.
5. • HTML («lenguaje de marcado de hipertexto»)
El HTML es mas una codificación que un lenguaje de programación. Su
estructura básica es tan simple que cualquier persona sin principios en
programación puede aprenderlo con gran facilidad.
Lo sorprendente de este lenguaje es que proporciona al usuario la información
en una manera interactiva, haciendo uso del hipertexto , o texto con enlaces
hacia otros lugares del Web, o hacia inserciones de multimedia (videos,
sonidos, gráficos, etc.). Además es universal y no depende del sistema
operativo que se esté utilizando.
6. Para comenzar debemos saber que el HTML utiliza una codificación
genérica, la cual hace uso de TAGS o etiquetas. Mediante estas
etiquetas es posible separar el contenido del documento de su formato.
Los TAGS son comandos que se especifican en el cuerpo del programa,
con el fin de darle las características deseadas a la información.
Toda página Web debe contener la siguiente estructura :
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY> Esta es mi primera página Web</BODY>
</HTML>
7. Entre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que
realmente vemos en el Web. Para comenzar a escribir un documento, es
importante tener en cuenta que el lenguaje HTML no distingue mas de un
espacio entre caracteres y se olvida de cualquier formato que se le de al texto
(negrilla, cursiva, tipo de letra, entre otras). Recordemos que para esto es que
se creó el HTML, toda presentación final debe ser proporcionada mediante las
etiquetas.
Cada etiqueta, con excepción de unas cuantas, le debe indicar al visualizador
cuando finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser
cualquier etiqueta. De esta manera indicamos cuando comienza y termina el
encabezado, el título, el cuerpo y el documento HTML.
8.
9. • LISTAS
Las listas sirven para desplegar la información que debe ser enumerada o tabulada de una manera
organizada.
En el lenguaje HTML se pueden construir varios tipos de listas :
Lista numerada: Numera los párrafos u objetos que se encuentran dentro de la siguiente estructura :
<OL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</OL>
Útiles para crear tablas de posiciones y enumerar procedimientos.
Lista con viñetas: Inserta un punto negro a los párrafos u objetos que se encuentran dentro de la siguiente
estructura :
<UL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</UL>
Son útiles para enumerar por puntos los comentarios de su página.
10. • Lista de definición: Son útiles para las entradas de tipo diccionario o para
las secciones de documentos donde un término es el encabezado de la
sección y la definición es el texto de aquella.
La estructura es la siguiente :
<DL>
<DT> Primer término.
<DD> Primera definición.
<DT> Segundo término.
<DD> Segunda definición.
Etc...
</DL>
• A cada una de estas listas se les puede crear una lista dentro de ellas,
simplemente agregando la estructura deseada dentro de la etiqueta
correspondiente.
11. VÍNCULOS DE HYPERTEXTO
• El hipertexto son vínculos dentro del texto del documento HTML
que permiten al usuario navegar con facilidad, tanto a nivel interno
como externo, es decir , pueden crearse vínculos que lleven hacia
una misma parte del documento (interno) o hacia otra parte del
mundo Web (externo).
Las etiquetas HTML que se encargan de generar los vínculos son <A>
y </A>. A esta etiqueta se le debe agregar el "URL" con el que se
desea vincular. Esto se realiza de la siguiente manera :
<A HREF="URL">Texto del vínculo</A>
12. AGREGANDO IMÁGENES A SU PÁGINA
Las páginas en el Web no deben estar llenas de texto por todos lados pues esto hace que los
usuarios se aburran de verlas y como resultado obtendrán una página que nunca es visitada. Una
herramienta muy útil para hacer de las páginas un documento llamativo y amigable es hacer uso de
imágenes relacionadas con el texto al que se esta haciendo referencia. ¿Se imaginan una valla
publicitaria sin ningún tipo de imagen ?
También es muy importante una excelente combinación de colores de fondo y de texto, con el fin
de hacer que la página sea lo mas leíble posible. Es en este punto donde entra a jugar la creatividad
del diseñador.
Para colocar una imagen en una página basta con llamarla desde el documento HTML ( es similar los
vínculos hacia páginas cercanas). Lo primero es diseñar el gráfico deseado en cualquier programa de
dibujo como el Corel Draw o el Adobe Photoshop, luego se debe convertir a cualquiera de los
formatos aceptados por el lenguaje HTML (GIF y JPEG).
La estructura es la siguiente : <IMG SRC= "Nombre del archivo" >
Donde "Nombre del archivo" es el nombre del archivo de gráfico que desea desplegar.
13. ESTRUCTURA BÁSICA DE LAS TABLAS
<TABLE BORDER="Número entre 0 y 7">
<CAPTION ALIGN=TOP ó BOTTOM>;Aquí va el texto del título</CAPTION>
<TR>
<TD>Primera fila, primera columna</TD>
<TD>Primera fila, segunda columna</TD>
<TD>Primera fila, tercera columna</TD>
..........
</TR>
<TD>Segunda fila, primera columna</TD>
<TD>Segunda fila, primera columna</TD>
<TD>Segunda fila, primera columna</TD>
..........
</TR>
etc...
</TABLE>
Notas: El número que se designa en la etiqueta <TABLE BORDER="Número entre 0 y 7"> determina
el ancho del borde de la tabla. Este número puede estar entre 0 y 7.
Se preguntarán que significa la etiqueta <CAPTION ALIGN=TOP ó BOTTOM>; Aquí va el texto del
título</CAPTION>. Simplemente da la posibilidad de colocarle un título a la tabla, bien sea en la
parte superior (TOP) o en la parte inferior (BOTTOM).
