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
Sitos Estáticos
+ No requieren conocimientos de programación
+ Son rápidos
- Son difíciles de mantener
- No pueden adaptarse al visitante
Sitios dinámicos
+ Se adaptan al visitante
+ Permiten manejo de sesiones
- Requieren hosting especial
- Aumentan el tiempo offline

http://www.slideshare.net	12
http://www.ggi-nemesis.com	6
http://ggi-nemesis.com	6
file://	1
http://www.lmodules.com	1

Curso HTML CSS 1/4

by Matías Alejo Garcia on Nov 10, 2007

Accessibility

Tags

Upload Details

Usage Rights

5 Embeds 26

Statistics

Curso HTML CSS 1/4 — Presentation Transcript