Fundamentos de Sitios Web Oct 2015 Material

Fundamentos de Sitios
Web
Facilitadora: Natasha Delgado
www.institutointernet.net
Para el nuevo profesional

Fundamentos de Sitios Web
Tabla de Contenidos
Diseño web Basado en el Usuario....................................................................................... 1
Tabla de Contenidos............................................................................................................ 2
Objetivos............................................................................................................................. 2
Introducción......................................................................................................................... 4
¿Cómo llega una página web a su computador?................................................................. 5
¿Cómo hago mi página web?............................................................................................ 12
HTML................................................................................................................................ 15
Las hojas de estilo............................................................................................................. 43
Diseño de una página web................................................................................................ 64
Del diseño al html.............................................................................................................. 85
Publicar tu página web.................................................................................................... 101
Monitorea tu sitio web...................................................................................................... 105
Instituto Internet
2
Objetivos
Al culminar este curso el asistente deberá:
• Manejar la terminología básica en el diseño de páginas web.
• Conocer cuáles son los programas en los que pueden diseñarse y programarse las
páginas web.
• Conocer las consideraciones de diseño que debe tener una página web.
• Conocer los formatos en que pueden presentarse las imágenes en internet.
• Crear los contenidos básicos para una página web en html: textos, imágenes e
hipervínculos.
• Estará en capacidad de publicar una página web básica.
Instituto Internet
3
Introducción
Internet es una red dinámica, siempre cambiante que nos ofrece a todos oportunidades de
mercado, tanto para vender un producto, posicionar una marca o informar a los visitantes
sobre nuestros servicios. Tanto si se tiene una empresa propia, o queremos ofrecer
nuestros servicios a terceros, sentarse a aprender los conocimientos básicos para realizar
una página web es una oportunidad que muy pocos nos podemos dar.
Aproveche esta valiosa oportunidad de ver todos los conocimientos básicos en un solo
fascículo. Nuestra intención, más que tratar de enseñarle todo, es mostrarle cómo
aprender, así, una vez que pueda publicar su primera página web y sienta la emoción que
es poder participar en este medio, pueda seguir actualizándose y ofrecerle a sus usuarios
la información que busca de la mejor manera posible.
Instituto Internet
4
¿Cómo llega una página web a su computador?

Comencemos por el principio. Antes de comenzar a trabajar en los principios de diseño y
programación de una página web, debemos repasar las técnologías que permiten que una
página web llegue a su computador. Comenzaremos a Introducir algunos términos
técnicos que necesitaremos más adelante.
La red de Internet
Una red de computadoras es un conjunto de equipos interconectados entre sí. La función
de la red es compartir recursos e información a distancia, asegurando la confiabilidad y
disponibilidad de Información.
Internet es una red muy poderosa que no está centralizada ni regida por ningún
organismo. Su estructura se parece a una tela de araña en la cual unas redes se
conectan con otras. Millones de personas se conectan a ella desde sus casas, sus
trabajos por medio de computadores, laptops y dispositivos móviles.
Si representaras gráficamente la Internet con puntos como cada computadora y líneas

conectado unas con otras, quedaría algo así como esto:
La estructura de Internet se parece a una tela

de araña en la cual unas redes se conectan
con otras. (Fuente: http://www.how-
towordpress.com/how-to-wordpress/what-is-
it/what-is-the-internet/)
¿Quién lleva internet a tu casa?

Para poder tener internet en su casa, oficina o móvil, necesita de un ISP, cuyas siglas en
inglés: Internet Service Provider, significan Proveedor de Servicio de Internet.
Instituto Internet
5
Un ISP lleva Internet por distintos medios: DSL, Cablemódem, GSM, Dial-up, Wifi, entre
otros. Los distintos medios permiten distintas características como velocidad de conexión,
costo, medio de acceso, etc…
Los ISP’s pueden brindar a sus usuarios otros servicios como correos electrónicos,
servicios de noticias, alojamiento de páginas web y otros.
En Venezuela, CANTV Servicios es el mayor proveedor de Servicios de Internet en

Venezuela, ofreciendo también servicios de hospedaje de páginas web, correo electrónico
y muchas otras ventajas.
También están: Inter, NetUno, SuperCable, Movilnet, Movistar, Digitel, entre otros.
Navegadores o Browsers
Para los que usamos la computadora a diario, sabemos que necesitamos de un
procesador de palabras como Word para poder redactar un documento de texto, o Excel
para hacer una tabla de datos. De manera similar, para poder visualizar una página en
internet, necesita que un Browser o Navegador interpreten el código en que está escrito
y lo presente de manera gráfica en su pantalla.
Así luce el código de

la página web de
Páginas Amarillas
CANTV que el
navegador interpreta
para mostrarlo como
lo conocemos.
Los Navegadores que más se utilizan en la actualidad son:
• Internet Explorer
• Mozilla Firefox
• Safari
• Google Chrome
Instituto Internet
6
• Opera
La distribución de cada uno de los navegadores en el mercado varía mucho según el país
y según el tipo de usuario y según el organismo que haga la investigación. Esta es una
tabla que representa un valor promedio de uso entre distintas compañías de estadísticas:
Fuente: http://gs.statcounter.com/#all-browser-ww-monthly-201506-201506-bar
Y no debemos olvidar los dispositivos móviles, en los que también vemos páginas web.
Ellos también utilizan Browsers o navegadores.
• Opera Mobile.
• Chrome Mobile.
• Safari Mobile.
• Firefox Mobile.
• Dolphin.
• Internet Explorer Mobile.
• Android Browser.
Instituto Internet
7
URL’s o direcciones web

Cada página en la Internet tiene una dirección web o URL, así como cada uno de
nosotros tiene una dirección de habitación. Esta dirección, en Inglés es llamado URL.
Una vez que una página web es creada se publica en un servidor, que es una
computadora especial que está conectada a Internet las 24 horas del día. Cada página en
Internet está guardada en un servidor en alguna parte del mundo. Hay millones de
servidores. Típicamente sólo las compañías grandes o los expertos en la materia tienen
sus propios servidores. Por lo general compañías especializadas tienen servidores que
ofrecen el servicio de hospedar las páginas de otras personas o compañías, se
denominan proveedores de Hosting.
¿Qué elementos contienen las URL’s?

Veámoslo con un ejemplo:
1. http://
Estas siglas significan Hypertext Transfer Protocol o Protocolo de transferencia de
Hipertexto en español. Más importante que el nombre es que te indica que la
dirección que estás buscando apunta a una página web. También pueden
encontrarse direcciones que comiencen por: ftp://, que indica que estás
transfiriendo archivos ó https:// que es un protocolo de transferencia segura.
2. www
Las siglas significan World Wide Web – La Red en español. Este segmento ya es
una convención y hay páginas que incluso no lo tienen.
3. lamparasLuz.com
Es el nombre de dominio. Un nombre de dominio es una dirección en internet fácil
de recordar. Los Dominios te indican a quién pertenece el sitio web. El nombre de
dominio debe comprarse, así como se compra el hospedaje en el servidor. Pueden
comprarse por uno o varios años.
Instituto Internet
8
4. Tienda/lámparas-de-mesa.html
Luego del nombre de dominio, lo que sigue es una dirección indicando donde se
encuentra el archivo que estás buscando. En el ejemplo, se encuentra dentro del
dominio, en una carpeta llamada tienda.
Los dominios
Los nombres de dominio tienen dos partes: un nombre y un sufijo. El sufijo indica la
naturaleza del mismo:
• .com tiene una connotación comercial, por ejemplo: www.deremate.com
• .ve indica que es una página venezolana (aunque no todas las páginas
venezolanas tienen el sufijo.ve) – ejemplo: www.pac.com.ve/
• .gob reservada para organizaciones del gobierno, por ejemplo www.seniat.gob.ve
• .org Típicamente representan organizaciones sin fines de lucro, por ejemplo

www.autismo.org.ve
En el punto anterior se definió un dominio como una dirección en internet fácil de recordar.
Hay direcciones de Internet que no son dominios, y que definitivamente no son fáciles de
recordar.
Por ejemplo, hay otra manera de acceder a la página www.pac.com.ve, esto es ingresar la
dirección 200.109.126.55. Inténtelo en su navegador y compruébelo:
Imagine tener que escribir esa serie de números cada vez que quiera entrar a Caveguías.
¡O cualquier combinación de números para todas las páginas que visita diariamente! Para
no tener que recordar estos números fueron inventados los nombres de dominio.
Estas direcciones numéricas (p.ej: 200.109.126.55), son llamas IP. Las siglas representan
en inglés: Internet Protocol o Protocolo de Internet. Consisten en cuatro series de
números separados por puntos.
Instituto Internet
9
Cuando hablamos de una dirección de Internet, se hace referencia tanto al nombre de

dominio (por ejemplo www.pac.com.ve) como a la dirección IP (200.109.126.55).
Servidores de Nombres de Dominio

¿Quién establece la relación entre la IP y el nombre de dominio? Es como comparar tu
nombre con tu dirección. Puedes cambiar de dirección, pero tu nombre siempre será el
mismo. De la misma manera, los servidores de Nombres de Dominio son como las
páginas blancas de Internet – asignan a los nombres de dominio los IP’s. Su página web
puede cambiar de IP si se muda de un Servidor a otro, mientras tu nombre de dominio
permanece constante.
Los proveedores de Hosting tienen cuartos especialmente diseñados con sistemas de

seguridad y aires acondiconado, que están llenos de computadoras. Estos son llamados
Data Centers. El código que conforma su página web estará hospedado en alguna de
estas computadoras. No importa dónde esté su página, lo importante es que las personas
puedan encontrarla.
Cada Host tiene computadores ó servidores de nombre de dominio que traducen los
nombres de dominio en direcciones IP. Contienen una base de datos de cada uno de los
dominios que ellos hospedan y re-trasnmiten esta información a los otros servidores.
Todos los servidores de nombre de dominio en internet constantemente están hablando
entre sí, manteniéndose al tanto de qué dominio va con cuál IP.
¿Por qué son importantes los servidores de nombre de dominio?
Si quiere crear una página web lo primero que debe hacer es reservar un espacio en un
servidor y crear un nombre de dominio. Muchas compañías de hosting le ofrecen ambos
servicios. Pero si decide, por ejemplo, crear un dominio con extensión .ve, tendrá que
registrarlo en NIC.ve, que es quien administra en Venezuela la asignación de dominios
con extensión .ve. Por otro lado tendrá que elegir a un proveedor de Hosting de su
preferencia. Luego, a través de un panel de administración que le proveerá NIC.ve, les
indicará a ellos que su nombre de dominio debe apuntar al servidor de nombres de
dominio de su compañía de hosting.
Por ejemplo, si ud. ha elegido Caracas Hosting como su proveedor de hosting, una vez
realizado el pago recibirá un correo como este:
Instituto Internet
10
Deberá indicarle a sus administradores de dominio que apunten su dominio a

dns1.caracasclick.com / dns2.caracasclick.com, que es la dirección del servidor de
nombres de dominio de CaracasHosting, como el correo lo indica. Estos servidores se
encargarán de informarle al resto de la Red de Internet dónde se encuentra tu página
web. Por lo extenso de Internet, típicamente esta información tarda 24 horas en
propagarse por toda la Red a todos los servidores de nombre de domino.
Con la ayuda de los servidores de nombres de dominio, llegará tráfico a su página web.
Ahora lo que debemos hacer es crear una página web que las personas puedan ver.
¿Cómo hago mi página web?

Esta es la pregunta que queremos responder hoy. Hasta ahora sabes los primeros pasos,
aquí te decimos el resto:
Instituto Internet
11
1. Elegir un nombre de dominio y registrarlo.
2. Contratar a un proveedor de hosting.
3. Planificar el contenido y estructura de su página web.
4. Diseñarla y programarla.
5. Ponerla al aire.
1. Elegir un nombre de dominio y registarlo

Primero deberá decidir el nombre de su sitio web. Debe ser fácil de escribir y recordar y
debe ser significativo con respecto al contenido que irá en ella.
Una vez elegido, deberá revisar la disponibilidad del mismo, porque puede que alguien ya
lo haya usado. Hay muchas maneras de hacerlo. Una de ellas es consultar en
www.NIC.ve si quiere registrar un dominio .com.ve.
Una vez en la página, haga clic en el enlace “Registro NIC.VE”
Ese enlace lo llevará a una interfaz muy amigable en donde podrá intentar con distintos
nombres hasta que consiga el que esté disponible.
Instituto Internet
12
2. Contratar a un proveedor de hosting

Hay muchos en el mercado venezolano, como VeneHosting, Servicio de Hosting y
muchísimos proveedores internacionales. Antes de hacer la reserva del dominio, consulte
si su proveedor de hosting si no brinda ambos servicios al mismo tiempo, con lo cual le
puede ahorrar pasos.
Su proveedor de hosting le ofrecerá distintos paquetes según sus necesidades. Si la

página web es sencilla, los paquetes más básicos le servirán y podrá ampliar luego su
capacidad a medida que su página vaya creciendo.
Típicamente los proveedores de hosting ofrecen las siguientes características:
• Tecnología del servidor: Windows o Linux y sus distintas versiones.
• Espacio disponible en el servidor.
• Tasa de transferencia de datos.
• Número de cuentas de correo.
• Estadísticas.
• Panel de control.
3. Planificar el contenido y estructura de su página web.

Cómo planificar el contenido y estructura de su página web es contenido para un curso
completo. Debe tenerse en cuenta siempre al usuario del sitio web, ¿qué información va a
querer encontrar en la página web? Y pensar en cómo mostrársela de la manera más
clara y en la menor cantidad de pasos posibles.
Durante esta fase se recopila toda la información que se quiere colocar en la página web
y se organiza en las secciones que llevará la página.
Instituto Internet
13
4. Diseñarla y programarla.
En los siguientes capítulos veremos los factores a tomar en cuenta a la hora de diseñar
una página y los conceptos básicos de programación html para hacer una página web
sencilla.
5. Ponerla al aire.
Una vez la programación esté lista, la página web debe “publicarse”, es decir, copiarse en
el servidor donde estará disponible para el público.
HTML
Html es el nombre del código en que están escritas las páginas web. Las letras HTML
vienen de las siglas en inglés Hypertext Markup Language.
Por medio del HTML podemos decirle a un Navegador cómo mostrar el contenido de una
página, bien sea escrita, una imagen, un video, etc. El navegador interpreta el código
HTML y lo muestra con las instrucciones que éste indica.
¿Quiere ver cómo luce el HTML?
Ingrese en cualquier página web, haga clic en el botón derecho del mouse sobre la página
y seleccione “Ver código fuente”, del menú que aparece. Asegúrese de estar posicionado
en un espacio en blanco cuando haga clic al botón derecho.
Instituto Internet
14
Aparecerá una ventana con información de texto. Esto es el código HTML de la página:
Por ahora no hay que preocuparse por entender qué significan todos los códigos. Lo
importante es comenzar a familiarizarse con la terminología. Esto es un código HTML.
Su primer HTML
La manera más fácil de aprender HTML es haciendo nuestra propia página web.
Comencemos con un ejemplo sencillo: en un editor de texto como Word Pad, copie el
siguiente código:
<html>
<body>
<h1>Mi primer encabezado</h1>
<p>Mi primer texto.</p>
</body>
</html>
Quedaría así:
Instituto Internet
15
Haga click en “Archivo” y luego

“Guardar Como…”
Y en la casilla de opciones,
seleccione el sitio en su computadora
donde desee guardarlo, y escriba
como nombre:
primeraprueba.html
Y luego seleccione guardar
Cierre la ventana del block de notas. Busque la ubicación donde guardó su archivo nuevo
de html y ábralo. Automáticamente su computadora detectará que es un html y lo abrirá
con el navegador que tenga por defecto. Si no es así, haga clic en el botón derecho sobre
el archivo, vaya a la opción “abrir con” y seleccione Internet Explorer. Verá algo como
esto:
Instituto Internet
16
¡Felicidades! Ya hizo su primer HTML.
Notará que además de las dos frases que escribimos, hay etiquetas que parecen
repetirse en pares: “html”, “body”,”h1”,”p”. Esto es de lo que se trata el HTML, a través de
estas etiquetas le dice al navegador qué es cada tipo de texto y cómo debe mostrarlos.
Por ejemplo, H1 indica que es un encabezado. Los encabezados se muestran en una
fuente más grande y en negritas.
Hay muchas etiquetas que describen cada elemento en una página: tablas, listas
numeradas, listas no numeradas, imágenes.
Volvamos a mirar por un momento el código fuente de una página interna de una página
cualquiera:
Verá que puede comenzar a identificar las etiquetas html, aunque no comprenda su
significado, puede ver que van alrededor del texto indicando al navegador que debe
presentarlo en un formato particular.
Instituto Internet
17
Editores HTML
Si Ud. quisiera pudiera hacer todo una página escribiendo el código a mano. Pero, al igual
que para escribir un documento de texto utilizas Microsoft Word o el programa Writer de
Open Office, hay numerosos programas en el mercado que nos permiten crear y trabajar
con HTML.
Estos son algunos de los programas en los que se trabaja HTML:
• Kompozer
• Dreamweaver.
• Netbeans.
• Sublime Text.
En este curso trabajaremos con el software Kompozer. Revise los anexos al final del
documento para instrucciones para su instalación.
Como usar un editor HTML

Hagamos algo más elaborado para nuestra segunda página web. Imaginemos que somos
una empresa que vende lámparas. Ya reservamos nuestro dominio, ¿recuerda?
Lamparasluz.com.ve. Ahora necesitamos hacer la página web para subirla al servidor.
Haremos tres páginas. Una primera página, llamada página de inicio, o Home, una
segunda página donde mostraremos una galería de productos y una tercera página de
contacto.
Para comenzar, abriremos Komposer, o el editor de código html de nuestra preferencia.
Esta es la ventana que encontraremos:
Instituto Internet
18
Similar a un programa de edición de texto, en la parte superior tenems nuestros botones

de acciones: “Archivo, Edición, Ver, Documento… etc…”
Nos conseguimos luego con una barra de íconos que nos permite crear un nuevo
documento, abrir uno existente, guardarlo. Además funciones de edición de html que
veremos más adelante: publicar, insertar un elace, una imagen, etc…
Y luego nos encontramos con dos barras que nos permiten editar un texto, muy similar a
un programa de edición como Word: Negritas, cursivas, listas, aumentar sangrías…
Bajando en la ventana, la barra vertical de la izquierda muestra los directorios de nuestra

computadora en un Administrador de Sitios y el espacio en blanco a la derecha será
nuestro espacio de trabajo.
Instituto Internet
19
Crear un nuevo Sitio

Antes de comenzar con cualquier proyecto web debemos indicarle
al editor dónde estarán guardados todos nuestros archivos.
Típicamente en un sitio web hay una estructura básica de
archivos: en una carpeta se guardan todos los html’s, en otras
carpetas en un nivel inferior se guardan imágenes, animaciones,
códigos y estilos.
En la ventana de la izquierda del Kompozer llamada “Administrador de Sitios” ubique el
botón de “Editar Sitios” , al presionarlo aparecerá una ventana de exploración. Cree

una carpeta en un directorio de su elección llamada “html”. Allí guardaremos todos
nuestros archivos.
Instituto Internet
20
Seleccione la nueva carpeta creada llamada html y haga clic en “Aceptar”
Aparecerá una ventana, en la que volveremos luego con más detalle, pero por ahora sólo
escribiremos el Nombre del Sitio “Lamparas Luz”, que nos servirá para identificar nuestro
proyecto y haremos clic a “Nuevo Sitio”
Veremos que en nuestra ventana del

Administrador de sitios tenemos ahora el nombre
de nuestro sitio, de ahora en adelante, los
archivos que creemos se encontrán aquí.
Nuestro segundo html

Para nuestro segundo html haremos el home de nuestra empresa ficticia. Vayamos al
espacio de trabajo y Redactaremos el texto que irá en nuestro home page, o página de
inicio.
Instituto Internet
21
Llevará el título de la compañía: Lámparas Luz, un texto introductorio que explica qué
hacemos, un enlace a la galería de imágenes y nuestros contactos.
Una vez escrito todo en el área de trabajo, queda así:
Guardemos nuestro trabajo y veamos como quedó. Haga clic en Archivo > Guardar
Instituto Internet
22
Nos aparecerá una caja de texto solicitando el título de la página:
Vamos a colocar un título que sea llamativo y que indique en pocas palabras qué es lo
que hacemos.
Luego de ello, nos pedirá que le indiquemos dónde guardar la página y bajo qué nombre:
Seleccionemos el nombre llamativo que acabamos de crear y cambiémoslo por

index.html, luego veremos por qué. Cree una carpeta para trabajar en su proyecto, donde
guardará todos sus archivos y haga clic en Guardar.
Instituto Internet
23
Hagamos el mismo proceso que con nuestro primer archivo Html. Vayamos a la ubicación
en la que lo guardamos y abramos el archivo.
Tenemos nuestro segundo html!
El título y el nombre de una página

Este punto es propicio para definir un par de conceptos que acabamos de manejar.
Cuando guardamos nuestra página web, dimos a nuestro archivo html un nombre. Esto
es lo que llamamos el nombre de una página.
Instituto Internet
24
A la primera página de nuestro sitio, o home debemos darle un nombre por defecto:
index.html o default.html. De esta manera cuando publiquemos nuestro sitio al aire el
servidor lo reconocerá como el home y no tendremos que escribirlo en la dirección, en
lugar de escribir: www.lamparasluz.com/index.html, podemos dejarlo sólo en:
www.lamparasluz.com
Ahora, al resto de las páginas de nuestro sitio web, sí debemos darle un nombre más
específico. Dijimos que nuestro sitio tendría una galería de productos y una planilla de
contacto. Los nombres de estas páginas serían, por ejemplo:
• galeria-de-lamparas.html
• contacte-lamparas-luz.html
El nombre de la página web es el nombre de un archivo, por lo tanto debe respetar las
siguientes características:
• No colocar espacios en blanco.
• No colocar acentos
• Debe ser breve, en lo posible.
• Se recomienda usar guiones para separar las palabras.
• De ser posible coloque palabras que describan el contenido de la página (palabras

claves) y no sólo nombres genéricos. Por ejemplo, contacte-a-lamparas-luz.html
en lugar de contactenos.html
Cuando guardamos nuestra página en Kompozer, nos pidió otra cosa: el título de la
página. Esto es una descripción corta que se mostrará en la pestaña de nuestro
navegador. Este es además un indicador importantísimo para que los motores de
búsqueda sepan de qué trata cada una de las páginas de nuestro sitio web. No deje todas
las páginas con el mismo nombre, por ejemplo: Lamparas Luz, coloque a cada una su
nombre según el contenido.
• Para galeria-de-lamparas.html: “Lámparas de Noche, decorativas, clásicas y

modernas”
Instituto Internet
25
• Para: contacte-lamparas-luz.html: “Venta de lámparas en Barquisimeto –

Lamparas Luz”
El nombre de la página es el nombre del html. El título es lo que aparece como

descripción en la parte superior de la ventana.
Estilos de texto
Démosle un poco de contraste al texto que tenemos para que tenga mejor lectura.
Definiremos estilos para los textos.
Vuelva al Kompozer y seleccione la primera línea: Lámparas Luz. Ese será el título de
nuestra página. Arriba a la izquierda hay un menú desplegable llamado “Texto del cuerpo”.
Le indicaremos que es tipo “Título 1” (vea la figura siguiente como referencia)
Instituto Internet
26
Al hacer la selección, el título cambiará de tamaño:
Ahora haga clic en cualquier parte del primer párrafo, y de manera similar seleccione el
menú desplegable “Texto del Cuerpo” e indíquele que es un párrafo.
Instituto Internet
27
Haga clic en cada uno de los párrafos y repita el procedimiento anterior, el texto ahora
lucirá así:
Ahora agreguemos un poco más de formato: coloque el mouse al final de la segunda línea
y presione SHIFT+Enter. La línea bajará sin generar un párrafo adicional. Seleccionamos
esas dos primeras frases y presione el ícono (Gran Énfasis). Ahora seleccione la
Instituto Internet
28
última frase de ese párrafo y haga clic en el ícono (Enfasis). El texto debería lucir
ahora así:
Recuerde guardar el archivo y haga clic en Archivo > Previsualizar en Navegador.
Hemos repasado los estilos más básicos de formatos de textos en HTML: mostrar un
párrafo, un titular, negritas e itálica. Veamos cómo se ven en el código html. Cierre la
ventana del navegador y vuelva a la ventana del Komposer.
Instituto Internet
29
Debajo de su cuadro de texto verá tres pestañas: Diseño, Dividir y Código Fuente.
Haga clic en “Dividir”.
La ventana se separará en dos: en la parte de arriba tendrá la vista del navegador y en la

ventana inferior la vista html del elemento que tenga seleccionado.
Haga clic en cada uno de los elementos que creamos y podrá ir identificando cada una de
las etiquetas:
• <h1> Denota un título. Esta etiqueta tiene varios niveles: <h2> <h3> <h4>… de
manera que pueda organizarse un texto por secciones. Por defecto se muestra
con una fuenta mayor, en negritas y genera un espacio inferior y superior.
• <p> Denota un párrafo. Por defecto se despliega un espacio arriba y abajo del
mismo.
• <br> Indica un salto de línea sin que sea un nuevo párrafo
• <strong> Es un tipo de énfasis que por defecto es negritas
• <em> Es un tipo de énfasis que por defecto es itálica.
Instituto Internet
30
Listas
Otro tipo de formato que es importante reconocer debido a su amplio uso son las listas.
Típicamente nos encontraremos con listas no numeradas, pero se pueden definir también
las numeradas.
En nuestro ejemplo, vuelva al Kompozer y vamos a colocar los productos en forma de

lista. Deténgase luego de la palabra “incluyen”, después de “nuestros productos incluyen”,
y presione “enter” para generar otro párrafo. El cursor titilará antes de la palabra
“Lampara”. Haga clic en el ícono “lista de viñetas” . Verá como aparece una viñeta
delante de la palabra “Lampara”. Presione “Enter” al final de cada frase y haga los
cambios que requiera para que su texto luzca así:
Cuando quiera dejar de escribir viñetas simplemente desactive el botón:
Se aplica lo mismo para las listas numeradas.
Si presiona la etiqueta y selecciona todo el juego de viñetas, verá que

aparecen dos etiquetas: <ul> y <li>
Instituto Internet
31
• <ul> Significa “Unordered List” e indica que comienza una lista no numerada.
• <li> Significa “List Item” e indica cada uno de los items en la lista.
Tablas
Las tablas son otro elemento de estilo muy importante en HTML. Como veremos más
adelante son lo que nos permitirán darle un diseño adicional a la página web.
Insertemos una en nuestro documento, con los distintos enlaces que tendremos en el
sitio: Home, Galería de Productos y Contáctenos.
Volvamos a nuestro Komposer y haga clic nuevamente en la vista de diseño.
Genere un espacio adicional entre el título de la página y el primer párrafo, colocándose

en el título y presionando “Enter”. En este nuevo espacio insertaremos una tabla. Haga
clic en el menú superior: Insertar > Tabla. Y en el menú que aparece seleccione una fila y
tres columnas.
Instituto Internet
32
Aparecerá la tabla en su página:
Allí escribiremos cada una de las opciones: Home, Galería de Productos y Contacto.
Instituto Internet
33
Notará que a medida que escribe, las celdas cambian de tamaño para ajustarse al texto.
Párese en la celda Home, haga clic con el botón derecho y aparecerá un menú
desplegable. Seleccione “Propiedades de Celda de tabla”. En el cuadro de diálogo que
aparece, coloque 33% en el ancho de la celda:
Haga lo mismo para la celda contígua. Ahora tenemos tres columnas de un mismo ancho.
Instituto Internet
34
Si presiona la etiqueta y selecciona toda la tabla, verá que aparecen varias

etiquetas que describen una tabla.
Para seleccionar la tabla en este punto le invito a hacer clic dentro de una celda
cualquiera de la tabla y mirar la parte inferior de la ventana del programa:
Verá que se despliegan varias etiquetas. Ellas están anidadas de derecha a izquierda
(más profundidad a menos profundidad) siendo el nivel superior el html. Haga clic en
<table> y la tabla quedará seleccionada.
Instituto Internet
35
• <table> Indica que comienza una tabla
• <tbody> Denota el cuerpo de la tabla, también existe un encabezado de tabla

(<th> Table Header)
• <tr> significa “table row” e indica que comienza una fila.
• <td> significa “table data” e indica que comienza una celda.
Notará que aparece un código llamado “Style”. Las últimas tendencias en codificación
HTML intentan mantener los más separado posible la data (Textos, títulos, e imágenes) de
la manera en que lucen. La información sobre cómo lucen las cosas en una página, debe,
en lo posible, definirse con estilos. Por ahora dejaremos así este punto y lo retomaremos
en breve.
Instituto Internet
36
Los enlaces
Aprovechemos que hemos creado el menú para colocar los enlaces.
En el Kompozer volvamos a la vista de diseño, y seleccionemos la palabra “Galería de
Productos”. Con la palabra seleccionada, haga click en el botón o vaya al menú

Insertar > Enlace. Nos aparecerá una ventana en la que escribiremos la dirección de la
página a la que apuntará ese enlace: galeria-de-lamparas.html
Si presiona la etiqueta y selecciona la palabra con el enlace, verá la etiqueta

que describe un enlace: <a>.
Esta etiqueta tiene una propiedad adicional. Luego de abrir: <a – indica el enlace: href=”
galeria-de-lamparas.html”.
Instituto Internet
37
Las imágenes
Finalmente insertaremos una imagen. Para ello
debemos crear en nuestro sitio una carpeta
llamada “images”. Y allí colocaremos la imagen de
una lampara. Haga esto desde el explorador de
windows. Una vez hecho esto su administrador de
sitios debe lucir así:
Puede que tenga que hacer clic en el botón
refrescar para ver los archivos que ha creado.
Para insertar una imagen haga clic en el botón “Imagen” . Allí le aparecerá una
ventana donde le pedirá buscar la ubicación del archivo. Adicional a eso se le recomienda
colocar un texto alternativo a la imagen, para el caso de que esta no se cargue.
Instituto Internet
38
Haremos clic en la pestaña de “Apariencia” y seleccionaremos la opción: Fluir por la

izquierda en la parte de Alinear el texto con la imagen:
Si presiona la etiqueta y selecciona la imagen, verá que aparece la etiqueta

que describe a una imagen:
Instituto Internet
39
• <img> Indica que se mostrará una imagen. Adicional a la etiqueta resaltaremos

tres parámetros:
• “Alt” indica el texto alternativo que debe mostrarse para el caso de que no pueda
verde la imagen.
• “scr” indica la dirección en la que debe mostrarse la imagen
• “align” indica en qué dirección se alineará la imagen.
Las etiquetas html

Ya hemos visto las principales etiquetas html que dan formato a una página:
• <h1> Denota un título.
• <p> Denota un párrafo.
• <br> Indica un salto de línea sin que sea un nuevo párrafo
• <strong> Es un tipo de énfasis que por defecto es negritas
• <em> Es un tipo de énfasis que por defecto es itálica.
• <ul> Significa “Unordered List” e indica que comienza una lista no numerada.
• <li> Significa “List Item” e indica cada uno de los items en la lista.
• <table> Indica que comienza una tabla
• <tr> significa “table row” e indica que comienza una fila.
• <td> significa “table data” e indica que comieza una celda.
• <a> indica que hay un enlace
• <img> Indica que se mostrará una imagen.
Te invito a volver a hacer el ejercicio de ver el código html de cualquier página que se
presenta al inicio del capítulo y reconocer estas etiquetas y su función.
Instituto Internet
40
Las hojas de estilo

Dejamos nuestro html con una imagen recién colocada. Guardemos nuestro trabajo y
previsualizamos con F5.
Si bien ya tenemos un html bastante más avanzado que nuestra primera pieza de tres
líneas, a nivel de diseño deja mucho que desear. Iremos avanzando un poco más esta
vez.
¿Qué pasa si quiero cambiar el tipo de fuente? ¿O si decido que no me gustan los títulos
en negro? Qué pasa si quiero colocar la información de contacto en otro tamaño?
Todos estos interrogantes se refieren a aspectos de Estilo y no de contenido. Por ello es

que se requiere definir estilos para llevarlos a cabo.
Hay tres maneras de definir un estilo:
1. Insertarlo dentro de la etiqueta
Instituto Internet
41
2. Colocarlo al principio del código html
3. Colocarlo en un archivo aparte llamado “Hoja de estilos”
Estilos dentro de las etiquetas

Ya nos topamos con esta definición de estilos cuando creamos nuestra primera tabla.
Veamos el código que nos habíamos encontrado:
<table style="text-align: left; width: 100%;" …
Con la palabra “style” seguido de el signo = le indicamos al navegador que estamos

comenzando una definición de estilos. A partir de aquí, cada instrucción está seguida
de ; .
En nuestro ejemplo de la tabla vemos dos instrucciones:
• Text-align:left
• Width: 100%
La primera le está diciendo que el texto que esté en la tabla debe alinearse a la izquierda
y el segundo que la tabla debe tener un ancho de 100%.
Este estilo fue creado automáticamente al momento de generar nuestra tabla, pero
nosotros podemos crear los estilos que necesitemos para mejorar la imagen de nuestro
sitio web. Al igual que las etiquetas html, hay ciertos estilos que vale la pena mencionar en
un comienzo porque se usan frecuentemente.
Style Color
Digamos que queremos cambiarle el color al título de la página.
Volvamos a nuestro Kompozer y en el área de trabajo seleccionemos el texto del título

“Lámparas Luz”. Con este texto seleccionado, hagamos clic en el ícono de color que
queda en la cuarta barra horizontal: . Ponga atención en hacer clic al cuadro que
está más arriba. Este indica el color de la fuente, el cuadro inferior indica el color de fondo
del elemento.
Elegimos el color que más nos agrade en la paleta que se nos presenta y hacemos clic en
aceptar.
Instituto Internet
42
Nuestro título ha cambiado de color:
Si observamos el código fuente veremos que nuestro título ahora presenta el siguiente
código:
<h1 style="color: rgb(153, 51, 153);">Lámparas Luz</h1>
Instituto Internet
43
• Color indica el color de la fuente. Se puede indicar de varias maneras. La que se

presenta en el ejemplo es colocar el modo en que se describe el color seguido de
su código RGB.
• Otra manera de presentarlo es por su denotación hexadecimal así:

style=”color: #993399;”
Style Font-Family
Cambiemos la fuente del título. Con el título seleccionado, ubique el menú desplegable a
la izquierda en el cuarto menú horizontal que dice “Anchura Variable” y allí seleccione la
fuente que quiera:
El menú le desplegará todas las fuentes disponibles en su computadora, pero se

recomienda elegir fuentes “Seguras” para web. Es decir, son fuentes que la mayoría de
las personas tiene en su computador. Entre las fuentes seguras se encuentran:
Instituto Internet
44
Luego de elegir la fuente el cambio se verá reflejado en su página:
Del código fuente podemos ver que:
• Font-family es la instrucción de estilos que define el tipo de fuente a mostrar.
Estilos al principio del código html

Aunque podemos colocar los estilos directamente en cada una de las etiquetas, se hace
engorroso si tenemos una página con mucha información y debemos repetir esta acción
para cada <p> o <table> o cualquier otra etiqueta que podamos tener.
Podemos definir un estilo particular para cada etiqueta de nuestro html: body, p, table, a,
img. Son llamadas reglas de estilo.
Digamos que no nos gusta la fuente Times New Roman, que es la fuente en la que se
muestran por defecto los textos en nuestro sitio web. Queremos que sea Verdana, y que
Instituto Internet
45
los títulos sean en Georgia. Aprovechemos además para cambiar la paleta de colores a
algo más suave.
Hagamos CTR + Z para deshacer el último cambio que hicimos en el último ejemplo
(cambiar de fuente el título).
Y hacemos clic en el ícono del Editor CSS que aparece en el segundo menú horizontal:
Nos aparecerá la siguiente pantalla:
Dejaremos esa primera opción que está seleccionada como nueva regla de estilo y
seleccionaremos <body> para definir un estilo para todo el cuerpo del html. Haremos clic
en “Crear Regla de estilo” para continuar.
Aparecerá la siguiente ventana:
Instituto Internet
46
En el espacio en blanco se podrá escribir directamente en la hoja de estilos con la

nomenclatura que ya hemos aprendido, por ejemplo:
font-family: Arial;
Si lo hace verá inmediatamente como los cambios afectan la página que tenemos detrás.
Pero no tenemos que aprender a programar todo en un solo día. Cuando tenga más
práctica irá conociendo de memoria los parámetros de los estilos que más usa, por ahora
podemos aprovechar las pestañas que tiene la parte superior de esa ventana para
generar de una manera más amigable una nueva regla de estilo.
Borre el texto que escribió y en su lugar haga clic en la pestaña “Texto”, para definir estilos
de texto.
Instituto Internet
47
Seleccione la segunda opción en el tipo de letra: “Predefinido”. Allí verá que tiene tres
opciones:
• Arial, Helvética, san serif.
• Times New Roman, Times, serif.
• Courier New, Courier, monospace.
Verá que cada juego tiene tres opciones. Eso le indica al navegador que si no encuentra
un tipo de fuente, use otra. Por ejemplo, Si no encuentra Times New Roman, use la fuente
“Times”, que es otra opción que puede existir, y si no encuentra tampoco esa, utilice
cualquier fuente de la familia de fuentes “Serif”.
Puede usar estas opciones o puede usar otros juegos. En internet encontramos algunos
recomendados que escribirá bajo la opción “Usar tipo de letra personalizado”, por ejemplo
estos tomados de la página: http://font-family.com/
• font-family: Georgia, Times, Times New Roman, serif;
• font-family: Verdana, Tahoma, Geneva, sans-serif;
• font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
Deje la opción Arial como predefinido y colocaremos un par de reglas más:
Coloque tamaño de letra 14px, y seleccione el color gris que está más cercano al negro:
Instituto Internet
48
Observe como los cambios que va haciendo afectan su página.
Hagal clic en “Aceptar”. Guarde su página y previsualícela con f5 para ver los cambios
que realizó.
Volvamos a Kompozer y coloque la vista de código fuente. Vaya al principio de la página

y observe que se ha creado un nuevo bloque de código:
<style type="text/css">
body {
font-size: 14px;
color: #333333;
font-family: Arial,Helvetica,sans-serif;
}
</style>
Esa es la manera en que se colocan reglas de estilo al principio de un documento. Verá

que la presentación es un poco distinta a como la veníamos viendo:
Primero se escribe el nombre del elemento al que se asignará el estilo. En este caso
body. Luego, entre corchetes se colocan cada una de las reglas de estilo, separadas por ;
. Veremos los estilos que ya conocemos y uno nuevo:
• font-size indica el tamaño de la fuente.
Instituto Internet
49
Style Font-size
Hay distintas maneras de indicar al navegador qué tamaño de fuente utilizar con la regla
de estilos font-size, según la unidad en que se mida:
• % - Indica el valor en %. 100% corresponde al tamaño de la fuente actual. Si

nuestro navegador muestra el texto por defecto en 12pt, por ejemplo, 50%
correspondería a 6pt.
• in – Indica el valor en pulgadas (inches)
• cm – indica el valor en centímetros (cm)
• mm – indica el valor en milímetros (mm)
• em – 1em representa el tamaño actual de la fuente. 2em significa 2 veces el

tamaño de la fuente actual. Si un elemento se despliega con una fuente de 12pt,
entonces 2em son 24pt. Se usa mucho en las hojas de estilo porque se adapta
fácilmente a la fuente que tenga el usuario.
• ex- un ex es la altura de la letra x de una fuente. Típicamente es la mitad del

tamaño de la fuente.
• pt - 1 pt es equivalente a 1/72 pulgada.
• pc – Indica picas, una pica son 12 puntos
• px - indica un punto en la pantalla de la computadora.
Los valores más usados para la fuente son px y em, ya que son valores que se adaptan a
la resolución de cada persona. Debido a la naturaleza proporcional de los em son muy
populares a la hora de hacer interfaces adaptables a distintos medios como los móviles.
Style background
Vuelva a la vista de diseño de Kompozer. Abra nuevamente la ventana de editor de estilos
. La ventana habrá cambiado:
Instituto Internet
50
Para agregar otra regla de estilo al que ya tenemos, seleccione el estilo “body” en la
ventana izquierda.
Encontraremos el código correspondiente a los estilos que ya tenemos. Haga clic en la

pestaña de Fondo
Coloque el color de su preferencia en donde dice “color”, bien sea con el selector, como
escribiendo directamente el hexadecimal, por ejemplo: #efe7c4
Instituto Internet
51
Si observa su página al fondo, verá que ya tiene un color de fondo.
Presione aceptar y vayamos al modo de código para que veamos cómo es el estilo que
define los fondos:
• background-color: #efe7c4;
Las hojas de estilos

Hasta ahora hemos visto dos maneras de colocar reglas de estilo a una página web:
directamente en la etiqueta precedido de la palabra “Style=” o definiéndolo en el
encabezado de la página.
Instituto Internet
52
Típicamente nuestro sitio no tiene una sola página. De igual manera que se hacía
engorroso crear un estilo para cada etiqueta, por lo que definimos un solo estilo al
principio de un documento, se hace engorroso repetir un mismo encabezado en todas las
páginas de un sitio web, que pueden llegar a ser miles.
No sólo a la hora de crearlo, sino a la hora de mantenerlo. Si queremos cambiar une

estilo, digamos cambiar el tamaño de los títulos, ¡tendríamos que cambiarlo en todas las
páginas!.
Para compartir un grupo de reglas de estilo usadas en un sitio web, se crearon las hojas
de estilos. Es un archivo en que recopilamos todas las hojas de estilo de un sitio web.
Crear una hoja de estilos
Creemos una hoja de estilos para nuestro documento. Volvamos a la vista de diseño y
abramos nuevamente la ventana de edición de estilos, presionando el botón: . (En la

vista de código el botón de edición CSS no está activo).
Esta ventana nos da automáticamente la opción de exportar a una hoja de estilos el estilo
que ya creamos. Haga clic en el botón “Exportar hoja de estilos y cambiar a la versión
exportada”
Instituto Internet
53
Se abrirá una ventana del explorador de Windows. Cree una carpeta llamada css en
nuestro directorio principal. Y haga doble clic sobre ella.
Instituto Internet
54
Asegúrese de estar en el directorio CSS, coloque en el campo de nombre el nombre de la

hoja de estilos que crearemos: estilo.css y presione “guardar”
Instituto Internet
55
Fíjese que ahora a la izquierda tenemos la dirección de donde creamos nuestra hoja de
estilos. Y tiene dos estilos ya existentes: body y h1, que habíamos creado dentro de
nuestro documento.
Al hacer clic en aceptar toda nuestra página debería lucir como estaba:
Pero note que a la izquierda ahora en nuestro administrador de sitios se muestra la

carpeta que creamos con la hoja de estilos nueva.
Si cambiamos a la vista de código fuente, veremos cómo cambió el encabezado del sitio:
En lugar de nuestros estilos hay una instrucción que indica dónde se encuentra la hoja de
estilos que creamos.
Instituto Internet
56
Estilos más usados

Ya sabemos cómo cambiar de tamaño una fuente con Font-size. Sabemos como
cambiarle el color con color y sabemos como cambiar la familia de fuentes con Font-
family.
Otras reglas de estilo que nos permiten modificar las fuentes son:
Reglas para fuentes y textos
• text-align: define la alineación horizontal de un texto. Puede ser centrada, a la

izquierda o a la derecha: center, left y right respectivamente. Ej: text-
align:center;
• text-decoration: se usa para agregar o quitar decoraciones de un texto. La

propiedad es comúnmente utilizada para quitar el subrayado de los enlaces.
Además pueden hacerse: colocar una línea por encima de un texto con overline,
trazar una línea sobre un texto line-through y subrayar un texto con underline. Ej:
text-decoration:line-through
• text-transformation: se usa para transformar los textos en mayúsculas o

minúsculas. Las opciones de esta regla son: uppercase, para convertir todo en
mayúsculas, lowercase, para convertir todo en minúsculas y capitalize, para poner
la primera letra de la palabra en mayúscula. Ej: text-
transform:capitalize
• Font-style: es más comúnmente utilizada para establecer la fuente como itálica.

Las opciones para esta regla son: normal, italic y oblique. Ej: font-
style:italic;
• Font-weight: es más comúnmente utilizada para colocar la fuente en negritas.

Típicamente se usan las opciones normal y bold, aunque tiene otras entradas.
Ej: font-weight:bold;
Instituto Internet
57
Reglas para fondos
Hay toda una serie de reglas de estilo relacionadas con los fondos. Hasta ahora
conocemos background-color, para establecer un color de fondo, estas son otras más
usadas:
• background-image: se usa para establecer una imagen de fondo. Por defecto la

imagen se repite hasta cubrir todo el elemento. Se establece de la siguiente
manera: background-image:url('paper.gif');
• background-repeat: por defecto una imagen de fondo se repite en todas las

direcciones hasta cubrir el elemento. Esta regla se usa para indicarle si no se
quiere repetir (none), si se quiere repetir en sentido horizontal (repeat-x) o repetir
en sentido vertical (repeat-y). Ejemplo: background-repeat:repeat-x;
• background-position: indica la alineación en la que se mostrará el fondo: top,

bottom, left y right (arriba, abajo, izquierda y derecha respectivamente). Ejemplo:
background-position:right top;
Versión corta de una regla de estilos
Cuando tenemos una misma familia de estilos, por ejemplo:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Podemos usar una versión más corta de la instrucción.
body {background:#ffffff url('img_tree.png') no-repeat right

top;}
Instituto Internet
58
Consiga todos los estilos
En la siguiente página: http://www.w3schools.com/css/ podrá conseguir todas las

definiciones de reglas de estilo que existen y su compatibilidad con los navegadores.
Aplicar las hojas de estilo

Las hojas de estilo no solo pueden aplicarse a las etiquetas existentes. Que es el ejemplo
que hemos manejado hasta ahora.
¿Qué pasa si no queremos cambiar todos los párrafos, sino sólo un párrafo en particular?
Por ejemplo, para nuestro ejemplo, nos gustaría que sólo el párrafo de los teléfonos fuera
de otro color.
En este caso debemos crear una clase.
Crearemos una clase llamada info. Las clases se recomienda nombrarlas por su función y
no por su apariencia, es típico que cambie la apariencia de una clase y no su función. Por
ejemplo. Si en lugar de info dijéramos que la clase se llamará azul, si decidimos cambiar
el color para los teléfonos tendríamos que cambiar toda la clase, con nombre y todo, en
lugar de cambiar sólo el estilo.
Vayamos a nuestro programa Kompozer donde está abierto la página de ejemplo.
Estando en la vista de diseño, hagamos clic al botón de los estilos .
Allí, en el primer botón de la izquierda, le indicaremos que queremos crear una nueva
regla.
En la ventana que nos aparecerá, seleccionaremos la segunda opción: “Estilo aplicado a

todos los elementos de una clase”. Y en el espacio del nombre esta vez creamos uno
nuevo: info. Presionamos “Crear regla de estilo”
Instituto Internet
59
Aparecerá el área de trabajo para editar los estilos. Pueden usar las ventanas o escribir el
estilo directamente. Escribiremos directamente color: #ee6e36; para definir un
color de fuente.
Haga clic a aceptar para agregar el estilo.
Una vez creada la clase debemos indicar en el código a quién queremos asignársela.
Seleccione el párrafo que indica los teléfonos. Para ello haga clic en la etiqueta <p> que
se encuentra abajo a la izquierda. Seleccione la clase “Info” en el menú desplegable que
se encuentra en el tercer menú horizontal, al lado de la selección de estilos de párrafo:
Instituto Internet
60
Una vez asignado, verá como el texto cambió de color.
Si selecciona la vista “Dividir” verá cómo se asigna desde el html una clase a una
etiqueta:
<p class="info">Para pedidos puede llamarnos por los

teléfonos: (0251) 2376455 / Tel : (0251) 2370998 / Tel :
(0251) 2376732 / Lara-Barquisimeto. </p>
Simplemente se coloca “class=” al inicio de la etiqueta seguido del nombre de la clase que
creamos.
Instituto Internet
61
Con estas herramientas: el lenguaje html y los estilos podemos darle un diseño a nuestra
página web. Pero nuestra página actual no tiene un diseño muy atractivo.. ¿Cómo
llegamos desde lo que tenemos hasta las hermosas páginas que nos conseguimos por
allí?
Diseño de una página web

El truco para diseñar una buena página web es dejar de lado el código html por un
momento y sólo pensar en la manera más adecuada de mostrar la información que
tenemos. Trabajaremos en dos fases, primero estructuraremos la información usando un
wireframe y luego diseñaremos usando un programa de edición gráfica.
Wireframe
Es una técnica que nos permite hacer un bosquejo de la información que llevará una
página sin involucrar al diseño. En el wireframe definimos zonas de texto, elementos de
los menús, botones de acción, campos de un formulario. Nos permitirá navegar la página
Instituto Internet
62
web de manera virtual y revisar si el sitio web es fácil de usar y si no nos falta ninguna
página o paso en alguna transacción.
Aquí hay algunos ejemplos de wireframe de diversas páginas:
Instituto Internet
63
Hay muchas herramientas que nos permiten hacer un wireframe:
Instituto Internet
64
• Lápiz y papel
• Power Point o sus equivalentes.
• Herramientas on-line existen muchas, por ejemplo: http://gomockingbird.com/
Para nuestra tienda de Lámparas, antes de diseñar, haremos un wireframe de cada una
de las páginas que vamos a elaborar:
Sabiendo qué información llevará la página y cómo estará distribuida, procederemos a

diseñar.
Instituto Internet
65
Programas para diseñar

Hay muchos programas en el mercado en los que se puede diseñar una página web,
entre los más usados se encuentran: Adobe Photoshop, Adobe Fireworks, Adobe
Illustrator, Gimp. Este último será el que estaremos usando ya que es un software libre.
Consulte el anexo para instalar Gimp en su computadora.
Consideraciones de diseño
Las personas que comienzan a diseñar páginas web deben tener en cuenta:
• Manejo del color: Se trabaja en modo RGB, que es el modo de presentación de

color en pantalla (Red, Green, Blue por sus siglas en inglés), en lugar de trabajar
con CMYK.
• Resolución: Se trabaja a 72 dpi. Es la resolución mínima que se necesita para

que una imagen no pierda nitidez y conservar los archivos livianos.
• Tamaño de la pieza: Se trabaja pensando en la resolución del monitor.

Tipicamente ya trabajamos con máximo 1024 x 768, para garantizar que la página
se vaya a ver perfecta en todas las resoluciones de monitor. Si trabajamos un algo
más grande, en algunas computadoras puede que perdamos información al primer
pantallazo y tengamos que hacer un scroll horizontal. Cuando estamos
comenzando lo mejor es iniciar con un pantallazo de nuestro monitor para
acostumbrarnos a las proporciones nuevas.
• Fuentes: Utilizar fuentes adecuadas para web, salvo casos de títulos o imágenes
que deben aparecer poco.
• Equilibrio de diseño e información: no queremos terminar con una página que

sean sólo imágenes, pues los buscadores no van a poder interpretar que tiene
nuestro sitio. Ademas tardará más en cargar, incomodando a nuestros usuarios.
Hay que encontrar un equilibrio entre el diseño y la información que será
presentada como texto.
Conociendo la interfaz de un programa de diseño

Cuando abrimos Gimp por primera vez nos encontramos con lo siguiente:
Instituto Internet
66
En la parte superior tenemos nuestros menú tradicional, con todas las funciones de la
herramienta:
A la izquierda, en una barra movible, tenemos nuestra caja de herramientas. Desde allí
podremos hacer selecciones, crear degradados, crear un texto, realizar una
transformación, etc. Note que cada vez que hace clic en cada botón de la caja, cambian
las opciones para cada herramienta en la parte inferior.
A la derecha se encuentra otra barra movible. Esta barra contiene dos partes: en la
superior se muestran cuatro pestañas: las capas desplegadas, los canales, rutas o
vectores y el historial para deshacer acciones. En la parte inferior hay un menú de
pinceles, degradados y patrones.
Para familiarizarnos con el programa, comencemos a realizar el diseño de nuestro sitio

web.
En las consideraciones hablamos de comenzar haciendo un printscreen de nuestro

navegador para que nuestro diseño tenga las proporciones correctas. Hagamos eso.
Abra el navegador en alguna página que tenga un ancho tradicional como El Universal –
es un periódico por tanto se tiene que adaptar a las resoluciones de la mayoría de los
usuarios. Si su monitor tiene una resolución mayor a 1024, ajuste el tamaño de la ventana
Instituto Internet
67
para que haya muy poco espacio blanco a la derecha y a la izquierda de la página y haga
Alt+ImpPt para hacer una impresión en pantalla de la ventana.
Abra el programa GIMP.
Presione May+Ctr+V para crear un nuevo documento desde el portapapeles. También

puede hacer clic en Archivo > Crear > Desde el portapapeles.
Tendremos un nuevo documento la imagen que copiamos al portapapeles:
Típicamente cuando creamos un documento en un editor gráfico nos da unas

dimensiones pre-definidas para web.
Por ejemplo, en Gimp si creamos un nuevo documento veremos estas plantillas:
Instituto Internet
68
Podemos muy bien usar un documento de 1024x768, pero como vemos en nuestra
imagen que acabamos de pegar en el nuevo documento, no todo este espacio es utilizado
en desplegar información. Mucho se va en menús y barras de herramientas. Así que, para
asegurarnos de que nuestra página se despliegue de un solo pantallazo o que sólo
aparezca un scroll vertical por lo menos, trabajaremos con este espacio que generaremos
a continuación.
Seleccione la herramienta de recorte en la caja de herramientas:
Haremos clic en la parte superior izquierda de la página web y arrastrando el mouse hasta
la esquina inferior derecha seleccionaremos la zona que contiene el diseño.
Instituto Internet
69
Al presionar Enter el documento se recortará al tamaño seleccionado.
Vamos a ir guardando nuestro documento. Haga clic en Archivo > Guardar
Instituto Internet
70
Elija un nombre y una ubicación para su documento y presione “Guardar”. Los

documentos en GIMP se guardan con la extensión .xcf
Al volver a nuestro documento ahora borraremos la imagen

del universal. Sólo lo necesitábamos como referencia para
saber en qué tamaño íbamos a trabajar. Vaya a la caja que
se presenta a la derecha donde se muestran las capas.
Automáticamente estará seleccionada la capa que tiene la
información de la página del universal, porque es la única
que hay. Haga clic en el ícono de la papelera abajo a al
derecha para borrarla:
Instituto Internet
71
Nuestro canvas será ahora transparente, porque no tenemos ninguna información. Haga
clic en el ícono opuesto a la papelera: la hoja en blanco para crear una nueva capa. Este
cuadro de diálogo aparecerá:
Colocaremos un nombre a la capa “Fondo” y le indicaremos que tenga fondo blanco. Por
defecto nos está generando una capa con nuestro nuevo tamaño luego de recortar la
pieza: 915x529. Puede tomar este dato como referencia para sus próximas páginas, en
lugar de usar el 1024x760 por defecto que no nos da tamaños reales.
Ahora ya tenemos una superficie blanca con la que trabajar:
Usando como base el Wireframe, comenzaremos a colocar los elementos de nuestra

página.
Instituto Internet
72
Para el título, haremos un logo con fuentes para mantener sencillo el ejemplo. Haga clic
en la barra de herramientas en el ícono de la herramienta de texto: para insertar los

textos. En la parte inferior de la barra de herramientas aparecerán las opciones para darle
formato. Con estas opciones y la herramienta Mover iremos posicionando todos los
textos de la página. Terminaremos con algo así:
Puede agregar color y elementos gráficos con las herramientas de relleno ,
herramienta de mezcla y pinceles . También le invito a exporar los filtros para darle
efecto a textos, botones e imágenes.
Luego de un poco de diseño, la página queda así:
Instituto Internet
73
Este mismo proceso tenemos que repetirlo para las páginas internas.
Instituto Internet
74
Planificando la maqueta
Llamaremos maquetar al proceso de pasar del diseño al html. No es un término
comúnmente utilizado pues esto varía según cada empresa o diseñador.
Una vez que tenemos nuestro diseño, debemos estudiarlo para ver cómo lo llevamos a
lenguaje html. El recurso que hemos usado hasta ahora los diseñadores para transformar
nuestras creaciones en etiquetas html es diagramar en base a tablas. Hay una nueva
tendencia de diagramar en base a hojas de estilo, sin embargo esta manera de diagramar
está todavía vigente y es muy útil para terminar de fijar nuestros conocimientos de html.
La mejor manera de visualizar cómo nuestro diseño se verá en una tabla es hacer un
bosquejo en papel de nuestro plan de acción. Esto nos ahorrará mucho tiempo a futuro. El
bosquejo de la maqueta de nuestra página se verá más o menos así:
Instituto Internet
75
Para poder hacer este esquema con medidas se usaron dos herramientas de GIMP: las
guías y la herramienta de medidas . Las guías se obtienen al acercar el mouse a la

regla y luego arrastrarlo hasta el área de trabajo.
Instituto Internet
76
La ventaja de tomar las medidas exactas de las tablas es ahorrar tiempo a la hora de
volver al editor html.
Un consejo a la hora de planificar una tabla: siempre verifique que la medida total de las
celdas sume el ancho de la tabla que vamos a colocar. A veces es más fácil dejar una
celda sin medir y a esta celda asignarle el resto de la medida total menos las otras celdas.
Durante este proceso no dude en hacer algún pequeño ajuste al diseño si eso implica
simplificar la maqueta: correr el logo un par de pixels hacia abajo para que no coincidan
con la tabla del menú, por ejemplo.
Preparar las imágenes

Uno de las recomendaciones dadas al inicio del capítulo fue mantener un balance entre la
información y la imagen. Lo que implica que deberíamos tratar de usar la menor cantidad
de imágenes posibles y describir lo más que podamos con html y texto.
Esto nos lleva a tener que seleccionar solo ciertas áreas como imágenes y no
simplemente copiar y pegar todo como una gran foto en el html.
Por ejemplo, en nuestra pagina utilizaremos:
• Un par de imágenes como fondo: uno para la página y otro para el menú.
• Picaremos una pequeña imagen para lograr la esquina del menú.
• La imagen del logo
• La imagen de la lámpara con el botón de invitación a la Galería.
Para poder usarlas en el código debemos “picarlas”. Es decir, exportarlas del GIMP a un
formato y un tamaño adecuados.
¿Qué formatos de imagen utilizar?

En el código html podemos insertar los siguientes formatos: jpg, gif y png.
Todos estos son formatos de imágenes comprimidos y como cada una tiene técnicas de
compresión distintas, nos dan características distintas.
Gif y PNG son muy adecuados a la hora de exportar logos o imágenes que tengan
colores planos y bordes definidos. También se usan mucho para exportar fondos
(backgrounds).
Instituto Internet
77
Logo en GIF Logo en JPG (observe como se

distorsiona la imagen)
Los jpg’s son ideales a la hora de exportar fotografías:
Fotografía en gif: observe cómo La fotografías se ven mejor

se ven líneas de colores en el rostro. si se guardan en jpg.
Tomando esto en cuenta, exportemos las mencionadas imágenes desde nuestro archivo
de GIMP.
Abra el archivo que contiene el diseño ya listo.
Una las capas de los elementos que deben exportarse juntos. Como el nombre del sitio y
su brillo abajo. O el fondo de la página y el degradé de arriba. Para ello, seleccione la
capa más superficial y en la ventana de herramientas de capa seleccione la opción
“combinar hacia abajo”.
Seleccione la capa del fondo. Con la herramienta de selección de rectángulos haga un

rectángulo fino y alargado en la esquina superior izquierda del diseño. Debe llegar hasta
donde el color se vuelve uniforme.
Instituto Internet
78
Presione Ctrl+C para copiar. (Asegúrese de estar en la capa del fondo).
Presione ahora Ctrl+May+V para pegar lo que copiamos en un nuevo documento a la

medida.
Como es un fondo lo guardaremos como un gif para asegurarnos de tener un degradé

limpio. Presione guardar y en la ventana de diálogo y crearemos otro juego de archivos
limpio para este nuevo diseño. En ello incluya una carpeta “images” y selecciónela. En el
cuadro de nombre coloque fondo.gif
Instituto Internet
79
Cuando haga clic en guardar, aparecerá una ventana de precaución, indicando que se
convertirá la imagen a modo indexado en lugar de RGB para poder exportar a gif. Haga
clic en Exportar.
Aparecerá otro cuadro de opciones que dejaremos por defecto y haremos clic en guardar.
Instituto Internet
80
Si vamos al explorador de windows podremos verificar que nuestra primera imagen de

fondo está lista.
Ahora generemos la segunda imagen de fondo, correspondiente al menú.
Seleccionaremos la capa que tiene el degradado del menú y haremos el mismo proceso
de seleccionar una porción alargada y fina:
Como anteriormente copiamos con Ctrl+C y pegamos en un nuevo documento con

Ctrl+may+V. Guardamos el fondo en gif de la misma manera que hicimos anteriormente.
Nombraremos esta pieza fondo-menu.gif.
Instituto Internet
81
Ahora seleccionamos la capa que contiene el título de la página. Observe que no picamos
la imagen a todo lo largo de las guías. Vamos a picar la imagen al tamaño exacto que la
necesitemos.
Cuando hagamos con Ctrl+C y pegamos en un nuevo documento con Ctrl+may+V

tendremos algo como esto:
Se ve extraño porque nos importó solamente la capa con información y nos dejó el fondo
transparente. Esto es valioso porque no tendremos que ser tan precisos a la hora de
colocar este título en un fondo degradado como el que tenemos. Para conservar este nivel
de detalle y transparencia debemos guardarlo como PNG.
Al colocar lamparasluz.png en el cuadro de nombre, luego de hacer clic en guardar abre

el cuadro de diálogo correspondiente a PNG. Seleccione las opciones que aparecen en la
imagen y haga clic en guardar.
Instituto Internet
82
Con el mismo proceso guardaremos la imagen que aparece a la derecha. Esta podemos
guardarla tanto en jpg como en png. Puede guardar las dos versiones y comparar sus
pesos y calidad. En el ejercicio lo guardaremos como png para no tener que unir la
imagen al fondo. A esta imagen la llamaremos galeria-de-productos.png.
Así mismo guardaremos la sección curva del menú. La llamaremos esquina-menu.png.
Con nuestras imágenes ya picadas, podemos comenzar a codificar en HTML ó maquetar.
Como ejercicio, prepare las imágenes de la sección de “Galería”. La sección de Pedidos

no requerirá de imágenes.
Del diseño al html

Ya diseñamos nuestra página y preparamos las imágenes que vamos a necesitar. Ahora
debemos pasar esto a html.
Abramos nuevamente nuestro programa Kompozer. Y creemos un nuevo sitio web.

Indíquele al programa el mismo directorio en donde creó la carpeta “images” con las
imágenes picadas.
Luego de crear el sitio, su pantalla debería lucir así:
Instituto Internet
83
En el espacio de trabajo que tenemos comenzaremos a seguir el plan que esbozamos.

Primero definiremos el fondo de la página con un color y una imagen. Lo haremos
definiendo una regla de estilos para <body>, al igual que lo hicimos en el capítulo sobre
html.
Haga clic en el ícono para crear nuevas reglas de estilo. Le pedirá que guarde la página y
le coloque un nombre. Igual que en nuestro primer ejercicio, colocaremos como título:
“Lamparas artesanales Luz” y llamaremos la página index.html.
Llegaremos finalmente a nuestra conocida ventana para generar una nueva regla de
estilos:
Instituto Internet
84
Y al igual que nuestros primeros ejercicios, crearemos un estilo para el body.
Al presionar “Crear regla de estilo”. Aparecerá nuestro espacio en blanco para definir la
regla:
Allí definiremos el fondo: color # e5dea3 y la imagen fondo.gif que exportamos. Esta se
repetirá solo en sentido horizontal:
Instituto Internet
85
Al hacer clic en aceptar, veremos que ya tenemos nuestro fondo.
Ahora, esto mismo lo queremos aplicar a todas las páginas que creemos, así que vamos
de una vez a exportar esta regla en una hoja de estilos.
Haga clic nuevamente en la herramienta de edición de estilos:
Y haga click en “Exportar hoja de estilos y cambiar a la versión exportada”
Instituto Internet
86
Allí cree en el explorador la carpeta en donde guardaremos nuestra hoja de estilo:
Y haremos clic en guardar.
Una vez en la ventana de administración de estilos hacemos clic en aceptar y volveremos

a nuestra interfaz de edición. Refresque el administrador de sitios para confirmar que se
haya creado la hoja de estilo.
Instituto Internet
87
Insertaremos ahora nuestro menú. Será una tabla que se expandirá al 100%, con seis
columnas y una fila.
No use la opción rápida para crear la tabla, seleccione la etiqueta “Preciso” :
Y luego seleccione la etiqueta Celda:
Una vez definidas todas las características, presione Aceptar:
Instituto Internet
88
Su tabla lucirá así:
Los bordes punteados rojos nos indican que en la vista del explorador no serán visibles.
Haga doble clic en cada una de las celdas y vaya estableciendo el ancho de cada una,
dejando la ultima vacía. Esta celda se estirará para cumplir con el 100% del ancho. Los
anchos son: 340px, 81px, 79px, 203px y 105px.
En la columna de 81 px insertaremos la imagen de la esquina que cortamos.
En cada una de las siguientes celdas queremos colocar el fondo de los menús. Para esto
debemos crear una regla, que se aplicará solo a las celdas correspondientes al menú.
Para eso abrimos nuestra herramienta de edición de estilos y creamos la regla “menu”.
Instituto Internet
89
Una vez creado el estilo, ingrese a cada una de las celdas que siguen a la celda de la
esquina y repita esta operación: seleccione la etiqueta <td> en la esquina inferior
izquierda del programa y vaya al menú desplegable de las clases y seleccione la clase
que acabamos de crear: menu
Una vez que haya hecho esto para todas las celdas restantes, guarde su archivo y
previsualice su página con F5. Ya tenemos el fondo del menú listo!
Solo tenemos que eliminar un espacio vertical que se nos muestra sobre el menú. Ese es
un margen por defecto que viene en las páginas, se lo quitamos agregando el estilo
“margin:0; padding:0” al body.
Instituto Internet
90
Ahora insertemos texto dentro del menú:
Vemos que nuestro texto no luce como queremos.
Primero volveremos al estilo del body y le indicaremos que utilice Arial por defecto en
todos los textos del sitio web. En un color cercano al negro: #999999 y a 14px:
Instituto Internet
91
Aprovecharemos también la clase que hemos creado para el menú, para indicarle que
deje un margen interno superior de 10px (padding) , que centre el texto y que lo coloque
en color blanco y que lo ponga a 17px.
Ahora debemos ponerle un enlace a los botones del menú. Mientras no sepamos cómo
vamos a llamar a las otras páginas que crearemos podemos usar el valor #.
Instituto Internet
92
Y quedará así:
En este punto debemos cambiarle el estilo a los enlaces que aparecen dentro del menú.
Como ya tenemos una clase que define cómo lucen las celdas del menú, veremos como
asignar un estilo a un elemento específico de una clase.
Instituto Internet
93
Cree una nueva regla de estilos y colocaremos las siguientes opciones:
De esta manera estamos dandole formato a todo <a> que esté dentro del estilo menú.
Le damos este formato:
Y nos queda nuestro menú como deseamos:
Instituto Internet
94
Agregaremos una clase más: .menu a:hover
Esto le indicará al navegador qué hacer cuando pasemos el mouse por sobre el enlace.
Le daremos un efecto de cambiar de color y mostrar el subrayado.
Ahora vamos a colocar el título. Simplemente insertamos la imagen después de la tabla.
Y ahora insertaremos una tabla para colocar el contenido. Nuevamente haremos una
tabla transparente, de dos columnas de 991 px de ancho. La primera columna tendrá
447px y la segunda 464px.
Instituto Internet
95
Nuevamente usaremos el modo preciso para colocar los datos adecuados:
Le especificaremos los anchos de las celdas, y así quedará nuestra tabla:
Ahora insertaremos el contenido en ambas celdas y le daremos formato básico.
Instituto Internet
96
Y ahora crearemos una regla de estilo para el contenido del home en la celda izquierda.
Lo llamaremos home-contenido.
Y al igual que hicimos con el menú, se lo asignamos a la celda.
Guardamos y previsualizamos nuestro diseño:
Instituto Internet
97
¡Ahora sí tenemos una página mucho mejor diseñada!
Sólo falta escribir la información del pie y estamos listos!
Escribimos la información el pie y le asignamos un estilo a <p> llamado .pie al que le

damos un espacio a la izquierda de 40px. Además de eso agregamos un enlace para el
correo electrónico. La herramienta de inserción de enlaces tiene una opción especial para
ello:
¡Y con esto tenemos listo el home de nuestra página web!
Instituto Internet
98
Es importante confirmar que se vea bien en todos los navegadores y hacer cualquier
ajuste que pueda surgir, típicamente con los estilos.
Les invito a hacer como ejercicio la maqueta de la galería de productos, para poder
colocar los enlaces en el home y navegar un poco por nuestro sitio web.
Publicar tu página web

¡Finalmente tenemos nuestro sitio web listo para hacer sus primeras pruebas al aire! Para
poder publicar un sitio web debemos haber cumplido con los pasos que describimos en el
primer capítulo de este tutorial: haber reservado un nombre de dominio y solicitado los
servicios de una compañía de hospedaje.
Estos pasos previos deben haberte dado los siguientes datos, que tu proveedor de
hospedaje te da:
• FTP ó en su defecto la dirección ip
• Login y Clave de tu cuenta
Instituto Internet
99
Con esto podemos configurar tu sitio. Generalmente los programas de edición de html
traen incorporados manejadores de FTP. Sin embargo es mejor utilizar uno que se
dedique exclusivamente a eso. Por ejemplo el software FileZilla (http://filezilla-
project.org/).
Instituto Internet
100
Nótese que este programa tiene tres lineas de comandos en su parte superior. La tercera
fila tiene las palabras “Servidor, Nombre de Usuario, Contraseña”. Allí incluirá la
información que le dio su proveedor de hosting.
Ejemplo:
Servidor: ftp.lamparasluz.com
Nombre de usuario: lamparasluz
Contraseña: 4o3a8378
El campo de puerto no tiene que llenarlo. Luego haga clic en “Conexión Rápida”
Instituto Internet
101
Aparecerá información en las dos ventanas centrales. A la izquierda estará la información

del sitio local y a la derecha la del sitio remoto. En el sitio remoto debe seleccionar la
carpeta public_html ó www. A la izquierda debe buscar el directorio que contiene la
información que acaba de crear.
Seleccione los archivos en el sitio local, haga clic al botón derecho y haga clic en subir.
¡Ya publicó su sitio web! Puede probarlo en internet
Instituto Internet
102
Monitorea tu sitio web

Una de las cosas más valiosas de internet es que pueden medirse muchas cosas con él.
Puedes saber cuántas personas te visitan a través de un servicio de estadísticas, por
ejemplo.
Preparando nuestra página para los buscadores

Ante de suscribirnos a algún servicio de estadísticas debemos dejar nuestra página
preparada para buscadores. Muchas de las tareas ya la hemos hecho, pero aquí las
vamos a puntualizar:
• Colocar palabras claves en los nombres de las páginas.

(en lugar de llamar a la página de productos, productos.html, llamarla lámparas-
artesanales.html, por ejemplo)
• Definir todos los títulos de las páginas de manera individual.
• Colocar descripción en cada una de las páginas.
• Darle nombres adecuados a las imágenes: por ejemplo, en lugar de llamar a

nuestro logo: logo.png usamos lamparasluz.png.
• Darle etiquetas alternativas a las imágenes.
En nuestra página hemos cumplido la mayoría de los pasos. Repasemos algunos puntos
importantes:
El título de la página:
En el código fuente luce así:
Instituto Internet
103
Si se quiere editar el título de la página, iremos a la opción en el menú principal Formato >
Títulos y propiedades de la página:
Y allí llene los campos de título y descripción:
Instituto Internet
104
Insertando código de Google Analytics

Crear una cuenta de google analytics es muy fácil le permitirá tener unas estadísticas
claras y amigables de su página web. Este es un ejemplo del tipo de estadísticas que
puede generar:
Sólo debe registrase en la página de google analytics: www.google.com/analytics y seguir

las instrucciones para registrar un sitio web.
Una vez esté registrado su sitio web le dará un código, similar a este:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-398458-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
Le darán instrucciones para colocarlo al final de su página web, justo antes del cierre de
la etiqueta </body>.
Instituto Internet
105
Esto lo puede hacer en el Kompozer, en la visa de código. Recuerde colocar este código
en cada una de las páginas web de su sitio:
Con esto cubrimos los pasos básicos para diseñar y publicar su página web. Espero que
le sea útil y provechosa para ud. y los proyectos que se proponga.
Instituto Internet
106

Fundamentos de Sitios Web Oct 2015 Material

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Fundamentos de Sitios Web Oct 2015 Material

Caricato da

Copyright:

Formati disponibili

Fundamentos de Sitios

Para el nuevo profesional

Diseño web Basado en el Usuario....................................................................................... 1

¿Cómo llega una página web a su computador?................................................................. 5

¿Cómo hago mi página web?............................................................................................ 12

Las hojas de estilo............................................................................................................. 43

Diseño de una página web................................................................................................ 64

Del diseño al html.............................................................................................................. 85

Publicar tu página web.................................................................................................... 101

Monitorea tu sitio web...................................................................................................... 105

• Manejar la terminología básica en el diseño de páginas web.

• Conocer los formatos en que pueden presentarse las imágenes en internet.

• Estará en capacidad de publicar una página web básica.

¿Cómo llega una página web a su computador?

Si representaras gráficamente la Internet con puntos como cada computadora y líneas

La estructura de Internet se parece a una tela

¿Quién lleva internet a tu casa?

En Venezuela, CANTV Servicios es el mayor proveedor de Servicios de Internet en

Así luce el código de

Los Navegadores que más se utilizan en la actualidad son:

• Internet Explorer Mobile.

URL’s o direcciones web

¿Qué elementos contienen las URL’s?

• .com tiene una connotación comercial, por ejemplo: www.deremate.com

• .gob reservada para organizaciones del gobierno, por ejemplo www.seniat.gob.ve

• .org Típicamente representan organizaciones sin fines de lucro, por ejemplo

Cuando hablamos de una dirección de Internet, se hace referencia tanto al nombre de

Servidores de Nombres de Dominio

Los proveedores de Hosting tienen cuartos especialmente diseñados con sistemas de

¿Por qué son importantes los servidores de nombre de dominio?

Deberá indicarle a sus administradores de dominio que apunten su dominio a

¿Cómo hago mi página web?

1. Elegir un nombre de dominio y registrarlo.

2. Contratar a un proveedor de hosting.

3. Planificar el contenido y estructura de su página web.

1. Elegir un nombre de dominio y registarlo

Una vez en la página, haga clic en el enlace “Registro NIC.VE”

2. Contratar a un proveedor de hosting

Su proveedor de hosting le ofrecerá distintos paquetes según sus necesidades. Si la

Típicamente los proveedores de hosting ofrecen las siguientes características:

• Tecnología del servidor: Windows o Linux y sus distintas versiones.

• Espacio disponible en el servidor.

• Tasa de transferencia de datos.

• Número de cuentas de correo.

3. Planificar el contenido y estructura de su página web.

¿Quiere ver cómo luce el HTML?

Haga click en “Archivo” y luego

Y luego seleccione guardar

¡Felicidades! Ya hizo su primer HTML.

Estos son algunos de los programas en los que se trabaja HTML:

Como usar un editor HTML

Para comenzar, abriremos Komposer, o el editor de código html de nuestra preferencia.

Esta es la ventana que encontraremos:

Similar a un programa de edición de texto, en la parte superior tenems nuestros botones

Bajando en la ventana, la barra vertical de la izquierda muestra los directorios de nuestra

Crear un nuevo Sitio

En la ventana de la izquierda del Kompozer llamada “Administrador de Sitios” ubique el

botón de “Editar Sitios” , al presionarlo aparecerá una ventana de exploración. Cree

Seleccione la nueva carpeta creada llamada html y haga clic en “Aceptar”

Veremos que en nuestra ventana del

Nuestro segundo html

Una vez escrito todo en el área de trabajo, queda así:

Nos aparecerá una caja de texto solicitando el título de la página:

Seleccionemos el nombre llamativo que acabamos de crear y cambiémoslo por