Curso HTML CSS 1/4

3,136 views

Published on

Clase 1/4. Introducción CSS

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,136
On SlideShare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Curso HTML CSS 1/4

    1. 1. Curso HTML / CSS Primera Sesión
    2. 2. Presentación Matías Alejo García mailto: [email_address] msn:matias_alejo@hotmail.com http://linkedin.com/in/matias
    3. 3. Formato <ul><li>4 sesiones de 3 horas. </li></ul><ul><li>Dos Sábados, de 9 a 12, de 13 a 16. </li></ul><ul><li>1 intervalo por sesión. </li></ul><ul><li>70% de Asistencia </li></ul>
    4. 4. Temas a tratar <ul><li>Introducción </li></ul><ul><ul><li>HTML. Historia. Versiones. CSS. </li></ul></ul><ul><ul><li>HTTP y tipos de sitios web. </li></ul></ul><ul><li>HTML </li></ul><ul><ul><li>Estructura y sintáxis. </li></ul></ul><ul><ul><li>Secciones y elementos. </li></ul></ul><ul><li>Elementos. </li></ul><ul><ul><li>Clasificación. Ejemplos </li></ul></ul><ul><li>CSS </li></ul><ul><ul><li>Referencia. Sintaxis. </li></ul></ul><ul><ul><li>Elementos y selectores. </li></ul></ul><ul><ul><li>Layout tipicos </li></ul></ul><ul><li>SEO </li></ul>
    5. 5. Recursos Bibliográficos <ul><li>W3C. World Wide Web Consortium </li></ul><ul><ul><ul><li>http:// www.w3c.org </li></ul></ul></ul><ul><li>W3 Schools </li></ul><ul><ul><ul><li>http://www.w3schools.com </li></ul></ul></ul><ul><li>HTML Code Tutorial </li></ul><ul><ul><li>http://www.htmlcodetutorial.com </li></ul></ul><ul><li>HTML Dog </li></ul><ul><ul><li>http://www.htmldog.com </li></ul></ul>
    6. 6. Conocimientos Previos? <ul><li>Experiencia en HTML? </li></ul><ul><li>Experiencia en Diseño? </li></ul><ul><li>Experiencia con programas gráficos? </li></ul><ul><li>Experiencia de programación? </li></ul><ul><li>Experiencia con otros lenguajes de markup? </li></ul>
    7. 7. Primera Sesión <ul><li>Introducción </li></ul><ul><ul><li>HTML. Historia. Versiones. CSS. </li></ul></ul><ul><ul><li>HTTP y tipos de sitios web. </li></ul></ul><ul><li>HTML </li></ul><ul><ul><li>Estructura y sintáxis. </li></ul></ul><ul><ul><li>Secciones y elementos. </li></ul></ul><ul><li>Elementos. </li></ul><ul><ul><li>Clasificación. Ejemplos </li></ul></ul><ul><li>CSS </li></ul><ul><ul><li>Referencia. Sintaxis. </li></ul></ul><ul><ul><li>Elementos y selectores. </li></ul></ul><ul><ul><li>Layout tipicos </li></ul></ul><ul><li>SEO </li></ul>
    8. 8. HTML | Definición
    9. 9. HTML <ul><li>Tim Berners Lee </li></ul><ul><li>Robert Cailliau </li></ul><ul><ul><li>CERN - 1989 </li></ul></ul><ul><li>La primera especificación incluía 22 tags. </li></ul>HTML – Hyper Text Markup Language
    10. 10. HTML <ul><li>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: </li></ul><ul><ul><li>Por ejemplo ** así **. </li></ul></ul><ul><ul><li>= título = </li></ul></ul><ul><ul><li>chapter{Introducción} <h1> Título </h1> </li></ul></ul><ul><ul><li>.Sh Título </li></ul></ul>
    11. 11. HTML <ul><li>Markup Language </li></ul><ul><ul><ul><li>Markup Procedural </li></ul></ul></ul><ul><ul><ul><ul><ul><li>Indica la forma específica de presentar un texto. Los marcadores son visibles al editor. Por ejemplo, puede contener indicadores para centrar, subrayar, etc. </li></ul></ul></ul></ul></ul><ul><ul><ul><li>Markup Descriptivo </li></ul></ul></ul><ul><ul><ul><ul><ul><li>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. </li></ul></ul></ul></ul></ul>
    12. 12. HTML <ul><li>Hipertexto </li></ul><ul><ul><li>Textos en computadoras, enlazados de manera tal que el lector puede ver información relacionada en forma no secuencial. </li></ul></ul><ul><ul><li>Estos puntos de enlaces son “hyperlinks” y son la clave de la innovación. </li></ul></ul><ul><ul><li>Ejemplos: Mediawiki, Texinfo, Ayuda en Windows (CHM). </li></ul></ul>
    13. 13. HTML <ul><li>HTML – Hyper Text Markup Language </li></ul><ul><ul><li>Combina hipertexto + markup procedural + markup descriptivo + referencias embebidas a otros documentos (imágenes, etc) + formularios interactivos + códigos de scripting </li></ul></ul>
    14. 14. 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!
    15. 15. HTML Podemos indicar la versión exacta de nuestro documento HTML mediante un encabezado especial: <!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <!DOCTYPE HTML PUBLIC &quot;ISO/IEC 15445:1999//DTD HTML//EN&quot;> Ver ejemplos
    16. 16. HTML | Ejemplos
    17. 17. 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”>&eacute;sta sala.</a>. </body> </html> Elementos Procedurales ó Presentacionales Descriptivos o Estructurales Hipertexto Atributos Entidades de referencias o referencias numéricas.
    18. 18. HTML <html> <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot;> <title>Google</title> </head> <body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 > <center> <img alt=&quot;Google&quot; height=110 src=&quot;/intl/en_ALL/images/logo.gif&quot; width=276><br><br> <form action=&quot;/search&quot; name=f> <table cellpadding=0 cellspacing=0><tr valign=top><td width=25%>&nbsp;</td><td align=center nowrap> <input name=hl type=hidden value=en> <input maxlength=2048 name=q size=55 title=&quot;Google Search&quot; value=&quot;&quot;><br> <input name=btnG type=submit value=&quot;Google Search&quot;> <input name=btnI type=submit value=&quot;I'm Feeling Lucky&quot;></td> <td nowrap width=25%> <font size=-2>&nbsp;&nbsp;<a href=/advanced_search?hl=en>Advanced Search</a><br>&nbsp;&nbsp;<a href=/preferences?hl=en>Preferences</a><br>&nbsp;&nbsp;<a href=/language_tools?hl=en>Language Tools</a></font></td></tr> </table> </form><br><br> <p><font size=-2>&copy;2007 Google</font></p></center> </body> </html>
    19. 19. HTML | Browsers <ul><li>Browsers </li></ul><ul><ul><li>IE, Firefox, Safari ...? </li></ul></ul><ul><ul><li>Fuentes del documento HTML. </li></ul></ul><ul><ul><li>Extensiones. Firebug, Web developer </li></ul></ul><ul><li>Ver demo de Firefox con Firebug </li></ul><ul><ul><li>Ver fuente </li></ul></ul><ul><ul><li>Examinar con firebug </li></ul></ul><ul><ul><li>Edit HTML en WebDeveloper </li></ul></ul>
    20. 20. HTML | Browsers <ul><li>Browsers </li></ul><ul><ul><li>IE, Firefox, Safari ...? </li></ul></ul>
    21. 21. HTML <ul><li>HTML Semático </li></ul><ul><ul><li>Evita elementos presentacionales (!) </li></ul></ul><ul><ul><li>Utilizar elementos para diferenciar contenidos en frases. </li></ul></ul><ul><ul><li>=> Delega la presentación a CSS! </li></ul></ul><ul><ul><li>Es más fácil de mantener, más compatible (con diferentes agentes), más coherente y más simple de indexar. </li></ul></ul>
    22. 22. HTML <ul><li>Los documentos HTML usualmente se distribuyen por </li></ul><ul><ul><ul><li>WWW (HTTP) </li></ul></ul></ul><ul><ul><ul><li>Email (SMTP) </li></ul></ul></ul><ul><li>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. </li></ul><ul><li>=> Ej. wikipedia.org/en/blue </li></ul>
    23. 23. HTTP <ul><li>H TTP: Hyper Text Transfer Protocol </li></ul><ul><li>Es un protocolo de transporte de uso general. Se utiliza para transportar documentos de diferentes tipos (HTML, PDF, imagenes, etc). </li></ul><ul><li>Tiene sus headers y sus respuestas. </li></ul><ul><li>Estos indican el browser, el tipo de contenido, las políticas de cache, etc, etc. </li></ul><ul><li>Ver ejemplo de Live headers en Firefox. </li></ul><ul><li>User-Agent? </li></ul><ul><li>Métodos, y respuestas. </li></ul>
    24. 24. HTTP | URLs <ul><li>Los recursos se identifican mediante un URL (uniform resource locator). </li></ul><ul><li>Un URL tiene la forma: </li></ul><ul><ul><li>protocolo://host:puerto/path/file?key1=value1&key2=value2#hash </li></ul></ul><ul><li>Ejemplos: </li></ul><ul><ul><li>http://www.clarin.com </li></ul></ul><ul><ul><li>http://www.lanacion.com/notas?id=5345 </li></ul></ul><ul><ul><li>http://www.elmercurio.com/articulo/15235#nota </li></ul></ul><ul><ul><li>mailto://juan@hotmail.com </li></ul></ul><ul><ul><li>https://galicia.com </li></ul></ul><ul><ul><li>http://www.juan.com:6161 </li></ul></ul><ul><ul><li>http://www.notas.com?desde=2006 </li></ul></ul>
    25. 25. HTTP <ul><li>H TTP: Hyper Text Transfer Protocol </li></ul><ul><li>1 Pedido, 1 respuesta. </li></ul><ul><li>Un recurso a la vez. </li></ul><ul><li>Métodos más usados: GET y POST </li></ul><ul><ul><li>GET: Obtiene un recurso del servidor. </li></ul></ul><ul><ul><li>POST: Envía información a un recurso del servidor y luego lo obtiene. Se utiliza para formularios. </li></ul></ul>
    26. 26. HTTP <ul><li>Respuestas del servidor: </li></ul><ul><ul><li>1xx : Información </li></ul></ul><ul><ul><li>2xx : Exito 200 OK </li></ul></ul><ul><ul><li>3xx : Redirección 307: Redirección temporal </li></ul></ul><ul><ul><li>4xx : Error en el medido 404: No encontrado. </li></ul></ul><ul><ul><li>5xx : Error en el servidor 501: Error interno en el servidor </li></ul></ul><ul><li>Ver + ejemplos de cada uno de Live headers en Firefox. </li></ul>
    27. 27. Tipos de sitios <ul><li>Sitos Estáticos </li></ul><ul><ul><li>Los contenidos (html, imagenes, etc) están almacenados en el servidor como archivos. </li></ul></ul><ul><ul><li>Cuando un cliente los requiere, el servidor envia el contenido de los archivos. </li></ul></ul><ul><li>Sitios dinámicos </li></ul><ul><ul><li>No existen archivos html, estos son generados dinámicamente en el momento que son requeridos </li></ul></ul><ul><ul><li>Generalmente se basan en “templates” de html, que son completados por aplicaciones ó son HTMLs que tiene partes que se modifican dinámicamente (PHP, Embperl). </li></ul></ul>
    28. 28. Tipos de sitios <ul><li>Sitos Estáticos </li></ul><ul><ul><li>+ No requieren conocimientos de programación </li></ul></ul><ul><ul><li>+ Son rápidos </li></ul></ul><ul><ul><li>- Son difíciles de mantener </li></ul></ul><ul><ul><li>- No pueden adaptarse al visitante </li></ul></ul><ul><li>Sitios dinámicos </li></ul><ul><ul><li>+ Se adaptan al visitante </li></ul></ul><ul><ul><li>+ Permiten manejo de sesiones </li></ul></ul><ul><ul><li>- Requieren hosting especial </li></ul></ul><ul><ul><li>- Aumentan el tiempo offline </li></ul></ul>

    ×