HTML2

El lenguaje de marcas
<HTML>
Universidad Nacional de Salta
Sede Regional Orn
Ctedra: Seminario de Computacin
Para reflexionar
Lo escuche y lo olvid.
Lo vi y lo entend.
Lo hice y lo aprend.
Confucio: Filsofo chino

(551 a. C. - 479 a. C.)
Arquitectura Cliente-Servidor
Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn
Estructura general de una Pgina Web
Estructura
Contenido
Apariencia
Prrafos
Encabezados
Listas
Tablas
Capas
Etc.
Textos
HTML
Imgenes
Enlaces
Colores
Fondos
Tipografas
Alineacin
Tamaos
Etc.
Comportamiento
Efectos
Validaciones
Automatizacin
CSS
Javascript
Que es la W3C?
Evolucin del HTML y CSS
Conceptos
HTML (Hyper Text Markup Language)
Lenguaje con el que se escriben paginas web.

Es un lenguaje de hipertexto.
Permite escribir texto de forma estructurada.
Compuesto por etiquetas (marcan el inicio y fin de
cada elemento del documento)
Documento hipertexto contiene texto, imgenes
sonido y video (documento multimedia).
Navegadores o Browsers
Interpretan el cdigo HTML de la pgina.

Internet Explorer, Chrome, Firefox, Safari,
Opera, entre otros.
Editores
Programa que permite redactar documentos.
Editores visuales. Evitan la escritura de cdigo
HTML.
Editores de texto. La pagina se crea a travs del
cdigo HTML.
Ejemplos
Editores Visuales: (generan basura)
Macromedia Dreamweaver, Microsoft Frontpage,

Adobe Pagemill, NetObjects Fusion, CutePage,
HotDog Proffesional, Netscape Composer y
Arachnophilia
Editores de texto.(solo lo necesario)
Wordpad o el Bloc de notas
Ejemplo de una pgina HTML
11
Estructura de un documento HTML
12
Estructura de una Etiqueta o Tag
Cie rre d e etiq u et a
Etiq u eta
<div class="encabezado">.........</div>
Atrib u to
Va lo r
13
Etiquetas para definir la estructura

Etiquetas para definir la Estructura general de una pgina:
Etiqueta
Para qu sirve
<!DOCTYPE
Especifica qu tipo de documento usaremos
<html>
Envuelve a todo el documento.
<head>
Envuelve el encabezado del documento.
<body>
Envuelve el cuerpo del documento
Dentro de la Cabecera (head) pueden ir estas etiquetas:
Etiqueta
Para qu sirve
<base />
URI de base para direcciones relativas
<link />
Enlace a otros archivos (hoja de estilo, index, etc.)
<meta />
Metainformacin sobre el documento, palabras clave, autor, etc.
<script></script> Cdigo de scripts de programacin, tpicamente de JavaScript
<style> </style> Reglas de estilos incrustadas en el documento
<title>
Ttulo del documento (se muestra en la barra de ttulo del
navegador, y es til para los buscadores)
14
La etiqueta <body>
La etiqueta body es la que encierra todo el contenido
de la pgina.
Todo lo que vemos en la pgina est escrito en alguna
parte del body.
La etiqueta body acepta una serie de atributos que
permiten su personalizacin.
Puede contener las siguientes etiquetas o tag:
15
Clasificacin segn su Funcin
16
17
18
19
Entidades
Si deseamos utilizar un caracter que no est presente en
el charset, podemos utilizar las denominadas Entidades.
&nbsp espacio en blanco
20
Listas
Una lista es un prrafo estructurado que contiene una serie de elementos.
Las listas pueden ser:
- Numeradas <ol><li></li><li></li>.</ol>
- No numeradas <ul><li></li><li></li>.</ul>
- De glosario (definicin). <dl><dd></dd><dt></dt><dd>.</dl>
* Las listas se pueden anidar y combinar numeradas y no numeradas.
21
Estilo de Listas
Analizar el Ejemplo001.html
22
Imgenes
Una imagen vale ms que mil palabras (No abusar de esta ventaja).
Con la etiqueta <img> (No tiene cierre) podemos insertar una imagen.
Los navegadores reconocen numerosos formatos grficos, aunque los
ms utilizados son tres: GIF (Graphics Interchange Format) y JPEG
(Joint Photographics Experts Group). PNG (Portable Network Graphics).
Atributos:
SRC=ruta_de_la_imagen/nombre.gif" (La ruta puede ser una

direccin de Internet)
ALT="comentario"
Si incluimos junto con la imagen la
HEIGHT="altura"
informacin de sus dimensiones el
WIDTH="ancho"
navegador podr reservar espacio para
BORDER="grosor"
ellas con slo leer el cdigo
ALIGN="alineacin" (top, bottom, left, right, middle)
VSPACE=Margen vertical alrededor de la imagen (pixeles)
HSPACE=Margen horizontal alrededor de la imagen (pixeles)
Ejemplo: <img style="width: 300px; height: 168px;" alt="Imagen de

Presentacin" src="imagenes/portada2.jpg">
Analizar el Ejemplo 002
23
Mapa de imagen
Etiqueta <map> y </map>
La etiqueta map permite crear un mapa de imagen con diferentes zonas de
manera que, al pulsar sobre ellas, se enlaza a diferentes destinos. Cada
mapa de imgenes se determina con un nombre (atributo name="...").
Entre la apertura y el cierre se definen las reas del mapa por medio de la
etiqueta <area> y </area> que tiene a su vez estos atributos:
shape="..." : Forma del rea de enlace: circular, rectangular, o poligonal.
coords="..." : Coordenadas de localizacin del rea en la imagen.
href= "..." :Direccin del enlace.
Ejemplo:
<img alt=.. src=...jpg usemap="image1">
<map name=image1>
<area shape=circle coords="x,x,x" href="http://...">
<area shape=rect coords="x,x,x,x" href="http://...">
<area shape=poly coords="x,x,x,x,x,x,x,x...." href="http://...">
</map>
24
Enlaces
La incorporacin del hipertexto fue una de las claves del xito del
lenguaje HTML.
El elemento principal del hipertexto es el "hiperenlace", tambin
llamado "enlace Web" o simplemente "enlace".
El enlace comienza en un recurso y apunta hacia otro recurso llamado
ancla".
Se pueden relacionar no solo pginas Web, sino tambin otros
recursos como imgenes, documentos y archivos en general.
Las etiquetas de apertura y cierre son: <a> </a>
Estructura de los enlaces
<a href="destino del enlace">Texto indicativo del enlace</a>
25
Tipos de Enlaces
Enlaces dentro de la misma pgina:
<a href="#marca"> Texto </a>
y en el sitio a donde queremos saltar:
<a name="marca"> </a>
Enlaces con otra pgina de nuestro Sitio
<a href=pagina2.html"> Ir al captulo 2 </a>
Enlaces con una pgina fuera de nuestro Sitio
<a href="http://clarin.com/"> Pgina inicial del Diario Clarn </a>
Enlaces con una direccin de email
<a href="mailto:direccin de email"> Texto del enlace </a>
Se pueden hacer que las imgenes nos sirvan como enlaces de
hipertexto combinando los efectos de las etiquetas <a> y <img>.
En primer lugar deberemos insertar la instruccin de inicio de <a>,
despus incluir la etiqueta <img>
26
Capas
Una capa es un contenedor que tiene la peculiaridad fundamental de
poder situarse en cualquier punto de nuestra pgina Web.
Una capa puede contener cualquier elemento HTML, texto, tablas,
imgenes, incluso otras capas.
Tambin podemos superponer variar capas, de tal manera que la capa
que est por encima ocultar a la de abajo.
Otra propiedad de las capas es la visibilidad, como consecuencia de un
evento, podemos mostrar u ocultar el contenido de una capa.
Por todas estas caractersticas, las capas tienen dos utilidades
fundamentales:
1. Servir de contenedoras para situar una parte de documento en
cualquier posicin de la pgina.
2. Con la ayuda de cdigo Javascript que se desencadena por eventos,
permitir efectos dinmicos.
27
Etiquetas <div> y <spam>

Estas etiquetas permiten el uso de las capas.
Todas las etiquetas HTML comprendidas entre las correspondientes
etiquetas de apertura y cierre configuran la capa.
La etiqueta DIV dispone del modificador id que permite dar un nombre
a la capa lo cual permite posteriormente acceder a ella.
Las caractersticas de la capa se establecen con un estilo (style)
dentro de la etiqueta DIV de apertura.
El uso de la etiqueta DIV y SPAN es similar, la diferencia es que la
etiqueta DIV genera un salto de lnea anterior y posterior a su
contenido, mientras que la etiqueta SPAN no. La etiqueta SPAN se
utiliza para, por ejemplo, crear una capa que contenga algo y se
alinee entre dos palabras de un prrafo.
Cambiar profundidad a la capa
Crear capa
28
Dividiendo en secciones una pgina

Utilizando la etiqueta <div>, podemos marcar las "divisiones" o zonas de la
pgina, segn la funcin que cumple cada "bloque" dentro de la pgina: men,
cabezal, pie, contenido, etc.

29
Tablas
Una tabla se define entre las etiquetas:

<table> y </table>
Se puede poner titulo a la tabla con las etiquetas
<caption> y </caption>.
Cada fila de la Tabla se define con las etiquetas:
<tr> y </tr> (table row).
Dentro de cada fila se definen las celdas que forman esa
fila (columnas) con las etiquetas:
<td> y </td> (table data).
Se pueden definir ttulos y cabeceras de celdas
que se distinguen por estar el texto en negrita y centrado
con las etiquetas:
<th> y </th> (table header).
30
Tablas - Atributos
Atributos de <table>
width: ancho de la tabla (absoluta o en %).
border: ancho de los bordes de la tabla.
cellspacing: espaciado entre celdas.
cellpadding: espacio entre el borde de cada celda y los
elementos incluidos en ella.
Atributos de <tr>
align: alineacin del contenido de las celdas de la fila.
valign: posicin vertical del contenido de las celdas de la fila.
Atributos de <th> y <td>
rowspan: n de filas que debe abarcar la celda actual.
colspan: n de columnas de la fila que abarcar la celda.
align: alineacin del contenido de la celda.
valign: posicin vertical del contenido de la celda.
31
La etiqueta iframe
Permite crear un frame (marco) 'interno' o incrustado dentro de un
documento HTML, pudiendo contener otro documento HTML
especificado en el atributo src.
Ejemplo: <iframe id="marco" src="inicio.html" target="marco"></iframe>
El atributo target de los enlaces, deben tener el valor igual al id del
iframe.
<a target="marco" href=www.google.com">Ir al Google</a>
Atributos:
Id: Asigna un identificador al elemento asociado.
src: apunta a un documento que ser cargado inicialmente en el marco.
scrolling: Manejo de los controles de desplazamiento (auto,yes,no).
Otros atributos: style, class, title, frameborder, marginwidth,
marginheight, width, height, align (left, right, center, justify).
32
Formularios
Los formularios permiten interaccin entre los

usuarios y el servidor:
Consultas a bases de datos

Solicitudes de documentacin
Envo de Informacin
Por medio de:
Introduccin de texto
casillas de verificacin
listas de seleccin
El tratamiento de los datos recibidos en el servidor

desde los formularios lo hace un programa llamado
CGI (Common Gateway Interface).
33
Formularios
<Form name=formu1 action=http://www.google.com method=get>
<input>
Campos de entrada por teclado.
Botones de seleccin.
Casillas de marca.
Botones de proceso.
Botones de inicializacin (reset).
Imgenes sensibles al ratn.
<select>
Listas desplegables de valores.
Listas fijas de valores.
<texarea>
Ventanas de escritura libre.
</form>
34
Formularios
35
Formularios
Etiquetas Avanzadas:
Fieldset: Agrupa temticamente campos del formulario, el
navegador muestra por defecto un borde resaltado para cada
agrupacin.
Legend: se incluye dentro de cada etiqueta <fieldset> y establece el
ttulo que muestra el navegador para cada agrupacin de
elementos.
Optgroup: permite agrupar lgicamente opciones

relacionadas dentro de una lista desplegable.
<optgroup label="Terrestres">

36
Software tiles para desarrollo Web
Amaya
Aptana
Kompozer
Komodo
NetBeans
DreamWeaver
GIMP
Kompozer
Qu es KompoZer?
-Es un editor de pginas web WYSIWYG (What you see is what you
get Lo que ves es lo que recibes).
-Es un derivado de NVU.
-Su objetivo es facilitar el desarrollo de pginas web.
-Posee distintas formas de visualizacin disponibles en su interfaz
como: cdigo fuente, ventana WYSIWYG, visin con tags de HTML
realzados.
-Presenta caractersticas como el soporte integrado de CSS y mejor
gestin del soporte FTP para actualizacin de los archivos, soporte
de marcos, formularios, tablas, plantillas de diseo, etc.
- Est disponible para diversas plataformas: Windows, Mac OS, y
Linux.
38
Herramientas destacadas
Administrador de sitios FTP: Cualquier sitio que el usuario haya
especificado en sus Opciones de Publicacin, podr ser navegado y
actualizado en una barra lateral.
Nuevos selector de colores: Se podr elegir entre el selector de
colores verde, azul y rojo para crear la tonalidad deseada y tambin
podremos elegir el color deseado con el mouse.
Pestaas: El uso de pestaas brinda la posibilidad de realizar
acciones de manera ms fluida. Se podr utilizar la herramienta
Deshacer y Rehacer independientemente en cada una de las
pestaas.
Barras de tareas personalizables: Se pueden elegir los botones
que aparezcan o desaparezcan de las barras segn las
necesidades.
39
El entorno de Trabajo
Barra de Titulo
Barra de Men
Administracin de Sitios
Barra de Herramientas
Barras de Formato
Ventana de rea de edicin
Barra de modo de Edicin

Explorador del DOM
Barra de Estado
40
Creando un sitio web

KompoZer nos permitir trabajar directamente sobre el sitio web en
Internet (servidor externo) o con archivos en el sistema local.
Para mantener organizados todos los archivos, es necesario crear un
sitio web.
Seleccionar:
Men Editar
Configuracin de Publicacin o
41
Propiedades de la Pgina
Formato Titulo y propiedades de la pgina
Es recomendable ingresar
estos datos ya que algunos
buscadores lo usan para
indexar la pgina a su Base
de Datos.
Podemos indicar si esta
pgina se trata de una
plantilla que usaremos en
futuros diseos.
42
Otras Operaciones tiles
43
Actividad 1
1. Iniciar el programa Kompozer
2. Crear un sitio nuevo
3. Abrir un documento en blanco
4. Escribir algn texto en el modo Diseo
5. Cambiar el tamao de las letras
6. Cambiar el color de las letras

7. Guardar los cambios
8. Ponerle un ttulo
9. Ver y analizar el cdigo generado usando el modo Cdigo

fuente del navegador.
44
Actividad 2
Utilizando Kompozer, disear una pgina web que muestre una tabla
como la que se muestra en la imagen.
45
Actividad 3
Crear una pgina Web que incluya:
Ttulos, prrafos
Una imagen
Un men con enlaces a otras pginas realizado con una
lista desordenada
Etctera
46
Referencias
World Wide Web Consortium (W3C): http://www.w3.org
Validar el cdigo: http://www.validator.w3.org/
Test de Accesibilidad Web: http://www.tawdis.net
Wikipedia: http://es.wikipedia.org/wiki/XHTML
Algunas definiciones: http://www.usabilidadweb.com.ar/sgml_html_xml.php
Librosweb: http://www.librosweb.es/xhtml/index.html
Wikipedia: http://es.wikipedia.org/wiki/Accesibilidad_web
AMAYA: http://www.w3.org/Amaya/
Kompozer: http://www.difundefirefox.com/kompozer
APTANA Estudio 3: http://www.aptana.com/products/studio3/download
HTML4.01: http://html.conclase.net/w3c/html401-es/index/elements.html
Hosting Gratuito: www.000webhost.com
Registrar Dominio: www.nic.ar
Plantillas gratis: http://www.oswt.co.uk/
47
Dudas?

HTML2

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML2

Uploaded by

Copyright:

Available Formats

El lenguaje de marcas

Confucio: Filsofo chino

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Estructura general de una Pgina Web

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Evolucin del HTML y CSS

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

HTML (Hyper Text Markup Language)

Lenguaje con el que se escriben paginas web.

Interpretan el cdigo HTML de la pgina.

Editores Visuales: (generan basura)

Macromedia Dreamweaver, Microsoft Frontpage,

Editores de texto.(solo lo necesario)

Wordpad o el Bloc de notas

Ejemplo de una pgina HTML

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Estructura de un documento HTML

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Estructura de una Etiqueta o Tag

Cie rre d e etiq u et a

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Etiquetas para definir la estructura

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Puede contener las siguientes etiquetas o tag:

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Clasificacin segn su Funcin

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Clasificacin segn su Funcin

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Clasificacin segn su Funcin

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Clasificacin segn su Funcin

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

&nbsp espacio en blanco

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

SRC=ruta_de_la_imagen/nombre.gif" (La ruta puede ser una

ALIGN="alineacin" (top, bottom, left, right, middle)

VSPACE=Margen vertical alrededor de la imagen (pixeles)

HSPACE=Margen horizontal alrededor de la imagen (pixeles)

Ejemplo: <img style="width: 300px; height: 168px;" alt="Imagen de

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Etiquetas <div> y <spam>

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Dividiendo en secciones una pgina

Analizar el Ejemplo 004

Una tabla se define entre las etiquetas:

Los formularios permiten interaccin entre los

Consultas a bases de datos

Por medio de:

El tratamiento de los datos recibidos en el servidor

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Optgroup: permite agrupar lgicamente opciones

Analizar el Ejemplo 006

Software tiles para desarrollo Web

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Seminario de Computacin - Ao 2015 - UNSa Sede Regional Orn

Ventana de rea de edicin

Barra de modo de Edicin