Curso HTML CSS 1/4

Curso HTML / CSS Primera Sesión

Presentación Matías Alejo García mailto: [email_address] msn:matias_alejo@hotmail.com http://linkedin.com/in/matias

Formato

4 sesiones de 3 horas.

Dos Sábados, de 9 a 12, de 13 a 16.

1 intervalo por sesión.

70% de Asistencia

Temas a tratar

Introducción

HTML. Historia. Versiones. CSS.

HTTP y tipos de sitios web.

HTML

Estructura y sintáxis.

Secciones y elementos.

Elementos.

Clasificación. Ejemplos

CSS

Referencia. Sintaxis.

Elementos y selectores.

Layout tipicos

SEO

Recursos Bibliográficos

W3C. World Wide Web Consortium

http:// www.w3c.org

W3 Schools

http://www.w3schools.com

HTML Code Tutorial

http://www.htmlcodetutorial.com

HTML Dog

http://www.htmldog.com

Conocimientos Previos?

Experiencia en HTML?

Experiencia en Diseño?

Experiencia con programas gráficos?

Experiencia de programación?

Experiencia con otros lenguajes de markup?

Primera Sesión

Introducción

HTML. Historia. Versiones. CSS.

HTTP y tipos de sitios web.

HTML

Estructura y sintáxis.

Secciones y elementos.

Elementos.

Clasificación. Ejemplos

CSS

Referencia. Sintaxis.

Elementos y selectores.

Layout tipicos

SEO

HTML | Definición

HTML

Tim Berners Lee

Robert Cailliau

CERN - 1989

La primera especificación incluía 22 tags.

HTML – Hyper Text Markup Language

HTML

Markup Language: Conjunto de reglas sintácticas que permiten combinar texto e información adicional sobre ese texto sobre la estructura o la presentación del mismo. Ejemplos: TeX, SGML, XML, HTML, XHTML, Troff, WIKI. + ejemplos:

Por ejemplo ** así **.

= título =

chapter{Introducción} <h1> Título </h1>

.Sh Título

HTML

Markup Language

Markup Procedural

Indica la forma específica de presentar un texto. Los marcadores son visibles al editor. Por ejemplo, puede contener indicadores para centrar, subrayar, etc.

Markup Descriptivo

Se enfoca en la estructura del texto y no en la presentación. Por ejemplo puede contenter indicadores para señalizar el título, un sección, etc.

HTML

Hipertexto

Textos en computadoras, enlazados de manera tal que el lector puede ver información relacionada en forma no secuencial.

Estos puntos de enlaces son “hyperlinks” y son la clave de la innovación.

Ejemplos: Mediawiki, Texinfo, Ayuda en Windows (CHM).

HTML

HTML – Hyper Text Markup Language

Combina hipertexto + markup procedural + markup descriptivo + referencias embebidas a otros documentos (imágenes, etc) + formularios interactivos + códigos de scripting

Versiones HTML HTML 1995 => 2.0 (IETF: Internet Task Force) 1997 => 3.2 (W3C) (Netscape, Mosaic) 1997 => 4.0 (W3C) Tres versiones: Strict, Transitional, Frameset. XHTML 2000 => 1.0 2001 => 1.1 XHMTL 2.0? HTML5? => Working drafts!

HTML Podemos indicar la versión exacta de nuestro documento HTML mediante un encabezado especial: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN"> Ver ejemplos

HTML | Ejemplos

HTML <html> <head> <title>Curso HTML</title> </head> <body class=”azul” onload=”start()”> <h1>Curso HTML<h1> Es curso comienza <b>a las 9</b>. En <a href=”/sala”>ésta sala.</a>. </body> </html> Elementos Procedurales ó Presentacionales Descriptivos o Estructurales Hipertexto Atributos Entidades de referencias o referencias numéricas.

HTML <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Google</title> </head> <body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 > <center> <img alt="Google" height=110 src="/intl/en_ALL/images/logo.gif" width=276><br><br> <form action="/search" name=f> <table cellpadding=0 cellspacing=0><tr valign=top><td width=25%> </td><td align=center nowrap> <input name=hl type=hidden value=en> <input maxlength=2048 name=q size=55 title="Google Search" value=""><br> <input name=btnG type=submit value="Google Search"> <input name=btnI type=submit value="I'm Feeling Lucky"></td> <td nowrap width=25%> <font size=-2>  <a href=/advanced_search?hl=en>Advanced Search</a><br>  <a href=/preferences?hl=en>Preferences</a><br>  <a href=/language_tools?hl=en>Language Tools</a></font></td></tr> </table> </form><br><br> <p><font size=-2>©2007 Google</font></p></center> </body> </html>

HTML | Browsers

Browsers

IE, Firefox, Safari ...?

Fuentes del documento HTML.

Extensiones. Firebug, Web developer

Ver demo de Firefox con Firebug

Ver fuente

Examinar con firebug

Edit HTML en WebDeveloper

HTML | Browsers

Browsers

IE, Firefox, Safari ...?

HTML

HTML Semático

Evita elementos presentacionales (!)

Utilizar elementos para diferenciar contenidos en frases.

=> Delega la presentación a CSS!

Es más fácil de mantener, más compatible (con diferentes agentes), más coherente y más simple de indexar.

HTML

Los documentos HTML usualmente se distribuyen por

WWW (HTTP)

Email (SMTP)

Normalmente la extensión es .html ó .htm => No es obligatoria. En el protocolo subyacente se indica la naturaleza del documento, por lo que la extensión es redundante.

=> Ej. wikipedia.org/en/blue

HTTP

H TTP: Hyper Text Transfer Protocol

Es un protocolo de transporte de uso general. Se utiliza para transportar documentos de diferentes tipos (HTML, PDF, imagenes, etc).

Tiene sus headers y sus respuestas.

Estos indican el browser, el tipo de contenido, las políticas de cache, etc, etc.

Ver ejemplo de Live headers en Firefox.

User-Agent?

Métodos, y respuestas.

HTTP | URLs

Los recursos se identifican mediante un URL (uniform resource locator).

Un URL tiene la forma:

protocolo://host:puerto/path/file?key1=value1&key2=value2#hash

Ejemplos:

http://www.clarin.com

http://www.lanacion.com/notas?id=5345

http://www.elmercurio.com/articulo/15235#nota

mailto://juan@hotmail.com

https://galicia.com

http://www.juan.com:6161

http://www.notas.com?desde=2006

HTTP

H TTP: Hyper Text Transfer Protocol

1 Pedido, 1 respuesta.

Un recurso a la vez.

Métodos más usados: GET y POST

GET: Obtiene un recurso del servidor.

POST: Envía información a un recurso del servidor y luego lo obtiene. Se utiliza para formularios.

HTTP

Respuestas del servidor:

1xx : Información

2xx : Exito 200 OK

3xx : Redirección 307: Redirección temporal

4xx : Error en el medido 404: No encontrado.

5xx : Error en el servidor 501: Error interno en el servidor

Ver + ejemplos de cada uno de Live headers en Firefox.

Tipos de sitios

Sitos Estáticos

Los contenidos (html, imagenes, etc) están almacenados en el servidor como archivos.

Cuando un cliente los requiere, el servidor envia el contenido de los archivos.

Sitios dinámicos

No existen archivos html, estos son generados dinámicamente en el momento que son requeridos

Generalmente se basan en “templates” de html, que son completados por aplicaciones ó son HTMLs que tiene partes que se modifican dinámicamente (PHP, Embperl).

Tipos de sitios