html+css 2013

HTML+CSS

SERGIO NOUVEL@SHESHO

USUARIO NAVEGADOR

PETICIÓN

SERVIDOR

RESPUESTA

TÚ CHROME

“GUARDA MIS DATOS”

“OK, DUDE”

PÁGINA WEB (HTML+CSS+IMÁGENES)

HTML = CONTENIDO“QUÉ”

CSS = PRESENTACIÓN“CÓMO”

HTML = CONTENIDO“HOOOLA, LES QUIERO DECIR QUE BLA BLA BLA”

CSS = PRESENTACIÓN“OK, ESO VA CON TEXTO ROJO Y 2 PX DE MARGEN”

HTML DICE: Lorem ipsum dolor sit amet,

consectetur adipiscing elit.

Cras est est, condimentum a

vulputate ut, imperdiet nec elit.

Aenean nec dui et risus suscipit

malesuada. Nunc auctor pellentesque

nulla in suscipit. Lorem ipsum dolor

sit amet, consectetur adipiscing

elit. Donec purus nisl, vulputate

vitae pretium tincidunt, pharetra

eget magna. Etiam libero

pellentesque

placerat

SDFDSFSFSDF

SDFFFF

“ESO ES UN PÁRRAFO”

“ESO ES UN TÍTULO 1”

“AHÍ TIENE QUE IR UNA IMAGEN”

“ESO ES UN LISTADO”

HTML DICE: Lorem ipsum dolor sit amet,











pellentesque

placerat

SDFDSFSFSDF

SDFFFF

<P>

<H1>

<IMG>

<UL>

CSS DICE: Lorem ipsum dolor sit amet,











pellentesque

placerat

SDFDSFSFSDF

SDFFFF

“ESE LINK VA SUBRAYADO”

“ESO VA CON ARIAL”

“ESTA PARTE VA ENNEGRITA Y BORDE ROJO”

“ESA CAJA VA A LA IZQUIERDA”

CSS DICE: Lorem ipsum dolor sit amet,











pellentesque

placerat

SDFDSFSFSDF

SDFFFF

text-decoration: underline;

font-family: arial;

font-weight: bold;border: 1px solid red;

float: left;

CSS

HTML

HTML

HTML

HTML

HTMLES SEMÁNTICO

SINTAXIS HTML

<etiqueta>contenido…

</etiqueta>

APERTURA

CIERRE

<strong>Esto es una negrita</strong> y esto no lo es. <em>Esto está en cursiva</em> y esto no lo está.<perro>Esto es un perro</perro> y esto no lo es.

<strong>Esto es una negrita</strong> y esto no lo es.

<em>Esto está en cursiva</em> y esto no lo está.

<perro>Esto es un perro</perro> y esto no lo es.

Esto es una negrita y esto no lo es.

Esto está en cursiva y esto no lo está.

y esto no lo es.

<ironía> Qué bonito te queda ese vestido!

</ironía>

ALGUNAS ETIQUETAS SE CIERRAN A SÍ MISMAS

<p>A continuación, un salto de línea: <br/> Gracias, salto de línea.</p>

ALGUNAS ETIQUETAS SE CIERRAN A SÍ MISMAS

<p>A continuación, una imagen: <img /> Gracias, imagen.</p>

<p><a>

<strong><em>

<h1>…<h6>

PÁRRAFO

VÍNCULO (ANCLA)

NEGRITA

CURSIVA

TÍTULOS (1 AL 6)

ALGUNAS ETIQUETAS PUEDEN CONTENER A OTRAS (ANIDACIÓN)

<p>Esto es un párrafo <a>y esto es un vínculo dentro del párrafo.</a> Esto es sólo párrafo.

</p>Esto no es párrafo ni vínculo.

Y OTRAS PUEDEN CONTENERSE A SÍ MISMAS<div>Esto es una "div", y <div>esto es una sub "div" dentro de otra

</div>y esto es parte de la “div” grande

</div>

<div>Esto es una "div", y <div>esto es una sub "div" dentro de otra

</div>y esto es parte de la “div” grande

</div>

ETIQUETA “PARENT”

ETIQUETA “CHILD”

...SÍ, EXACTO

LA GRACIA DE LAS ETIQUETAS SON SUS ATRIBUTOS<a>Este vínculo no lleva a ninguna parte</a>

<a href="http://example.com">Este vínculo me lleva a example.com</a>

LAS ETIQUETAS PUEDEN TENER MUCHOS ATRIBUTOS<a href="index.html" target="_blank">Home</a>

<img src="foto.jpg" title="hover me!" width="500" height="400"/>

(OJO, SIEMPRE VAN EN LA ETIQUETA DE APERTURA)

hrefsrc

titletargettype

URL DEL LINK

UBICACIÓN DEL RECURSO

LEYENDA AL PASAR EL MOUSE

PARA ABRIR EN VENTANA NUEVA

SI ES UN BOTÓN, UN CHECKBOX, UN CAMPO DE TEXTO, ETC.

<a href="http://example.com">

<img src="foto.jpg" />

<p title="hover me!">

<a target="_blank">

<input type="button" />

ATRIBUTO VALOR

ALGUNOS ATRIBUTOS NO NECESITAN UN VALOR<script async src="jquery.js">

<input type="text" required />

<input type="checkbox" checked />

LA PÁGINA WEB MÁS BÁSICA DEL UNIVERSO ES ASÍ:

<html><head>...</head><body>...</body></html>

<head>

<title>

<meta>

<link>

<script>

<style>

</head>

TÍTULO DE LA PÁGINA

FORMATO DE CARACTERES E INFO ÚTIL PARA GOOGLE

VINCULAR CSS, MOSTRAR FAVICONS, ETC

INSERTAR JAVASCRIPT

INSERTAR CSS DIRECTAMENTE

BLOCK V/S INLINE

BLOCK: UNA CAJA QUE OCUPA SU CARRIL PROPIO

Block&

Block&(predeterminado)&

Block&

ALGUNAS ETIQUETAS BLOCK

<div><p>

<header><ul>

<aside>

"CAJA" NO SEMÁNTICA

PÁRRAFO

ENCABEZADO DE LA PÁGINA

LISTADO (VIÑETAS)

INFORMACIÓN COMPLEMENTARIA (SIDEBAR)

INLINE: FLUYE CON EL TEXTO Y NO TIENE DIMENSIONES

Hola, esto es un párrafo, y esto es un elemento inline

dentro de este párrafo.

<p>Hola, esto es un párrafo, <span> y esto es un elemento inline</span> dentro de ese párrafo.</p>

ALGUNAS ETIQUETAS INLINE

<span><a>

<strong><em>

<time>

"FRAGMENTO" NO SEMÁNTICO

VÍNCULO

NEGRITA

CURSIVA (ÉNFASIS)

FECHA/HORA

HTML5ES

HTML.

ETIQUETAS HTML5: MEDIA

<canvas><audio><video>

LIENZO DE DIBUJO

ADIVINEN

ADIVINEN

ETIQUETAS HTML5 ESTRUCTURALES

<header><aside><footer><hgroup>

<nav>

ENCABEZADO

INFO COMPLEMENTARIA (SIDEBAR)

PIE DE PÁGINA

GRUPO DE ENCABEZADOS

MENÚ DE NAVEGACIÓN

ETIQUETAS HTML5 SEMÁNTICAS

<article><section>

<time>

UNIDAD DE INFORMACIÓN

GRUPO DE UNIDADES DE INFORMACIÓN

FECHA/HORA

CLASS & ID

ATRIBUTOS APLICABLES A LO QUE SEA

<a class="button">Home</a>

<p id="importante">Párrafo</p>

<article class="blog-‐post" id="post-‐528">Hola</article>

"MARCAN" EL HTML CON NOMBRES QUE LUEGO USAREMOS EN CSS

"A todos los párrafos con nombre de clase 'destacado', se les solicita usar fuente Tahoma a la brevedad posible."

-‐ CSS

CLASS = MUCHAS VECES“PERRO”

ID = SÓLO UNA VEZ“FIRULAIS”

CLASS = VARIAS A LA VEZ“PERRO COLLIE”

ID = SÓLO UNA VEZ“FIRULAIS”

CLASS = REUTILIZACIÓN“HEY! USTEDES!”

ID = DIFERENCIACIÓN“TÚ, SOLAMENTE TÚ”

<a class="button">Click1</a><a class="button" id="submit">Click2</a><a class="button small">Click3</a><a class="button small" id="toggle">Click4</a><a class="button large">Click5</a>

CSSCASCADING STYLE SHEETS

SINTAXIS CSS

selector { regla1:valor1;regla2:valor2;

}

QUÉ SE MODIFICARÁ

CÓMO SE MODIFICARÁ

...FIN

SINTAXIS CSS

a { color:green;font:Arial;

}

QUÉ SE MODIFICARÁ


...FIN

"A TODAS LAS ETIQUETAS <A>…"

SINTAXIS CSS

h1 { width:100px;margin:1em;

}

QUÉ SE MODIFICARÁ


...FIN

"A TODAS LAS ETIQUETAS <H1>…"

CSS TE CAMBIARÁ LA VIDA

a { color:red;

}

SIN CSS :(

SINTAXIS DE SELECTORES

perro.gris

#firulais

SELECTOR HTML

<perro>

class="gris"

id="firulais"


article.button#toggle

SELECTOR HTML

<article>

class="button"

id="toggle"


perro.grisperro#firulais

perro.gris.maltes

SELECTOR HTML

<perro class="gris"><perro id="firulais"><perro class="gris maltes">

.form-‐item

SELECTOR HTML

<a class="form-‐item" href="#">Toggle</a><div class="form-‐item">

<div class="form" id="submit"><input type="text" />

</div></div><div class="form item">Text here</div>

div.form-‐item

SELECTOR HTML




.form

SELECTOR HTML




.form.item

SELECTOR HTML




#submit

SELECTOR HTML




div input

SELECTOR HTML




OJO: ESPACIO

div div

SELECTOR HTML




a, .item, input

SELECTOR HTML




MODELO DE CAJA

OUTLINE

header { margin-‐top:100px;margin-‐right:50px;margin-‐bottom:40px;margin-‐left:90px;

}

header { margin:100px 50px 40px 90px;

}

...LA MAGIA DEL SHORTAND

footer { padding-‐top:40px;padding-‐right:10px;padding-‐bottom:40px;padding-‐left:10px;

}

footer { padding:40px 10px;

}


aside { border-‐color:#ffc;border-‐style:solid;border-‐width:2px;

}

aside { border:2px solid #ffc;

}


FRAME...WORKS?

HTML = BOILERPLATECSS = BOOTSTRAPJS = JQUERY

HTML = HAMLCSS = SASSJS = COFFEESCRIPT

LENGUAJES DE ABSTRACCIÓN/PREPROCESADORES

(GRACIAS, RUBY)

ABSTRACCIÓN

.container%strong

Hola%a{:href=>"#"}

Click here#featured%em Look!

HAML HTML

<div class="container"><strong> Hola </strong><a href="#">Click here

</a><div id="featured"><em>Look! </em></div>

</div>

ABSTRACCIÓN

.containerwidth: 300pxcolor: redaborder: none

.itemcursor: pointer

SASS CSS

.container {width: 300px;color: red;

}.container a {border: none;

}.container .item {cursor: pointer;

}

BORRE CÓDIGO.

GRACI AS.

ÍCONOS: FORTAWESOME.GITHUB.COM/FONT-AWESOME

slideshare.net/fondiu

http://WWW.FONDIU.CL

http://WWW.FONDIU.CL

html+css 2013

Documents