Envío de mensajes de correo
< A HREF = “mailto:jlhueso@mat.upv.es?tema”>
Inclusión de imágenes
Enlace a la imagen
< IMG SRC = “imagen.gif” ALT = “Texto”> < /IMG>
La imagen como enlace
< A HREF = “dirección de destino”>
< IMG SRC = “imagen.gif”> < /IMG> < /A>
Formato de la imagen
Borde
< IMG SRC = “imagen.gif” BORDER = “0”> < /IMG>
Tamaño
< IMG SRC = “imagen.gif” BORDER = “0”> < /IMG>
Alineación del texto
Códigos de color
Sistema con 16 dígitos
1 2 3 4 5 6 7 8 9 A B C D E F
#rrggbb
#FFFFFF ? Blanco
#000000 ? Negro
#FFFF00 ? Amarillo
Colores en una página
Texto normal
< BODY TEXT = “black”>
Texto del enlace
< BODY LINK = “blue”>
Enlace visitado
< BODY VLINK = “#rrggbb”>
Enlace activo (en descarga)
< BODY ALINK = “#rrggbb”>
Fondo de la página
Color
< BODY BGCOLOR = “white”>
Imagen
< BODY BACKGROUND = “imagen.gif”>
Vamos a hablar de…HTML
Conceptos del lenguaje
Estructura para documentos
Herramientas usadas para crear documentos
Buenas prácticas en la publicación de documentos
Problemas que se nos pueden presentar
HTML: qué es?
Lenguaje que da formato
Define la sintáxis y ubicación de imágenes, instrucciones y objetos al navegador
Posibilidad de conectar un documento con otros, o con otros recursos en Internet a través de hipertexto
HTML: qué no es?
No es un procesador de palabra
No es una herramienta de escritorio para diagramación
No es un lenguaje de programación
No es multimedia
Como funciona?
Cliente
(Gp:) Cliente:
Explorer
Netscape
Dame el
archivo x
Aquí está
Protocolo http
Servidor
Remoto
La Telaraña Mundial
Múltiples usos:
Educación
Investigación
Mercadeo
Desarrollo (ddhh y paz, medio ambiente, equidad, diversidad, hábitat, comercio justo)
Estándares de HTML
HTML 1 Desarrollado en CERN
HTML 2.0 Incluye mejoras en NCSA Mosaic (formularios e imágenes)
HTML 3.2 Mejoras para controlar el formateo de tablas, etc.
HTML 4.0 Mejoras para publicaciones multiplataforma (CSS, XML, WAP, DHTML)
Terminología
HTTP: Hypertext Transfer Protocol Parámetros de comunicación cliente – servidor Web
HTML: Hypertext Markup Language Lenguaje nativo para documentos publicados en el Web independiente del tipo de plataforma.
URL: Uniform Resource Locator
Dirección de un objeto en el Web http://www.colnodo.org.co/
Fundamentos
Rótulos < H1>Inicio< /H1>
No sensitivos a mayúsculas y minúsculas < H1> o < h1>
Algunos atributos pueden ser sensibles a mayúsculas y minúsculas como los nombre de archivos, por ejemplo.
Normalmente van en pares denotando inicio y fin < H1> y < /H1>
Documentos Básicos
Deben incluir
< HEAD> y < /HEAD> contiene información sobre el documento
< BODY> y < /BODY> es el contenido principal del documento
< HTML> y < /HTML> contiene los 2 elementos anteriores
2 Ejemplos…
< TITLE>Mi Primer Documento< /TITLE>
Este es mi primer documento HTML.
< HTML>
< HEAD>
< TITLE>Un mejor documento< /TITLE>
< /HEAD>
< BODY>
< P>Novedades sobre el < EM>World Wide Web< /EM> disponible en < A HREF="http://www.w3.org/">W3C< /A>< /P>
< /BODY>
< /HTML>
doc1.html
doc2.html
Elementos Básicos
Rótulos Básicos < HEAD> < TITLE> < P>
Rótulos de Formato Físico < B> < I>
Rótulos de Formato Lógico
< STRONG> < EM> < UL> < LI>
Enlaces de Hipertexto < A HREF="…">
Caracteres Especiales
Permiten que diferentes navegadores hagan visibles los caracteres diagráficos de los idiomas diferentes al inglés:
á é í ó ú á
à è ì ò ù à
ñ ç ö ñ
Tablas
Organización comparativa de información
Ubicación dentro de la página
Múltiples atributos para especificar
Formularios
Interactividad
Retroalimentación
Recolección de datos
Pueden tabularse y analizarse
Respuestas personalizadas
Aceptado por todos los navegadores
Creando documentos
Pueden ser creados usando editores simples como Notepad, vi, emacs.
Ventajas
Es barato
Se aprende a comprender el lenguaje HTML
Desventajas
Es fácil cometer errores
Necesita comprender la sintáxis HTML
Herramientas avanzadas
Interface amigable y fácil de usar para crear documentos
Ocultan a disposición las complejidades del código HTML
Pueden ser herramientas autónomas o insertas en procesadores de texto
 Página anterior | Volver al principio del trabajo | Página siguiente  |