Introducción al diseño de páginas web, iniciando por los conceptos básicos y posteriormente al reconocimiento de la estructura HTML de una página web. Finalmente, se presenta el uso de las hojas de estilo en cascada (CSS).

1. INSTITUTO TECNICO SUPERIOR INDUSTRIAL
AREA: Tecnología e Informática – Grado 11
TEMA: Diseño Web - terminología básica,
Introducción
El objetivo de este semestre es aprender a crear páginas web, partiendo desde cero y usando herramientas gratuitas; pero antes
que nada, es preciso aclarar la terminología asociada con el diseño Web, la cual será presentada en la presente guía.
1. Servidores y direcciones URL
Cuando visitamos sitios web en realidad estamos accediendo
a archivos en un servidor web.
Un sitio web está alojado en una computadora conocida
como servidor web, también llamada servidor HTTP, y estos
términos también pueden referirse al software que se
ejecuta en esta computadora y que recupera y entrega las
páginas de un sitio web en respuesta a peticiones del
usuario.
Para acceder a un sitio web, se requiere conocer su URL
(secuencia de caracteres, de acuerdo a un formato estándar,
que se usa para nombrar recursos en Internet para su
localización o identificación).
La dirección o URL tiene este formato:
http://www.nombredominio.com/directorio/pagina
web.htm
Donde http:// es el protocolo y www. indica el sistema de
páginas web; nombredominio.com es el nombre del sitio.
Al ir directamente ahí, vamos a su página de inicio. La última
parte indica el archivo del sitio que estamos viendo. En este
caso, una página llamada paginaweb.htm que está en una
carpeta llamada directorio.
2. PÁGINA WEB
Una página web es un documento de texto con marcas,
llamadas etiquetas. Cuando este documento se ve a través
de un navegador web, las etiquetas se interpretan y se
visualiza el documento como una página web. Las etiquetas
no se muestran pero determinan el aspecto de la página, y
otras características, por ejemplo, si el texto es un enlace, en
la etiqueta se indica la página a la que nos lleva el enlace.
3. SITIO WEB
Un sitio web es un sitio (localización) en la World Wide Web
que contiene documentos (páginas web) organizados
jerárquicamente. Cada documento (página web) contiene
texto y o gráficos que aparecen como información digital en
la pantalla de un ordenador. Un sitio puede contener una
combinación de gráficos, texto, audio, vídeo, y otros
materiales dinámicos o estáticos.
Los sitios web están escritos en HTML (Hyper Text Markup
Language), o dinámicamente convertidos a éste y se acceden
usando un software llamado navegador web, también
conocido como un cliente HTTP. Los sitios web pueden ser
visualizados o accedidos desde un abanico de dispositivos
con disponibilidad de Internet como computadoras
personales, computadores portátiles, PDAs y teléfonos
móviles.
4. NOMBRE DE DOMINIO
Un dominio de Internet es una red de identificación asociada
a un grupo de dispositivos o equipos conectados a la red
internet. El propósito principal de los nombres de dominio
en internet y del sistema de nombres de dominio (DNS), es
traducir las direcciones IP de cada modo activo en la red, a
términos memorizables y fáciles de encontrar.
El siguiente ejemplo ilustra la diferencia entre una URL
(Uniform Resource Locator) y un nombre de dominio:
URL: http://www.example.net/index.html
Nombre de dominio: www.example.net
5. SERVIDOR WEB
Un servidor web es un programa que sirve para atender y
responder a las diferentes peticiones de los navegadores,

2. proporcionando los recursos (textos con enlaces, figuras,
formularios, botones y otros objetos) que soliciten, usando el
protocolo HTTP o el protocolo HTTPS (la versión cifrada y
autenticada).
Un servidor web básico cuenta con un esquema de
funcionamiento muy simple, basado en ejecutar
infinitamente el siguiente bucle:
1. Espera peticiones en el puerto TCP indicado (el
estándar por defecto para HTTP es el 80).
2. Recibe una petición.
3. Busca el recurso.
4. Envía el recurso utilizando la misma conexión por la
que recibió petición.
5. Vuelve al segundo punto.
Apache es un ejemplo de un servidor web.
6. HTML
Es el lenguaje predominante para la construcció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 (<,>).
7. EDITOR WEB
Es una aplicación diseñada con el fin de facilitar la creación
de documentos HTML o XHTML. Hay dos amplias categorías
de programas editores usados para este propósito que son:
Editores de texto como Notepad, donde el HTML se
manipula directamente en el programa editor o Editores
WYSIWYG (“What You See Is What You Get”, "lo que ves es
lo que obtienes"). como por ejemplo KompoZer y Adobe
Dreamweaver, donde el sitio se edita usando una interfaz
GUI y el HTML subyacente se genera automáticamente con
el programa editor.
¿CUÁNTO HE APRENDIDO?
Responda las siguientes preguntas en su cuaderno:
1. ¿Es lo mismo un sitio web que una página web? Explique
2. ¿Un servidor web es un componente hardware o
software? Explique
3. ¿Se puede emplear Microsoft Word como editor web?
Explique.
CONSULTA
Responde en tu cuaderno:
1. ¿Cuál es la estructura HTML de una página web?
2. ¿Qué significa cada una de estas partes?

3. INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL
AREA: Tecnología e Informática – Grado 11
TEMA: HTML básico
LA ETIQUETA BODY
Todo lo que queramos que se vea en nuestra página web deberemos escribirlo dentro de la etiqueta <body>. Eso es
lo que llamamos el "cuerpo" del documento. Es la parte visible. Esta etiqueta también podemos personalizarla para
darle el aspecto que nosotros deseemos, a través de una serie de parámetros que a continuación se listan:
Color de fondo: bgcolor
Define el color de fondo que queramos que tenga nuestra página. Por ejemplo: Si queremos que nuestra página
quede con un fondo rojo deberemos escribir: <body bgcolor="#FF0000"></body>
En html, los colores de definen mediante el sistema RGB (Red, Green, Blue), con valores hexadecimales, siguiendo el
formato #F7F0E2, con valores para cada color entre el 00 (mínimo) y FF (máximo).
Imagen de fondo: background
Permite definir una imagen de fondo en lugar de un color. Por ejemplo: <body background="URL">
</body>
"URL" indica la dirección de la imagen que queramos que sea nuestro fondo. Si la imagen no es suficientemente
grande para rellenar toda la página, la imagen se repetirá tanto a lo ancho como a lo largo hasta rellenar todo el
espacio.
Color de texto: text
Establece el color del texto de una página web. Por ejemplo, par un texto en negro, se escribe lo siguiente:
<body text= "#000000"></body>
Márgenes: leftmargin, topmargin, rightmargin y bottommargin
Para especificar los márgenes utilizaremos el parámetro margin, con su correspondiente indicación delante. Así:
 leftmargin para el margen izquierdo
 topmargin para el margen de arriba
 rightmargin para el margen de la derecha
 bottommargin para el margen de abajo.
Por ejemplo, para que nuestros márgenes sean de 10 píxeles por todas partes escribiremos lo siguiente:
<body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>
link, alink y vlink
Permite definir el color de los vínculos de nuestra páginas, definir el color con el que se mostraran los links. Aquí
debemos diferenciar tres tipos de instrucciones: Debemos definir el color del link (con la etiqueta "link"), el color del
link activo (con la etiqueta "alink") y el color del link ya visitado (con la etiqueta "vlink").
Por ejemplo, para establecer un color de enlaces (de links) de color rojo y que esos enlaces sean rojos cuando estén
activos y se queden en azul cuando estén inactivos deberemos escribir lo siguiente:
<body link= "#FF0000" alink= "#FF0000" vlink= "# 0000FF"></body>
EL TEXTO
<font>
Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto
entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:

4. Atributo Significado Posibles valores
face fuente nombre de la fuente, o fuentes
color color del texto número hexadecimal o texto predefinido
size tamaño del texto
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor
Por ejemplo, para insertar el texto:
Bienvenidos a www.misitio.com
Habría que escribir:
<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">
Bienvenidos a www.misitio.com </font>
Resaltado del texto
Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y
generalmente se utilizan para resaltarlo. Todas estas etiquetas necesitan una etiqueta de cierre, y que pueden
aplicarse varias etiquetas al mismo texto. Estas etiquetas son:
Etiqueta Significado Ejemplo
<b> negrita Texto en negrita
<i> cursiva Texto en cursiva
<u> subrayado Texto subrayado
<s> tachado Texto tachado
<tt> teletipo (máquina de escribir) Texto en teletipo
<big> aumenta el tamaño de la fuente Texto grande
<small> disminuye el tamaño de la fuente Texto pequeño
Párrafos <p>
El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse
entre las etiquetas <p> y </p>.
Es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo align, cuyos
valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado). Por ejemplo,
para escribir un párrafo centrado, habrá que escribir:
<p align="center">Este es un párrafo centrado.</p>
Encabezados <h1> ...
Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una página. La diferencia
entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el
texto y los elementos que tiene encima y debajo de él. Existen seis etiquetas que representan seis tipos de cabeceras
distintas. Todas estas etiquetas precisan una etiqueta de cierre:
Etiqueta Ejemplo
<H1> Título 1: HTML
<H2> Título 2: HTML
<H3> Título 3: HTML
<H4> Título 4: HTML
<H5> Título 5: HTML
<H6> Título 6: HTML

5. Imágenes <img>
Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El
nombre de la imagen ha de especificarse a través del atributo src. La sintaxis de la etiqueta es la siguiente:
<img src="imagenes/logo_animales.gif">
En este ejemplo, la imagen se llama logo_animales.gif y está dentro de la carpeta imagenes, que se encuentra en el
mismo directorio que la página web (referencia relativa al documento).
Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren
en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como
puede ser una carpeta destinada a almacenar imágenes, o una carpeta destinada a almacenar archivos de audio, etc.
Ejercicio:
Haga gala de su creatividad elaborando una hoja de vida, utilizando las etiquetas HTML explicadas en esta guía. Al
terminar, presente su trabajo al profesor.

6. INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL
AREA: Tecnología e Informática – Grado 11
TEMA: Diseño Web – Estilos CSS
Objetivo
 Conocer y comprender el funcionamiento y la importancia de los Estilos CSS en el diseño de páginas web.
Hasta ahora hemos aprendido a utilizar los elementos básicos de HTML para escribir texto, imágenes y enlaces, pero los
resultados no son los mejores desde el punto de vista estético. A continuación vamos a ver cómo mejorar el aspecto de una
página formateando el texto, con bordes, márgenes y fondos. Veremos un concepto muy importante y potente: el estilo CSS. El
aspecto de la página se controla con los estilos CSS.
Tomemos por ejemplo la siguiente página:
Si añadimos estilos CSS a la página de nuestro ejemplo obtenemos este resultado:
1. Estilos
La forma en que se ven todos los elementos de nuestra página web depende del estilo.
El estilo se compone de distintas propiedades y sus valores correspondientes. Las propiedades pueden ser el color de la fuente, el
tamaño, la alineación, los márgenes, etc... Los valores dependen de cada propiedad (color, tamaño, etc.).
El formato a seguir para definir una propiedad es: propiedad: valor; o propiedad: valor1, valor2, valor3; si puede
tener varios valores. Por ejemplo, si queremos que el texto sea de color rojo y un tamaño de fuente de 120%, escribiríamos el
siguiente estilo:

7. color:red; font-size:120%
y obtendríamos el siguiente resultado:
Texto rojo a 120%
¿Dónde escribimos el estilo? Lo más recomendable es agrupar todas las declaraciones de estilos en un solo lugar, definiendo un
bloque dentro de la etiqueta head que contenga la definición de estilos. Para ello, tenemos que incluir en la etiqueta <style
type="text/css"> ... </style> y definir dentro los estilos correspondientes a cada elemento de nuestra página.
Si queremos que un estilo afecte a todos los elementos de la página, debemos definir un estilo para la etiqueta body. En esta
etiqueta se suele definir el color de fondo y los valores genéricos de color y tamaño del tipo de letra. En nuestro ejemplo, hemos
definido el estilo del body así:
body { font-family: Verdana,Arial,sans-serif;
font-size: 15px;
color: #111111;
text-align: justify;
background-color: #063306;}
Que quiere decir que, el tipo de fuente será Verdana, (o Arial si no existe Verdana, o sans-serif si no existen las anteriores); el
tamaño será 15 pixeles, el color será el definido por el valor #111111, la alienación del texto será justificada y el color de fondo
será el #063306 para la página.
A continuación vamos a definir el estilo de la etiqueta h1, de la siguiente forma:
h1 { margin-left: 80px;
margin-top: 20px;
font-size: 180%;
color: #338433;}
Que quiere decir que todas las cabeceras h1 tendrán un margen izquierdo de 80 pixeles (si no se pone la unidad, se toman
pixeles), un margen superior de 20 pixeles, un tamaño de letra de 180% y el color #338433, como puedes comprobar en la
imagen del principio de este punto, la cabecera "Bienvenido al ITSI" queda así:
Bienvenido al ITSI
Es decir, el color y tamaño de este estilo han prevalecido sobre los ya definidos en la etiqueta body.
Siguiendo con nuestro ejemplo, a continuación definimos un mismo estilo para las cabeceras h2 y h3, pero como queremos que
la cabecera h3 tenga un color diferente, volvemos a definir otro estilo a continuación para h3 con el valor del color deseado. A
continuación definimos el estilo de los párrafos (etiqueta p) con un line-height (interlineado) de 1.5em (2 veces el tamaño de la
fuente actual), una tabulación de 15 pixeles y un margen de 35 pixeles.
h2{ font-family: Georgia,Times,serif;
font-size: 150%;
color: #a52a2a;
margin-top: 0;
margin-left: 30px;}
p { margin: 35px;
line-height: 1.5em;
text-indent: 15px;}
Con lo definido hasta ahora el texto que escribamos en los párrafos tomará las propiedades definidas en los estilos de la etiqueta
body y de la etiqueta p, pero ¿Cómo podemos cambiar el color de una palabra concreta dentro de un párrafo? Para hacer esto
tenemos que definir un nuevo tipo de estilo: las clases. Definir un estilo de clase es muy sencillo, basta escribir un punto y un
nombre elegido por nosotros, por ejemplo:
.azul {font-weight: bold;
color: #3333ff;}
Así hemos definido un estilo para la clase azul con tipo de fuente negrita (bold) y color #3333ff.
Una vez definida la clase, para aplicársela a una palabra basta utilizar la etiqueta span enmarcando la palabra. Por ejemplo, para
asignarle la clase azul a la palabra información (que está dentro de un párrafo), escribiríamos:
<p> En esta web encontrarás <span class="azul">información </span>sobre nuestra
institución y una colección de fotografías de las instalaciones.</p>
Lo cual, haría que el párrafo se viese así:
En esta web encontrarás información sobre nuestra institución y una
colección de fotografías de las instalaciones
Puedes observar que la clase azul ha "añadido" las propiedades color azul y negrita a la palabra información, manteniendo las
otras propiedades que ya tenía por pertenecer a un párrafo. Es decir, los estilos van sumando propiedades sin eliminar las que ya
se tienen.