advertisement

Curso HTML CSS 1/4

60 %
40 %
advertisement
Information about Curso HTML CSS 1/4

Published on November 10, 2007

Author: matias.alejo.garcia

Source: slideshare.net

Description

Clase 1/4. Introducción CSS
advertisement

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

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

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

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?

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

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

Tim Berners Lee

Robert Cailliau

CERN - 1989

La primera especificación incluía 22 tags.

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

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.

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).

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

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 &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

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”>&eacute;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=&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>

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

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 ...?

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 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

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.

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

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.

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.

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).

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

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

Add a comment

Related pages

HTML e CSS | Codecademy

Aprenda os fundamentos do desenvolvimento web com HTML e CSS e crie seu próprio website ao final desse curso.
Read more

Fundamentos de Web Design I - HTML/CSS 1/4 - YouTube

Introdução ao HTML. ... This feature is not available right now. Please try again later.
Read more

Curso de HTML y CSS | Curso Online - DevCode | Aprende a ...

En este curso aprenderemos a maquetar sitios Web con HTML5 y a brindar estilos con CSS. No necesitas conocimientos previos, ... Curso de HTML y CSS.
Read more

Curso HTML e CSS - Aula 1 - Introdução - YouTube

Curso HTML e CSS - Aula 3 - Como Baixar e Instalar o Notepad++ - Duration: ... Curso de CSS - Aula 1 (Introdução ao CSS) - Duration: 15:34.
Read more

HTML & CSS | Codecademy - Learn to code | Codecademy

HTML & CSS. Learn how to create websites by structuring and styling your pages with HTML and CSS. Lessons. 0%. Start. Want more practice and review?
Read more

Comenzando con HTML + CSS - World Wide Web Consortium (W3C)

Para HTML y CSS, lo único que necesitamos son archivos en texto plano. El paso 1 consiste en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el ...
Read more

CSS Tutorial - W3Schools Online Web Tutorials

CSS is a stylesheet language that describes the presentation of an HTML (or XML) document. CSS describes how ... This CSS tutorial contains hundreds of CSS ...
Read more

Taller de Maquetación (HTML + CSS) - HTML5 y CSS3 curso ...

Aprendé a hacer sitios y páginas web con HTML 5 y CSS 3; ... ¿Qué páginas podré construir luego del curso? Cualquier página.
Read more

HTML(5) Tutorial - W3Schools Online Web Tutorials

This HTML tutorial contains hundreds of HTML examples. ... HTML, CSS, JavaScript, PHP, jQuery, Bootstrap and XML Certifications. COLOR PICKER. LEARN MORE:
Read more