Iti Webb 2011-1 Definitiva

Pginas WEB Parte II
INTRODUCCIN A LAS TECNOLOGAS INFORMTICAS

2011 Escuela de Ingeniera de Sistemas y Computacin Universidad del Valle
Agenda del Da
Implementacin de Sitios Web
Herramientas de desarrollo

Editores de cdigo HTML Aplicaciones para la edicin de imgenes Historia Estructura Manejo de texto Manejo de Imgenes Manejo de Enlaces Manejo de Tablas Aplicacin de hoja de estilos

El lenguaje (X)HTML

Diagramacin (Estilos en las cajas) Estilos en el texto Estilos en los enlaces

2
2011 EISC - Introduccin a las Tecnologas Informticas
Herramientas de Desarrollo Editores de Cdigo (X)HTML

Editores de (archivos de) Texto (Plano) Windows: WordPad, NotePad Linux: Vi, Emacs, kate, Gedit Se escribe un archivo de texto con extensin htm o html

Editores de texto que reconocen Sintaxis Windows: TextPad, EditPad, NotePad++, VIM, NVU Linux: Nedit, Gedit,Kate, BlueFish, NVU Reconocen la Sintaxis Colorean etiquetas Marcan errores Brindan sugerencias
2011 EISC - Introduccin a las Tecnologas Informticas 4

Editores Grficos Windows: DreamWeaver, FrontPage, GoLive KompoZer (Nvu) Linux: QuantaPlus Nvu Permiten visualizar el resultado en el mismo entorno
Herramientas de Desarrollo Aplicaciones para Tratamiento de Imgenes
Se deben optimizar las imgenes para que su peso sea el menor posible y an se vean bien en pantalla Reducir Tamao de la Imagen Tipo de archivo segn el tipo de imagen Cantidad de colores Porcentaje de calidad A menor tamao de la imagen, menor ser su tiempo de transferencia en la red Cuando las imagen a desplegar tienen un gran tamao, se usa la estrategia de dividirla en varias imgenes. Se ven como una sola, acomodndolas en celdas contiguas de una tabla.
Herramientas de Desarrollo Aplicaciones para Tratamiento de Imgenes

Tratamiento de Imgenes
Windows: FireWorks, PhotoShop Gimp
Linux:
Gimp
El Lenguaje (X)HTML Historia
HTML fue propuesto en 1989 por Tim Berners-Lee para promover la publicacin de informacin a travs de la naciente Internet Los documentos HTML por ser archivos de texto, son de poco tamao, aptos para transmisin en Internet El Consorcio W3C mantiene el estndar de este lenguaje XHTML es el sucesor de HTML, es por eso que muchos lo consideran la versin actual de HTML, pero es una recomendacin aparte que tiene una sintaxis ms estricta que HTML y que pretende separar el contenido de la forma de presentacin
El Lenguaje (X)HTML Estructura
(X)HTML usa etiquetas o marcas (lenguaje de marcado) que consisten en breves instrucciones de comienzo y final Toda etiqueta se identifica porque est encerrada entre los signos menor que (<) y mayor que (>) Todo el contenido de un documento HTML est enmarcado dentro de etiquetas Las etiquetas HTML indican al navegador cmo presentar (formatear) el contenido en la pantalla (color, tamao, alineacin, fuente, etc.)

En su mayora, las etiquetas presentan una marca de apertura y otra de finalizacin <etiqueta>contenido</etiqueta> Algunas pocas etiquetas no tienen un contenido o etiqueta de finalizacin Salto de lnea <br /> Lnea Horizontal <hr /> Definicin de Imagen <img src=imagen.jpg />
10

Algunas etiquetas incluyen atributos a los que se les puede dar valor <etiqueta atributo1=valor1 atributo2=valor2 ... atributoN=valorN>contenido</etiqueta> Ejemplos: <table bgcolor=white width=100%>...</table> <a href=http://www.univalle.edu.co>Universidad del Valle</a> Para una lectura ms cmoda, en el archivo HTML se debe presentar las etiquetas identadas segn la jerarqua de contenido <etiquetaPadre> <etiquetaHija>...</etiquetaHija> </etiquetaPadre>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ttulo de la Pgina</title> </head> <body> Contenido de la Pgina </body> </html>
Inicio del documento Encabezado Cuerpo Fin del documento
Encabezado: define caractersticas y atributos especiales del documento, se denota entre las etiquetas <head></head> Cuerpo: contiene la informacin a mostrar, se denota entre las etiquetas <body></body>

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Pretty Forms</title> <script type="text/javascript" src="prettyForms.js"></script> <link rel="stylesheet" href="prettyForms.css" type="text/css" media="screen"/> </head>
En el Encabezado se puede incluir: Meta-Informacin de la pgina (autor, juego de caracteres, tipo de archivo, fecha) Ttulo de la pgina Importacin de otros archivos necesarios JavaScript Hojas de Estilo (CSS)
El Lenguaje (X)HTML Manejo de Texto Caracteres Especiales

HTML tiene una manera especial de presentar algunos caracteres:
á é í ó ú ñ (espacio obligatorio) ¿ &uumi; < < & & > Á &Eacute &Iacute &Oacute &Uacute Ñ %iexcl; &Uumi; > € & " º ª © ™ nbsp; £ ½ ¼ ¾
14
El Lenguaje (X)HTML Manejo de Texto - Ttulos

Se puede manejar jerarqua de ttulos usando las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> <h1>Título ms grande</h1> <h2>Título de tamao 2</h2> <h3>Título de tamao 3</h3> <h4>Título de tamao 4</h4> <h5>Título de tamao 5</h5> <h6>Título ms pequeño</h6>
Ttulo ms grande
Ttulo de tamao 2
Ttulo de tamao 3
Ttulo de tamao 4
Ttulo de tamao 5
Ttulo ms pequeo
15
El Lenguaje (X)HTML Manejo de Texto - Prrafos

Existen varias etiquetas que se pueden usar en la escritura de un prrafo o texto: <p>Texto de un Prrafo</ p> Salto de Lnea <br /> Lnea Horizontal <hr /> <b>Texto en Negrilla</b> <u>Texto Subrayado</u> <i>Texto itlico</i>
16
El Lenguaje (X)HTML Manejo de Texto Numeracin y Vietas

Lista NO Ordenada (Vietas): <ul>...</ul> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul> El Atributo type indica el tipo de vieta a usar: circle, disk, square <ul type="square"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul>
17
El Lenguaje (X)HTML Manejo de Texto Numeracin y Vietas

Lista Ordenada (Numeracin): <ol>...</ol> <ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ol> El Atributo start indica el inicio de la cuenta: 1, 2, 3, etc El Atributo type indica el tipo de numeracin a usar: A: letras en maysculas a: letras en minsculas 1: nmeros arbigos I: romanos en maysculas i: romanos en minsculas <ol type="I" start="3">......</ol>
El Lenguaje (X)HTML Manejo de Imgenes

<img> permite incluir imgenes en cualquier formato en una pgina
El atributo src indica el origen de la imagen Ejemplo: <img src=logoUV.gif>
19
El Lenguaje (X)HTML Manejo de Enlaces

<a>...</a> permite enlazar con otras pginas en Internet desde la pgina actual El atributo href determina la direccin a la cual se desea enlazar Ejemplo de enlace usando texto: <a href=http://www.univalle.edu.co>Universidad del Valle</a> Ejemplo de enlace usando imagen: <a href=http://www.univalle.edu.co><img src=logoUV.gif /></a>
20
El Lenguaje (X)HTML Manejo de Tablas

Etiquetas para construir tablas: Inicio y final de la Tabla <table>...</table> Encabezado de la Tabla <th>...</th> Inicio y final de una Fila <tr>...</tr> Inicio y final de una Columna <td>...</td> Ejemplo de Tabla con 2 filas y 2 columnas:
<table border="1" width="400"> <th>Ttulo Columna 1</th><th>Ttulo Columna 2</th> <tr><td>Fila 1, Columna 1</td><td>Fila 1, Columna 2</td></tr> <tr><td>Fila 2, Columna 1</td><td>Fila 2, Columna 2</td></tr> </table>
21

Atributos para la etiqueta <table>: width: ancho de la tabla en pixeles o porcentaje border: ancho del borde en pixeles cellpadding: espacio en pixeles entre el borde de una celda y su contenido cellspacing: el espacio en pixeles entre las celdas bgcolor: el color de fondo align: alineacin de la tabla (left, right, center)
22

Atributos para la etiqueta <tr>: Align: alineacin del texto y objetos dentro de la fila (left, right, center) bgcolor: color de fondo de la fila valign: alineacin vertical de los objetos en la fila (top, middle, bottom) rowspan: cantidad de filas a combinar <table width=100% bgcolor=red align=right> <tr valign=top bgcolor=blue> ... </tr> </table>
23

Atributos para la etiqueta <td>: align: alineacin del texto y objetos dentro de la columna (left, right, center) bgcolor: color de fondo de la celda width: ancho en pixeles o porcentaje de la celda height: alto en pixeles o porcentaje de la celda colspan: cantidad de columnas a combinar <table width=100% bgcolor=red align=right> <tr valign=top bgcolor=blue> <td bgcolor=yellow>Celda 1</td> <td colspan=2>Celda 2</td> </tr> </table>
El Lenguaje (X)HTML Creando Pginas con <div>

La Etiqueta <div> se usa como un contenedor en bloque de otros elementos en una pgina HTML
<div id=contenedor1> Contenido del div ... </div> El atributo id se asocia a cada <div> para usarlo como ancla en la aplicacin de estilos de un archivo CSS Un archivo CSS est compuesto por una o ms reglas que se aplican a un documento HTML La regla tiene dos partes: Selector: nombre del estilo Declaracin: definicin del estilo, parejas de propiedades y valores (orientacin: derecha, izquierda, centro; color: azul, amarillo, verde; tamao: 10, 12, 14; etc)

Existen dos formas de asociar una Hoja de Estilos CSS a un documento (X)HTML: Creando un archivo de extensin css e incluyendolo dentro de la pgina HTML:
<head> <link href="estilos.css" rel="stylesheet" type="text/css"> </head>
Creando los estilos dentro de la pgina HTML:

<style type="text/css"> body { margin: 0; color: #000; } </style>

Crear una pgina XHTML bsica usando elementos <div> para cada rea de contenido La pgina contendr: Encabezado Pie de Pgina rea de Navegacin rea de Contenido rea de Bsqueda
27

Se crea cada rea como un <div> con su id correspondiente <body> <div id="encabezado"></div> <div id="contenedor"> <div id="contenedor2"> <div id="navegacion"></div> <div id="mas"></div> <div id="contenido"></div> <div id="division_limpiar"> </div> </div> </div> <div id="pie_de_pagina"></div> </body>

<body> <div id="contenido"> <div id="encabezado"> <h2>Ttulo Contenido</h2> <h1>Nombre del Sitio</h1> <p> </div> Ms texto <div id="contenedor"> </p> <div id="contenedor2"> </div> <div id="navegacion"> <div id="division_limpiar"></div> <ul> </div> <li><a href="#">Enlace 1</a></li> </div> <li><a href="#">Enlace 2</a></li> <div id="pie_de_pagina"> </ul> <ul> </div> <li><a href="#">Enlace 1</a></li> <div id="mas"> <li><a href="#">Enlace 2</a></li> <h3>Buscar ms</h3> <li><a href="#">Copyright © <p> Nombre del sitio</a></li> Ms texto </ul> </p> </div> </div> </body>
29
30
El Lenguaje HTML Aplicando Hojas de Estilo

En el archivo CSS se asigna margen para el documento, tamao y tipo de letra y color de fondo: body { margin: 0; padding: 0; font-size: 90%; font-family: georgia, times, "times new roman", serif; background-color: #fff }
31

En el archivo CSS se asignan los colores para los enlaces activos y visitados: a:link { color: #036; } a:visited { color: #066; } a:hover ,a:active { color: #fff; background-color: #036; }
32

En el archivo CSS se asigna, para el encabezado, gris oscuro para el fondo, blanco para la letra y 1 pixel en el borde inferior:
div#encabezado { color: #fff; background-color: #333; border-bottom: 1px solid #000;
33

En el archivo CSS se asigna margen, tamao de letra y peso a las etiquetas <h1> que se encuentren dentro del <div> llamado encabezado: div#encabezado h1 { margin: 0; padding: .3em 0 .3em .5em; font-size: 2.2em; font-weight: normal; }
34

En el archivo CSS se asigna como imagen de fondo del <div> contenedor base.jpg y se configura que la imagen se repita hasta el fondo de la pgina:
div#contenedor { background-image: url(base.jpg); background-repeat: repeat-y;
35

En el archivo CSS se asigna como imagen de fondo del <div> contenedor2 otra_base.jpg, se configura para que se repita hasta el fondo de la pgina y se ubica a la derecha:
div#contenedor2 { background-image: url(otra_base.jpg); background-repeat: repeat-y; background-position: right; }
36

En el archivo CSS se ubica el <div> navegacin a la izquierda de la pgina, se asignan 150 pixeles de ancho y margen superior:
div#navegacion { float: left; width: 150px; padding-top: 2em; }
37

En el archivo CSS se quita margen izquierda a todos los elementos de las listas desordenadas dentro del <div> navegacion:
div#navegacion ul { list-style-type: none; padding: 0; margin: 0; }
38

En el archivo CSS se asignan 4 pixeles como margen superior a los elementos de las listas desordenadas dentro del <div> navegacin: div#navegacion ul li { margin-top: 4px; }
39

En el archivo CSS se configura el ancho, margen, color y la imagen de fondo para los enlaces dentro de los elementos de las listas desordenadas del <div> navegacin: #navegacion ul li a { display: block; width: 135px; padding: 3px 5px 3px 10px; text-decoration: none; color: #000; background-image: url(base2.jpg); background-repeat: repeat-y; }

En el archivo CSS se agrega efecto rollover a los enlaces dentro de los elementos de las listas desordenadas del <div> navegacion:
#navegacion ul li a:hover { color: #fff; background-color: #ccc; background-image: url(base3.jpg); background-repeat: repeat-y; }
41

En el archivo CSS se mueve a la derecha de la pgina el <div> mas y se le asigna margen, color y ancho:
div#mas { float: right; width: 160px; margin: 0; padding: 2em 10px 0 0; color: #fff; }
42

En el archivo CSS se asigna una imagen de fondo a las etiquetas <h3> dentro del <div> mas: div#mas h3 {
margin-top: 0; color: #fff; padding: .2em; background-image: url(base4.jpg); background-position: right; background-repeat: repeat-y;
43

En el archivo CSS se asignan margenes al <div> contenido, as como color y tamao a las etiquetas <h2> que contenga: div#contenido { margin-left: 190px; margin-right: 200px; } div#contenido h2 { font-size: 2em; color: #036; margin: 0; padding-top: 1em; font-weight: normal; } div#contenido { line-height: 150%; }

En el archivo CSS se limpia el <div> division_limpiar para forzar a crear una nueva lnea en el fondo de la pgina:
#division_limpiar { clear: both; height: 1em; }
45

En el archivo CSS se usa clear: both para que el <div> pie_de_pagina se ubique en una nueva lnea, tambin se asignan margenes y se ubica el texto a la derecha:
div#pie_de_pagina { clear: both; padding: .5em 1em; border-top: 1px solid #999; text-align: right; }
46

En el archivo CSS se eliminan margenes a los elementos de las listas desordenadas dentro del <div> pie_de_pagina:
div#pie_de_pagina ul { padding: 0; margin: 0; list-style-type: none; }
47

En el archivo CSS se define que todos los elementos dentro del <div> pie_de_pagina se ubiquen en una misma lnea:
div#pie_de_pagina li { display: inline; margin-right: 1em; }
48
Recursos en Lnea
Validador de cdigo HTML
http://validator.w3.org
http://jigsaw.w3.org/css-validator/ http://www.w3schools.com http://www.webmasterlibre.com/2006/05/06/div-mania/ http://css.maxdesign.com.au/selectutorial/index.htm
Validador de cdigo CSS
Manuales de HTML, XHTML, CSS
Ms informacin

49

Iti Webb 2011-1 Definitiva

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Iti Webb 2011-1 Definitiva

Enviado por

Direitos autorais:

Formatos disponíveis

Pginas WEB Parte II

INTRODUCCIN A LAS TECNOLOGAS INFORMTICAS

Implementacin de Sitios Web

Diagramacin (Estilos en las cajas) Estilos en el texto Estilos en los enlaces

2011 EISC - Introduccin a las Tecnologas Informticas

Herramientas de Desarrollo Editores de Cdigo (X)HTML

2011 EISC - Introduccin a las Tecnologas Informticas

Herramientas de Desarrollo Editores de Cdigo (X)HTML

Herramientas de Desarrollo Editores de Cdigo (X)HTML

2011 EISC - Introduccin a las Tecnologas Informticas

Herramientas de Desarrollo Aplicaciones para Tratamiento de Imgenes

2011 EISC - Introduccin a las Tecnologas Informticas

Herramientas de Desarrollo Aplicaciones para Tratamiento de Imgenes

Windows: FireWorks, PhotoShop Gimp

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Historia

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Estructura

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Estructura

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Estructura

El Lenguaje (X)HTML Estructura

Inicio del documento Encabezado Cuerpo Fin del documento

El Lenguaje (X)HTML Estructura

El Lenguaje (X)HTML Manejo de Texto Caracteres Especiales

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Manejo de Texto - Ttulos

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Manejo de Texto - Prrafos

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Manejo de Texto Numeracin y Vietas

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Manejo de Texto Numeracin y Vietas

El Lenguaje (X)HTML Manejo de Imgenes

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Manejo de Enlaces

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Manejo de Tablas

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Manejo de Tablas

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Manejo de Tablas

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Manejo de Tablas

El Lenguaje (X)HTML Creando Pginas con <div>

El Lenguaje (X)HTML Creando Pginas con <div>

Creando los estilos dentro de la pgina HTML:

El Lenguaje (X)HTML Creando Pginas con <div>

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Creando Pginas con <div>

El Lenguaje (X)HTML Creando Pginas con <div>

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje (X)HTML Creando Pginas con <div>

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje HTML Aplicando Hojas de Estilo

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje HTML Aplicando Hojas de Estilo

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje HTML Aplicando Hojas de Estilo

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje HTML Aplicando Hojas de Estilo

2011 EISC - Introduccin a las Tecnologas Informticas

El Lenguaje HTML Aplicando Hojas de Estilo