aprendiendo html con dreamweaver

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

DOCENTE: Salinas Encinas, Aldo [email protected] Página 1

Objetivos

Este curso tiene la finalidad e intención de aprender este nuevo mundo de la informática que son las páginas Webs, el cual también sirve hoy por hoy como un potencial trabajo como también una manera de publicidad gratuita, que se puede ver a nivel mundial. Así podrás terminar creando una página de calidad empezando desde cero.

Lo primero que tengo que decir es que este curso no explica ningún estándar específico, ni examina exhaustivamente todos los parámetros de las etiquetas HTML. Intenta ser una guía práctica, de modo que incluirá todas las cosas que yo crea importantes y que me han provocado algún quebradero de cabeza mientras realizaba mis páginas. El curso y sus ejemplos los he probado con Internet Explorer y Mozilla Firefox.

Si tu navegador es capaz de manejar más de una ventana a la vez, las páginas de ejemplo del curso se verán en otra ventana (sólo una). De este modo es posible observar a la vez el ejemplo y la explicación y se evita la proliferación excesiva de ventanas.

Tema 1: HTML

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de

marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el

contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML

se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir,

hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el

cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente

como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y

posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).



¿Qué es Adobe Dreamweaver CS5?

Es un potente editor visual profesional para la creación de sitios y páginas Web. Con Dreamweaver resulta

muy fácil crear e editar páginas completas, como agregarle de manera muy sencilla imágenes, texto,

vínculos, objetos (Flash, Java, videos, sonidos, etc), mas aun editar paginas compatibles con cualquier explorador y

plataforma.

Novedades de Dreamweaver CS5

Las novedades que podemos encontrar en esta nueva versión son varias, por lo que mostraremos desde el sitio

oficial de Adobe http://www.adobe.com/es/products/dreamweaver/whatsnew/?promoid=FDTED lo cual también lo

vamos ir aprendiendo dentro del curso que estamos empezando, solo debemos tener paciencia.

http://www.adobe.com/es/products/dreamweaver/whatsnew/?promoid=FDTED



Como empezar con Dreamweaver CS5

Lo primero que puedes hacer será acceder al producto comprándolo, como también puedes bajar un trial de la

misma página de Adobe http://www.adobe.com/es/products/dreamweaver el cual no solo encontrar este

producto, sino diferentes productos que son también importantes y necesarias para crear una potente e interesante

pagina Web.

http://www.adobe.com/es/products/dreamweaver



Una vez adquirido el producto, podemos empezar a abrir Dreamweaver, podemos acceder mediante el menú

ejecutar (Win+R).

Haciendo clic en el botón Aceptar, nos mostrara la siguiente ventana

El siguiente paso es crear un sitio Web.

Conceptos previos

1.- ¿Qué es un hosting?

En castellano hospedaje. Se refiere a un servicio que es brindado por un servidor dedicado a hospedar páginas WEB

(webhosting), gestionado por empresas especializadas. Alquiler virtual de un espacio para publicar una página Web.

Este servicio en Internet puede o no, ser gratuito.



2.- ¿Qué es un servidor Web?

Un servidor web es un programa que se ejecuta continuamente en un computador, manteniéndose a la espera de

peticiones de ejecución que le hará un cliente o un usuario de Internet. El servidor web se encarga de contestar a

estas peticiones de forma adecuada, entregando como resultado una página web o información de todo tipo de

acuerdo a los comandos solicitados.

En Internet, un servidor es un ordenador remoto que provee los datos solicitados por parte de los navegadores de otras computadoras.

En redes locales se entiende como el software que configura un PC como servidor para facilitar el acceso a la red y sus recursos.

Los Servidores almacenan información en forma de páginas web y a través del protocolo HTTP lo entregan a petición de los clientes (navegadores web) en formato HTML.

3.- ¿Qué es un dominio?

Un dominio o nombre de dominio es el nombre que identifica un sitio web. Cada dominio tiene que ser único en

Internet. Por ejemplo, "www.aldosalinas.com" es el nombre de dominio de la página web de aldosalinas. Un solo

servidor web puede servir múltiples páginas web de múltiples dominios, pero un dominio sólo puede apuntar a un

servidor.

Un dominio se compone normalmente de tres partes: en www.masadelante.com, las tres uves dobles (www), el nombre de la organización (aldosalinas) y el tipo de organización (com).

Los tipos de organización más comunes son .COM, .GOB, .EDU, y .ORG, por ejemplo indiquemos alguna de ellas

.com, esta extensión se refiere a una página Web comercial.

.gob, esta extensión se refiere a una página Web que es de un entidad gubernamental.

.edu, esta extensión se refiere a una página Web que es de una entidad educativa.

.org, esta extensión se refiere a una página Web que es de una organización (originalmente sin ánimo de lucro, aunque ahora cualquier persona puede registrar un dominio .org).

Aunque existen más extensiones pero las más comunes son .com, hay que tener presente que existen dominios así: www.aldosalinas.com.pe, este tipo de dominio representa el país, es decir la extensión .pe (Perú), aunque también seria (.br, .ar, .uk, etc).

¿Qué es un sitio Web?

Un sitio Web es aquel lugar físico donde guardamos todos nuestros archivos de manera ordenada y el cual nos

servirá como raíz, y al momento de llevarlo a un Hosting vía internet, no tendremos problemas, ya que la similitud

con el editor Dreamweaver es igual.



Pasos para crear un sitio en Dreamweaver CS5

1.- Hacer clic en el menú Sitio y eligiendo Nuevo Sitio, ver imagen

2.- Ahora vamos a elegir la primera opción Sitio y llenar los 2 campos



Nombre del sitio, este nombre nos sirve de referencia, por ello le colocaremos el siguiente nombre WebMaster, el

cual usted si desea puede escribir otro.

Carpeta del sitio local, es una carpeta que nos servirá de raíz, para poder acceder a ella hacemos clic y elegimos

una carpeta que hemos creado para que represente nuestro sitio físico, sino lo ha creado será el momento justo

para crearlo, el lugar donde lo cree no tiene en este momento la menor importancia por lo que sugiero crearlo en el

escritorio, para no hacer una búsqueda muy larga cuando queremos buscar nuestros archivos.

Ahora escogemos la última opción Configuración avanzada para elegir la carpeta de imágenes



Carpeta predetermina de imágenes, esta carpeta que se encuentra dentro de nuestra raíz, nos servirá para guardar

nuestras imágenes, sino ha sido creada, debemos crearla. Haciendo clic en buscamos la carpeta imágenes.

Vínculos relativos a, por defecto Dreamweaver tiene seleccionado el cual elijará los archivos desde la

carpeta de nuestro sitio creada anteriormente, pero también tiene otra opción el cual al seleccionarlo deberemos asegurarnos de introducir una ruta URL Web (Uniform Resource Locator)

Finalmente, hacemos clic en Aceptar, el resto de opciones, por el momento no nos serán útil, por lo que sugiero no

cambiemos nada por el momento, mas adelante aprenderemos a modificar e utilizar otras opciones. Note uno de

los paneles de Dreamweaver a cambiado

Crear una página HTML

Hacemos clic en la opción HTML



O también presionamos CTRL+N, el cual se mostrara la siguiente ventana, teniendo presente seleccionar lo que está

encerrado y hacer clic en el botón crear.

Con cualquiera de los dos métodos nos mostrara la siguiente ventana

Si en el caso no se muestre dicha ventana, significa que estas en vistas diferentes, Dreamweaver CS5 trae una

novedad con respecto a la versión CS4, estas vistas lo iremos viendo.

Barra de vistas

Barra de menus

Panel estilos CSS

Panel archivos

Panel de propiedades

Aumento de tamaño



Vistas en Dreamweaver

Vista código, nos muestra el código HTML que es necesario para crear nuestra página Web, como también podemos

agregarle código.

Vista diseño, esta vista me sirve para modificar e agregar por ejemplo color, texto, imagen, objetos, etc. con solo

simplemente haciendo un clic.

Vista dividir, esta vista es la combinación de las dos anteriores.

Vista en vivo, esta vista propia Dreamweaver CS5, nos ofrece una representación no editable más realista de la

apariencia que tendrá la página en un navegador.

Código en vivo, se asemeja a lo que se ve al mostrar el código fuente de la página desde un navegador. A diferencia

de dicho código fuente de página, que es estático y sólo ofrece el código fuente de la página desde el navegador, la

vista Código en vivo es dinámica y se actualiza conforme se interactúa con la página en la Vista en vivo.

Inspeccionar(nuevo en CS5), este modo es especialmente adecuado con lo siguiente: El panel Estilos CSS, Activar

Dividir/Vista en vivo

Podemos tener una página completa desarrollada en Dreamweaver y poder visualizarla, por ejemplo observen la

siguiente página de Yahoo.



Podemos ver ahora una vista previa pero en dividir, donde se muestra así:

Etiquetas HTML

Antes de nada hay que empezar explicándote que son las etiquetas, ya que el trabajo con HTML y otros scripts están

basados en etiquetas, hay que tener presente que hay 2 tipos de etiquetas:

Por ejemplo, algunas etiquetas de este tipo:

- <html></html>

- <body></body>

- <script></script>

- <a></a>

- <title></title>

- <p><p />

Por ejemplo, algunas etiquetas de este tipo:



- <hr />

- <br />

- <img />

- <link />

Estructura de una página HTML

Una página HTML está estructurada mediante algunas etiquetas (no necesariamente necesarias), las cuales

mostraremos a continuación.

Como podemos observar hay algunas etiquetas que aparecen por defecto cuando elegimos archivo HTML de

Dreamweaver, veamos como aparece las propiedades de una etiqueta, por lo general aparece cuando dejamos un

espacio (barra espaciadora) de manera de menú contextual



En el caso no apareciera y/o se halla cerrado el menú contextual, podemos activarlo, es decir, mostrarlo haciendo

CTRL+BARRA ESPACIADORA y simplemente elegimos el parámetro o propiedad que queramos agregarlo a dicha

etiqueta.

Como observar en un navegador mi página Web

Podemos, como habíamos mencionado anteriormente, mostrar una vista previa de nuestra página en un navegador,

para ello hacemos clic en o simplemente presionamos F12 y automáticamente se abrirá una ventana con el

navegador mostrándose una vista previa de la página.

Como editar nuestra lista de navegadores

En el medio existen muchos navegadores, por ello Dreamweaver nos da la oportunidad de elegir con qué tipo de

navegadores quieres realizar una vista previa, aunque por defecto tiene 2 de ellos elegidos desde nuestra

computadora Internet Explorer y Mozilla Firefox.



Pero si queremos agregar más navegadores podemos hacer clic en editar lista de navegadores, como también en el

menú Edición opción preferencias, elegimos un nuevo navegador a partir de la siguiente ventana.

Si deseamos agregar un nuevo navegador primero debemos haber descargado desde su sitio, por ejemplo vamos

agregar el navegador Google Chrome, para ello debemos acceder desde la ruta siguiente: www.google.com/chrome

http://www.google.com/chrome



Ahora una vez descargado hacemos clic en el signo (+) de la ventana para agregar un nuevo navegador

Hacemos clic en el botón y escogemos el acceso directo que se muestra en la figura siguiente

Y procedemos hacer clic en el botón Open, mostrándose la siguiente imagen:



Mostrándose ahora la página en el nuevo navegador



Como predeterminar que navegador debe cargarse por defecto

Bueno, como ya aprendimos a instalar varios navegadores ahora debemos tener presente cual será el navegador

principal, para eso

Como empezar a crear una página Web

Una vez ya elegida el navegador (o los navegadores) vamos a crear nuestro código para nuestra página Web.



Aunque también podemos hacerlo en la vista de diseño y trabajamos como si fuese un software de editor de texto

como Word, solo debemos digitarlo nada más

Como guardar una página Web en Dreamweaver

Para guardar una página Web, podemos ir a menú Archivo y elegir guardar, mostrándose la ventana



Automáticamente se guardo en nuestro sitio, vea la imagen que es similar a lo que hasta este momento tiene en su

computadora.

Creando nuestra página Web en Dreamweaver

Con el código generado por Dreamweaver de manera automática, vamos a agregarle más etiquetas y textos que

iremos aprendiendo para crear una página Web.

Por ejemplo le hemos agregado una etiqueta <HR /> que se utiliza para colocar una línea en nuestra página, como

también hemos escrito texto, el cual se realiza de manera normal que en cualquier navegador.



Podemos colocarle algunas propiedades a algunas etiquetas, como por ejemplo al body vamos a asignarle un color

de fondo (bgcolor).

Ahora a la línea vamos a agregarla más tamaño (size) y color (color).

Nota

Tenga presente que los códigos HTML no hacen diferencia entre mayúscula y minúscula, entonces podemos

escribirlos igual.

Tenga presente de escribir bien los códigos HTML ya que si no está bien escrito no funcionara, para el cual

podemos aprovechar nuestro editor Dreamweaver el cual genera y autocompleta las etiquetas, para poder

utilizar esta ayuda podemos pulsar CTRL+ENTER



Ahora nuestra página se verá así:

Aunque también podemos asignar algunas propiedades al documento body (cuerpo) haciendo clic en

Objeto seleccionado



Mostrándonos el siguiente cuadro

Por ejemplo si elegimos un color de fondo, obtenemos el siguiente resultado

Pero si hubiésemos elegido imagen de fondo, tenga presente que la imagen de fondo debe prepararse para su mejor

presentación además cuanto más pesada sea la imagen, entonces demorara mas en cargar, no utilice imágenes

mapa de bits, son muy pesadas.

Algo importante dicha imagen debe copiarla en su carpeta imagen que creamos al inicio (lea crear sitio).



El resultado sería el siguiente:

Podemos utilizar la etiqueta <marquee> el cual se utiliza para dar movimiento a lo que se halle entre dicha etiqueta,

veamos:



También se le puede agregar propiedades como Behavior y por ejemplo el valor de altérnate, esta ultima hace que

el objeto (en este caso el texto) rebota cada vez que llegue a los extremos.

Usando dicha vista



Fuentes (tipografía)

Definimos la tipografía como el arte o técnica de reproducir la

comunicación mediante la palabra impresa, transmitir con cierta

habilidad, elegancia y eficacia, las palabras.

La tipografía es el reflejo de una época. Por ello la evolución del diseño

de las mismas responde a proyecciones tecnológicas y artísticas. El signo

tipográfico se ha considerado como uno de los miembros más activos de

los cambios culturales del hombre.

Asignando tamaños a la fuente

Para poder asignar tamaño a un texto podemos utilizar las etiquetas <h1></h1> hasta la etiqueta <h6></h6>,

teniendo presente que la más grande es <h1> y la más pequeña es <h6>, veamos:

Como también tenemos otra etiqueta para poder trabajar fuentes, es la etiqueta <Font></Font>, por ejemplo vamos

a cambiar la etiqueta <h1> por la etiqueta <Font> añadiéndole algunas propiedades más, veamos:



Nótese que al agregar la propiedad size se obtuvo un tamaño mucho mayor que <h1>, ahora vamos a cambiar el

tipo de fuente como también asignarle color.

Dando formato al texto

Un texto podemos asignarle formato como se asigna por ejemplo al texto realizado en Word, tales como negrita,

subrayado, cursiva, etc. Para lo que es Web también pero debemos tener presente las siguientes etiquetas, por

ejemplo:

<b></b> asigna negrita al texto

<u></u> asigna subrayado al texto

<s></s> asigna tachado al texto

<i></i> asigna cursiva al texto

<strong></strong> asigna un texto con mucho énfasis.

<em></em>asigna texto con énfasis



<p /> asigna un salto de párrafo (2 líneas)

<br /> asigna un salto de una línea

Asignando tildes y caracteres especiales

Podemos inclusive copiar y pegar textos de Word en Dreamweaver, pero debemos tener presente que no todos los

navegadores permiten mostrar tildes y/o caracteres especiales escritos directamente por teclado, para evitar ello

debemos utilizar ciertos códigos.

De nuestro ejemplo anterior, tenemos ciertos errores ortográficos, lo cual vamos a remediar en estos momentos

utilizando el símbolo que se muestra en la siguiente imagen.



Notemos como está el texto ya arreglado



Podemos agregar también caracteres especiales



Si deseamos también poder agregar múltiples espacios podemos configurarlo para que se realice de manera

automática o como también podemos agregar el código que significa dejar espacios en blanco

Abrimos menú Edición/Preferencias (o simplemente CTRL+U)



Insertando documento de Word en Dreamweaver

Observando lo anterior vemos que el trabajar con texto en Dreamweaver es muy tedioso en algunos casos, por

ejemplo tildar y colocar caracteres especiales como mayor, menor, ¿, ñ, etc. En este caso Dreamweaver nos ayuda a

reconocer de manera automática los códigos y los autogenera, veamos:

Primero debemos crear un texto en Word de acuerdo a lo que necesitamos.

Ahora vamos a Dreamweaver, elegimos primero nuestro documento y si deseamos podemos asignarle propiedades

a la página.



Ahora elijamos en Dreamweaver menú Archivo>importar>Documentos de Word… se mostrara el siguiente cuadro

Nos mostrara el siguiente cuadro



Se mostrara al final así

aprendiendo html con dreamweaver

Documents