Curso HTML / CSS Tercera Sesión

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

Qué vimos hasta ahora? Sesión 1 Definición de HTML, diferencias markup procedural y descriptivo. Elementos y atributos. HTTP, URLs, Métodos y Headers HTTP.

Sesión 1

Definición de HTML, diferencias markup procedural y descriptivo.

Elementos y atributos.

HTTP, URLs,

Métodos y Headers HTTP.

Qué vimos hasta ahora? Sesión 2 Sintáxis HTML. Caracteres de Control. Comentarios. Entidades Estructura. head y body. Head; Title, Meta, Links

Sesión 2

Sintáxis HTML.

Caracteres de Control.

Comentarios.

Entidades

Estructura. head y body.

Head; Title, Meta, Links

Qué vimos hasta ahora? Sesión 2 Body: DIV y SPAN Hs, P, A, UL, OL (Block e inline). Otros: EM, ACRONYM, ABBR, Q, CITE TABLE, TBODY, TR, TH, TD FORM INPUT Validación W3C

Sesión 2

Body:

DIV y SPAN

Hs, P, A, UL, OL (Block e inline).

Otros: EM, ACRONYM, ABBR, Q, CITE

TABLE, TBODY, TR, TH, TD

FORM

INPUT

Validación W3C

Tercera Sesión Introducción HTML. Historia. Versiones. CSS. HTTP y tipos de sitios web. HTML Estructura y sintaxis. Secciones y elementos. Elementos. Clasificación. Ejemplos Formularios CSS Referencia. Sintaxis. Elementos y selectores. Layout tipicos SEO

Introducción

HTML. Historia. Versiones. CSS.

HTTP y tipos de sitios web.

HTML

Estructura y sintaxis.

Secciones y elementos.

Elementos.

Clasificación. Ejemplos

Formularios

CSS

Referencia. Sintaxis.

Elementos y selectores.

Layout tipicos

SEO

HTML | FORM y OTROS

HTML < IMG/> Define un link a una imagen en el documento. Tiene DOS atributos obligatorios: src : URL de la imagen (Abs o rel) alt : Texto alternativo para la imagen. Puede tener además: title, align, width, height. <img src=”/images/launch.jpg” alt=”Launch”> <img src=”http://wikipedia.com/img/logo” alt=”Wikipedia”/>

< IMG/>

Define un link a una imagen en el documento.

Tiene DOS atributos obligatorios:

src : URL de la imagen (Abs o rel)

alt : Texto alternativo para la imagen.

Puede tener además: title, align, width, height.

<img src=”/images/launch.jpg” alt=”Launch”>

<img src=”http://wikipedia.com/img/logo” alt=”Wikipedia”/>

HTML < IMG/> Define un link a una imagen en el documento. Tiene DOS atributos obligatorios: src : URL de la imagen (Abs o rel) alt : Texto alternativo para la imagen. Puede tener además: title, align, width, height. Ejemplos: <img src=”/images/launch.jpg” alt=”Launch”> <img src=”http://wikipedia.com/img/logo” alt=”Wikipedia”/>

< IMG/>

Define un link a una imagen en el documento.

Tiene DOS atributos obligatorios:

src : URL de la imagen (Abs o rel)

alt : Texto alternativo para la imagen.

Puede tener además: title, align, width, height.

Ejemplos: <img src=”/images/launch.jpg” alt=”Launch”>

<img src=”http://wikipedia.com/img/logo” alt=”Wikipedia”/>

HTML <BR/> Line Break <HR/> Horizontal Line Sólo usar en caso de emergencias...

<BR/>

Line Break

<HR/>

Horizontal Line

Sólo usar en

caso de emergencias...

HTML | Forms <FORM> Recibe dos atributos: action : URL que recibe el form method : GET o POST enctype: multipart/form-data ó application/x-form-urlencoded <LABEL> for <INPUT/> type name checked value

<FORM>

Recibe dos atributos:

action : URL que recibe el form

method : GET o POST

enctype: multipart/form-data ó application/x-form-urlencoded

<LABEL>

for

<INPUT/>

type

name

checked

value

HTML | Forms Tipos de INPUT text size maxlength disabled readonly id name >> Ver ejemplos

Tipos de INPUT

text

size

maxlength

disabled

readonly

id

name

>> Ver ejemplos

HTML | Forms Tipos de INPUT radio value checked readonly disabled id name >> Ver ejemplos

Tipos de INPUT

radio

value

checked

readonly

disabled

id

name

>> Ver ejemplos

HTML | Forms Tipos de INPUT Checkbox value checked readonly disabled id name size >> Ver ejemplos

Tipos de INPUT

Checkbox

value

checked

readonly

disabled

id

name

size

>> Ver ejemplos

HTML | Forms Tipos de INPUT <SELECT> <OPTION> value selected >> Ver ejemplos

Tipos de INPUT

<SELECT>

<OPTION>

value

selected

>> Ver ejemplos

HTML | Forms Tipos de INPUT <TEXTAREA> rows cols name id disabled readonly >> Ver ejemplos

Tipos de INPUT

<TEXTAREA>

rows

cols

name

id

disabled

readonly

>> Ver ejemplos

CSS

CSS CSS Cascade Style Sheet Lenguaje que define el estilo de una página Es interpretado por el browser. Mejora la separación contenido <-> presentación y con ellos la accesibilidad Tiene una sintáxis simple Puede estar definido en el documento HTML, o referido como un recurso externo.

CSS

Cascade Style Sheet

Lenguaje que define el estilo de una página

Es interpretado por el browser.

Mejora la separación contenido <-> presentación y con ellos la accesibilidad

Tiene una sintáxis simple

Puede estar definido en el documento HTML, o referido como un recurso externo.

CSS | Básicos Ejemplo: >> Ver ejemplo Probar color background margin border font-size

Ejemplo:

>> Ver ejemplo

Probar

color

background

margin

border

font-size

CSS | Básicos Sintáxis Básica <selector> { propiedad1 : valor2; propiedad2 : valor2; ... } Los selectores pueden ser Ids, Clases or Elementos. Las propiedads son nombres en inglés. Los valores pueden identificarse en diferentes unidades.

Sintáxis Básica

<selector> {

propiedad1 : valor2;

propiedad2 : valor2;

...

}

Los selectores pueden ser Ids, Clases or Elementos. Las propiedads son nombres en inglés. Los valores pueden identificarse en diferentes unidades.

Ejemplo de propiedades color background margin border font-size CSS | Básicos

Ejemplo de propiedades

color

background

margin

border

font-size

Unidades básicas CSS | Básicos

Unidades básicas

¿Cuál es la diferencia entre un mm y un píxel? ¿Cómo se especifica un color? CSS | Básicos

¿Cuál es la diferencia

entre un mm y un píxel?

¿Cómo se especifica un color?

Unidades Tamaños em : relativo al tamaño de texto actual: 1em % : relativo al tamaño de texto o al tamaño de la ventata. px : pixeles (unidad de resolución) mm/cm ; pc/pt/in: (unidades de medidas físicas) URL url(http:/xxx/yyy) url(/xxx/yyy) >>Ver ejemplo URL CSS | Básicos

Unidades

Tamaños

em : relativo al tamaño de texto actual: 1em

% : relativo al tamaño de texto o al tamaño de la ventata.

px : pixeles (unidad de resolución)

mm/cm ; pc/pt/in: (unidades de medidas físicas)

URL

url(http:/xxx/yyy)

url(/xxx/yyy)

>>Ver ejemplo URL

Unidades Colores nombre! (red, yellow...) rgb(255,255,255) rgb(100%,100%,100%) #RRGGBB #RGB CSS | Básicos Números hexadecimales entre 0 y F B R G

Unidades

Colores

nombre! (red, yellow...)

rgb(255,255,255)

rgb(100%,100%,100%)

#RRGGBB

#RGB

Algunos ejemplos p { color: red; background: green url(“/wall.png”); width: 70%; border: 2mm solid red; font-size: 1.2em; } CSS | Básicos Agrupamiento p, form, li { color: red; }

CSS | Cómo utilizarlos? Agregar CSS a HTML Inline Sólo útil para estilos únicos Embedded No es aconsejable, pero es rápido. Linked : El CSS se encuentra en un archivo externo. Mejor para mantener Optimiza la velocidad de carga de la página.

Agregar CSS a HTML

Inline

Sólo útil para estilos únicos

Embedded

No es aconsejable, pero es rápido.

Linked : El CSS se encuentra en un archivo externo.

Mejor para mantener

Optimiza la velocidad de carga de la página.

Agregar CSS a HTML Inline <p style=”color:red”>hola</p> Embedded <head> <style type=”text/css”> rojo { color:red } </style> </head> <p class=”rojo”> Linked : El CSS se encuentra en un archivo externo. <link ref=”stylesheet” type=”text/css” href=”xx.css”> <p class=”rojo”> CSS | Cómo utilizarlos?

Agregar CSS a HTML

Inline

<p style=”color:red”>hola</p>

Embedded

<head> <style type=”text/css”> rojo { color:red } </style> </head>

<p class=”rojo”>

Linked : El CSS se encuentra en un archivo externo.

<link ref=”stylesheet” type=”text/css” href=”xx.css”>

<p class=”rojo”>