INSTITUTO TECNICO SUPERIOR INDUSTRIAL
AREA: Tecnología e Informática – Grado 11
TEMA: Diseño Web - terminología básica,
In...
proporcionando los recursos (textos con enlaces, figuras,
formularios, botones y otros objetos) que soliciten, usando el
p...
INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL
AREA: Tecnología e Informática – Grado 11
TEMA: HTML básico
LA ETIQUETA ...
Atributo Significado Posibles valores
face fuente nombre de la fuente, o fuentes
color color del texto número hexadecimal ...
Imágenes <img>
Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de ci...
INSTITUCION EDUCATIVA TECNICO SUPERIOR INDUSTRIAL
AREA: Tecnología e Informática – Grado 11
TEMA: Diseño Web – Estilos CSS...
color:red; font-size:120%
y obtendríamos el siguiente resultado:
Texto rojo a 120%
¿Dónde escribimos el estilo? Lo más rec...
Próxima SlideShare
Cargando en…5
×

Diseño web guias 1-3

1.709 visualizaciones

Publicado el

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

Publicado en: Educación
  • Sé el primero en comentar

Diseño web guias 1-3

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

×