Download - Html 101
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
HTML Básico
Primeros Pasos hacia el Web
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
En el principio estaba Tim
Tim Berners Lee
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Qué hizo?
• En 1989 inventó el World Wide WebWorld Wide Web, mientras trabajaba en el CERN, Laboratorio Europeo de Física de Partículas.
• En 1990 escribió el primer programa servidor y clienteprograma servidor y cliente de web
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Qué hizo?
• Creó la tecnología que se reconoce por tres siglas:
– URLURL: Uniform Resource Locator• Dónde está la información
– HTMLHTML: Hyper Text Markup Language• Cómo se escribe la información
– HTTPHTTP: Hyper Text Transfer Protocol• Cómo se mueve la información entre computadores
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
HTML
• Un lenguaje que marca el texto con etiquetas especiales para darle un formato especial que:– Puede leerse desde cualquier computadora– No requiere traducción de formato– Tiene reglas estándares de uso– Es sólosólo texto
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Un ejemplo
<HTML><HEAD><TITLE>Ejemplo 1</TITLE></HEAD><BODY>Hola mundo</BODY>
</HTML>
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Las etiquetas
• Son marcadores que afectan la forma en que un texto es presentado
• Se presentan entre los signos < y >• <marcador>texto</marcador>
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Etiquetas para el texto
• Texto normal:
• <p>texto</p> texto
• Texto destacado:
• Negritas <strong>texto</strong> texto
• Cursivas <em>texto</em> texto
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Etiquetas para el texto
• Para titulares
<H1>texto</H1>
Mientras más grande el número, más importante es el título
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Tabla de Colores y su equivalente en
Números Hexadecimales
http://www.aulaclic.es/html/b_2_2_1.htm
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Cómo enlazar páginas
• Se usa la etiqueta <a href> ... </a>
• Por ejemplo:– <a href=“/index.html”>Portada</a>– Genera el link a Portada– Puede abrirse en una nueva ventana con el modificador
TARGET=“_blank”
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Cómo enlazar a un correo
• Se usa la etiqueta <a href> </a> y se combina con mailto
• Por ejemplo:– <a href=“mailto:[email protected]”>Envíale un mail a Camus</a>
– Genera el link a Envíale un mail a Camus– Abre el programa de mail del usuario y en el campo To: aparece
la dirección que se indique
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Para aprender y saber…
• Hay que saber dónde mirar…
Código FuenteCódigo Fuente
Universidad Diego Portales
Escuela de Periodismo
Medios IV – Tecnologías Digitales 2008
Links para más…
• Tutoriales sobre HTML en español– http://webestilo.com/html/
• Herramientas para Webmasters– http://www.mouse.cl/2000/guia/04/11/index.htm
• Sobre Tim Berners-Lee– http://www.w3.org/People/Berners-Lee/