html 101

Universidad Diego Portales

Escuela de Periodismo

Medios IV – Tecnologías Digitales 2008

HTML Básico

Primeros Pasos hacia el Web




En el principio estaba Tim

Tim Berners Lee




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




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




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




Un ejemplo

<HTML><HEAD><TITLE>Ejemplo 1</TITLE></HEAD><BODY>Hola mundo</BODY>

</HTML>




Las etiquetas

• Son marcadores que afectan la forma en que un texto es presentado

• Se presentan entre los signos < y >• <marcador>texto</marcador>




Etiquetas para el texto

• Texto normal:

• <p>texto</p> texto

• Texto destacado:

• Negritas <strong>texto</strong> texto

• Cursivas <em>texto</em> texto




Etiquetas para el texto

• Para titulares

<H1>texto</H1>

Mientras más grande el número, más importante es el título




Tabla de Colores y su equivalente en

Números Hexadecimales

http://www.aulaclic.es/html/b_2_2_1.htm




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”




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




Para aprender y saber…

• Hay que saber dónde mirar…

Código FuenteCódigo Fuente




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/

html 101

Technology