Curso HTML CSS 1/4

  • 2,784 views
Uploaded on

Clase 1/4. Introducción CSS

Clase 1/4. Introducción CSS

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,784
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Curso HTML / CSS Primera Sesión
  • 2. Presentación Matías Alejo García mailto: [email_address] msn:matias_alejo@hotmail.com http://linkedin.com/in/matias
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. Conocimientos Previos?
    • Experiencia en HTML?
    • Experiencia en Diseño?
    • Experiencia con programas gráficos?
    • Experiencia de programación?
    • Experiencia con otros lenguajes de markup?
  • 7. 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
  • 8. HTML | Definición
  • 9. HTML
    • Tim Berners Lee
    • Robert Cailliau
      • CERN - 1989
    • La primera especificación incluía 22 tags.
    HTML – Hyper Text Markup Language
  • 10. 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
  • 11. 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.
  • 12. 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).
  • 13. 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
  • 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. 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. HTML | Ejemplos
  • 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. 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. 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
  • 20. HTML | Browsers
    • Browsers
      • IE, Firefox, Safari ...?
  • 21. 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.
  • 22. 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
  • 23. 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.
  • 24. 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
  • 25. 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.
  • 26. 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.
  • 27. 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).
  • 28. 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