[FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 1

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 2

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 3

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 4

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 5

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 6

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 7

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 8

 [FUNDAMENTOS DE PROGRAMACION WEB] 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

Barra de menus

Barra de vistas
Panel estilos CSS

Panel de propiedades
Panel archivos

Aumento de tamaño

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 9

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 10

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 11

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 12

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 13

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 14

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 15

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 16

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 17

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 18

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 19

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 20

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Ahora nuestra página se verá así:

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

Objeto seleccionado

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 21

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 22

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 23

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Usando dicha vista

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 24

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 25

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 26

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 27

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Notemos como está el texto ya arreglado

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 28

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Podemos agregar también caracteres especiales

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 29

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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 &nbsp;

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

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 30

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 31

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

Nos mostrara el siguiente cuadro

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 32

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Se mostrara al final así

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 33