HTML y CSS Ignacio Saavedra Enero 2016 Basado en clases de Jeff Eppinger Liceo Zapallar

¿Qué es Internet? Es una red de computadoras Consecuencia de la Guerra Fría Creada en 1969 en Estados Unidos: se llamó Arpanet Cooperación de las universidades y el Departamento de Defensa

¿Qué es Internet? Incluye distintos servicios: Correo electrónico. 1971, Ray Tomlinson Chat (o IRC).1988, en Finlandia Transferencia de archivos Foros de discusión World Wide Web, 1989, Tim Berners Lee

1943

“Xerox Alto”, 1973 Primera microcomputadora Palo Alto Research Center

La humanización del computador Computador Instrumento de cálculo Reservado para expertos Inaccesible Uso colectivo En universidades y centros de Inv Computador Herramienta de comunicación Uso cotidiano, universal Uso personal En la casa, el comercio y todos lados

¿Qué es la Web? “La cara gráfica de Internet” (Piscitelli) La parte multimedia de Internet Es un espacio de almacenamiento y un sistema de publicación mundial al que se accede en cualquier momento y desde cualquier lugar Compuesta por millones de sitios web, cada uno de los cuales puede tener varias páginas Web: Documentos de Hipertexto usando Internet

Cómo funciona la Web? Browser Servidor HTML Archivos Hardware Usuario HTTP Request HTTP Response

10 Algunas Cosas que considerar Muchas aplicaciones que antes eran nativas hoy son ofrecidas en la web – Ejemplo: Microsoft Office => Google Apps Outlook => Gmail & Google Calendar Word => Google Docs Excel => Google Sheets – Otros Ejemplos Banco Compras Online Pronto el único programa que un usuario promedio necesitará es … un browser

La Web estática Publicando información en la web – Es cómo publicar un libro – Cada “edición” está fija. Es increíblemente útil – Cuanto buscas en Google básicamente lo que encuentras es contenido estático.

La Web Dinámica Ir de Web Estática a Web Dinámica requiere: – Generar HTML con algún lenguaje. Nosotros usaremos Javascript

URLs: Son las direcciones de la Web URL –Uniform Resource Locator – Especifica la dirección. Ejemplos:

El Browser (navegador) Interpreta el HTML Guarda localmente una parte de los archivos Presente en PC y también celulares

El mercado de los browsers Mobile/Tablet (23%) Source: Net ApplicaKons hOp://marketshare.hitslink.com Desktop (77%)

HTML -­‐-­‐ Hyper-­‐Text Markup Language Una forma de mostrar documentos independiente del dispositivo Especifica formato – Ej: párrafos, negrita, tamaño Links a otros documentos Imágenes Permite que los usuarios introduzcan datos. – Formularios

Terminología El HTML contiene tags y contenido Tags – Tag tienen comienzo y final. Lo que está entre ellos es el contenido del tag. E.g., Hola – Caracteres especiales comienza con & E.g., < > " & – Atributos – Algunos tabs reciben atributos: E.g., Contenido – Todo lo demás (casi)

Hello World

Algunas cosas que notar “on” y “off” tags Tags en minúsculas Puedes cambiar muchas cosas – Fuente, tamaño, negrita &tags para caracteres especiales

10/27/15Copyright (c) 2015 J.L. Eppinger50 HTML & CSS CSS nos da el formateo. Es mejor en términos prácticos – Podemos cambiar el formato independiente del contenido