descripcion html - Campus Virtual

Páginas WEB Parte II
INTRODUCCIÓN
A LAS
TECNOLOGÍAS
INFORMÁTICAS
Escuela de Ingeniería de Sistemas y Computación – Universidad del Valle
Contenido

Implementación de Sitios Web

Herramientas de desarrollo



Editores de código HTML
Aplicaciones para la edición de imágenes
El lenguaje (X)HTML







Historia
Estructura
Manejo de texto
Manejo de Imágenes
Manejo de Enlaces
Manejo de Tablas
Aplicación de hoja de estilos

Diagramación (Estilos en las cajas)

Estilos en el texto

Estilos en los enlaces
EISC - Introducción a las Tecnologías Informáticas
2
Herramientas de Desarrollo Editores de
Código (X)HTML
Editores de (archivos de) Texto
(Plano)
Windows:
WordPad, NotePad
Linux:
Vi, Pico, Emacs
Se escribe un archivo de texto
con extensión htm o html
EISC - Introducción a las Tecnologías Informáticas
3
Herramientas de Desarrollo
Editores de Código (X)HTML
Editores de texto que
reconocen Sintaxis
Windows:

TextPad, EditPad,
NotePad++, VIM
Linux:
Nedit, Gedit,Kate,
BlueFish
Reconocen la Sintaxis
Colorean etiquetas
Marcan errores
Brindan sugerencias
EISC - Introducción a las Tecnologías Informáticas
4
Herramientas de Desarrollo
Editores de Código (X)HTML
Editores Gráficos
Windows:
DreamWeaver,
FrontPage,
GoLive
KompoZer (Nvu)
Linux:
QuantaPlus
Nvu
Permiten visualizar el resultado
en el mismo entorno
EISC - Introducción a las Tecnologías Informáticas
5
Herramientas de Desarrollo
Aplicaciones para Tratamiento de Imágenes
●
●
●
Se deben optimizar las imágenes para que su peso sea el
menor posible y aún se vean bien en pantalla

Reducir Tamaño de la Imagen

Tipo de archivo según el tipo de imagen

Cantidad de colores

Porcentaje de calidad
A menor tamaño de la imagen, menor será su tiempo de
transferencia en la red
Cuando las imagen a desplegar tienen un gran tamaño, se usa
la estrategia de dividirla en varias imágenes. Se ven como una
sola, acomodándolas en celdas contiguas de una tabla.
EISC - Introducción a las Tecnologías Informáticas
6
Herramientas de Desarrollo
Aplicaciones para Tratamiento de Imágenes
Tratamiento de
Imágenes


Windows:
FireWorks,
PhotoShop
Gimp
Linux:
Gimp

EISC - Introducción a las Tecnologías Informáticas
7
El Lenguaje (X)HTML
Historia
●
●
●
●
HTML fue propuesto en 1989 por Tim Berners-Lee para
promover la publicación de información a través de la naciente
Internet
Los documentos HTML por ser archivos de texto, son de poco
tamaño, aptos para transmisión en Internet
El Consorcio W3C mantiene el estándar de este lenguaje
XHTML es el sucesor de HTML, es por eso que muchos lo
consideran la versión actual de HTML, pero es una
recomendación aparte que tiene una sintaxis más estricta que
HTML.
EISC - Introducción a las Tecnologías Informáticas
8
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 cómo presentar
(formatear) el contenido en la pantalla (color, tamaño,
alineación, fuente, etc.)
EISC - Introducción a las Tecnologías Informáticas
9
El Lenguaje (X)HTML
Estructura
En su mayoría, las etiquetas presentan una marca de
apertura y otra de finalización
 <etiqueta>contenido</etiqueta>
Algunas pocas etiquetas no tienen un contenido o etiqueta
de finalización
 Salto de línea <br />
 Línea Horizontal <hr />
 Definición de Imagen <img src=”imagen.jpg” />
EISC - Introducción a las Tecnologías Informáticas
10
El Lenguaje (X)HTML
Estructura
En su mayoría, las etiquetas presentan una marca de
apertura y otra de finalización
 <etiqueta>contenido</etiqueta>
Algunas pocas etiquetas no tienen un contenido o etiqueta
de finalización
 Salto de línea <br />
 Línea Horizontal <hr />
 Definición de Imagen <img src=”imagen.jpg” />
EISC - Introducción a las Tecnologías Informáticas
11
El Lenguaje (X)HTML
Estructura
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 más cómoda, en el archivo HTML se debe
presentar las etiquetas identadas según la jerarquía de
contenido
 <etiquetaPadre>
• <etiquetaHija>...</etiquetaHija>
 </etiquetaPadre>
EISC - Introducción a las Tecnologías Informáticas
12
El Lenguaje (X)HTML
Estructura
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título de la Página</title>
</head>
<body>
Contenido de la Página
</body>
</html>
Inicio del
documento
Encabezado
Cuerpo
Fin del
documento
Encabezado: define características y atributos especiales del
documento, se denota entre las etiquetas <head></head>
Cuerpo: contiene la información a mostrar, se denota entre las
etiquetas <body></body>
EISC - Introducción a las Tecnologías Informáticas
13
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
Ñ
“
º
ª
©
™
&
"
º
ª
©
™
nbsp;
¡
Ü
>
€
%iexcl;
&Uumi;
>
€
₤
½
¼
¾
£
½
¼
¾
EISC - Introducción a las Tecnologías Informáticas
15
El Lenguaje (X)HTML
Manejo de Texto - Títulos
Se puede manejar jerarquía de
títulos usando las etiquetas <h1>,
<h2>, <h3>, <h4>, <h5> y <h6>
<h1>Título más grande</h1>
<h2>Título de tamaño 2</h2>
<h3>Título de tamaño 3</h3>
<h4>Título de tamaño 4</h4>
<h5>Título de tamaño 5</h5>
<h6>Título más
pequeño</h6>
Título más grande
Título de tamaño 2
Título de tamaño 3
Título de tamaño 4
Título de tamaño 5
Título más pequeño
EISC - Introducción a las Tecnologías Informáticas
16
El Lenguaje (X)HTML
Manejo de Texto – Numeración y Viñetas
Lista NO Ordenada (Viñetas): <ul>...</ul>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
El Atributo type indica el tipo de viñeta a
usar: circle,square
<ul type="square">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
EISC - Introducción a las Tecnologías Informáticas
18
El Lenguaje (X)HTML
Manejo de Texto – Numeración y Viñetas
Lista Ordenada (Numeración): <ol>...</ol>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
El Atributo start indica el inico de la cuenta: 1, 2, 3,
etc
El Atributo type indica el tipo de numeración a
usar:

A: letras en mayúsculas

a: letras en minúsculas

1: números arábigos

I: romanos en mayúsculas

i: romanos en minúsculas
<ol type="I" start="3">......</ol>
EISC - Introducción a las Tecnologías Informáticas
19
El Lenguaje (X)HTML
Manejo de Enlaces
<a>...</a> permite enlazar con otras páginas en Internet
desde la página actual
El atributo href determina la dirección 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>
EISC - Introducción a las Tecnologías Informáticas
21
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>Título Columna 1</th><th>Título 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>
EISC - Introducción a las Tecnologías Informáticas
22
El Lenguaje (X)HTML
Manejo de Tablas
Atributos para la etiqueta <td>:

align: alineación 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>
EISC - Introducción a las Tecnologías Informáticas
25