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,

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?

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:

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

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.

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:

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.