1. HTML
+CSS

2. SERGIO NOUVEL
@SHESHO

3. 


 
 
 



4. 


PETICIÓN
   
 
SERVIDOR

USUARIO NAVEGADOR

RESPUESTA

5. 
“GUARDA MIS



DATOS”
   
 “OK, DUDE”

TÚ CHROME

PÁGINA WEB
(HTML+CSS
+IMÁGENES)

6. HTML = CONTENIDO
“QUÉ”
CSS = PRESENTACIÓN
“CÓMO”

7. HTML = CONTENIDO
“HOOOLA, LES QUIERO DECIR QUE BLA
BLA BLA”
CSS = PRESENTACIÓN
“OK, ESO VA CON TEXTO ROJO Y 2 PX DE
MARGEN”

8. HTML DICE: Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras est est, condimentum a
“ESO ES UN TÍTULO 1” vulputate ut, imperdiet nec elit
Aenean nec dui et risus suscipit
malesuada. Nunc auctor pellentes
“AHÍ TIENE QUE IR UNA
IMAGEN” nulla in suscipit. Lorem ipsum dol
sit amet, consectetur adipiscing
“ESO ES UN PÁRRAFO” elit. Donec purus nisl, vulputate
vitae pretium tincidunt, pharetr
“ESO ES UN LISTADO” eget magna. Etiam libero
pellentesque
placerat
SDFDSFSFSDF
SDFFFF

9. HTML DICE: Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras est est, condimentum a
<H1> vulputate ut, imperdiet nec elit
Aenean nec dui et risus suscipit
malesuada. Nunc auctor pellentes
<IMG>
nulla in suscipit. Lorem ipsum dol
sit amet, consectetur adipiscing
<P> elit. Donec purus nisl, vulputate
vitae pretium tincidunt, pharetr
<UL> eget magna. Etiam libero
pellentesque
placerat
SDFDSFSFSDF
SDFFFF

10. CSS DICE: Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras est est, condimentum a
“ESO VA CON ARIAL” vulputate ut, imperdiet nec elit
Aenean nec dui et risus suscipit
malesuada. Nunc auctor pellentes
“ESTA PARTE VA EN
NEGRITA Y BORDE ROJO” nulla in suscipit. Lorem ipsum dol
sit amet, consectetur adipiscing
“ESE LINK VA SUBRAYADO” elit. Donec purus nisl, vulputate
vitae pretium tincidunt, pharetr
“ESA CAJA VA A LA IZQUIERDA” eget magna. Etiam libero
pellentesque
placerat
SDFDSFSFSDF
SDFFFF

11. CSS DICE: Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras est est, condimentum a
font-family: arial; vulputate ut, imperdiet nec elit
Aenean nec dui et risus suscipit
malesuada. Nunc auctor pellentes
font-weight: bold;
border: 1px solid red; nulla in suscipit. Lorem ipsum dol
sit amet, consectetur adipiscing
text-decoration: underline; elit. Donec purus nisl, vulputate
vitae pretium tincidunt, pharetr
eget magna. Etiam libero
float: left;
pellentesque
placerat
SDFDSFSFSDF
SDFFFF

12. 
CSS
   
HTML HTML HTML
HTML

13. HTML
ES
SEMÁNTICO

14. SINTAXIS HTML
APERTURA <etiqueta>
contenido…
CIERRE </etiqueta>

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

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

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

18. ALGUNAS ETIQUETAS SE CIERRAN
A SÍ MISMAS
<p>A
continuación,
un
salto
de
línea:
<br/>
Gracias,
salto
de
línea.</p>

19. ALGUNAS ETIQUETAS SE CIERRAN
A SÍ MISMAS
<p>A
continuación,
una
imagen:
<img
/>
Gracias,
imagen.</p>

20. <p> PÁRRAFO
<a> VÍNCULO (ANCLA)
<strong> NEGRITA
<em> CURSIVA
<h1>…<h6> TÍTULOS (1 AL 6)

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

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

23. ETIQUETA “PARENT” <div>
Esto
es
una
"div",
y
ETIQUETA “CHILD” <div>
esto
es
una
sub
"div"
dentro
de
otra
</div>
y
esto
es
parte
de
la
“div”
grande
</div>

24. ...SÍ, EXACTO

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

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

27. href URL DEL LINK
src UBICACIÓN DEL RECURSO
title LEYENDA AL PASAR EL MOUSE
target PARA ABRIR EN VENTANA NUEVA
type SI ES UN BOTÓN, UN CHECKBOX,
UN CAMPO DE TEXTO, ETC.

28. ATRIBUTO VALOR
<a
href="http://example.com">
<img
src="foto.jpg"
/>
<p
title="hover
me!">
<a
target="_blank">
<input
type="button"
/>

29. ALGUNOS ATRIBUTOS NO
NECESITAN UN VALOR
<script
async
src="jquery.js">
<input
type="text"
required
/>
<input
type="checkbox"
checked
/>

30. LA PÁGINA WEB MÁS BÁSICA DEL
UNIVERSO ES ASÍ:
<html>
<head>...</head>
<body>...</body>
</html>

31. <head>
<title> TÍTULO DE LA PÁGINA
<meta> FORMATO DE CARACTERES
E INFO ÚTIL PARA GOOGLE
<link> VINCULAR CSS, MOSTRAR
FAVICONS, ETC
<script> INSERTAR JAVASCRIPT
<style> INSERTAR CSS DIRECTAMENTE
</head>

32. BLOCK
V/S
INLINE

33. BLOCK: UNA CAJA QUE OCUPA SU
CARRIL PROPIO
Block&
Block&(predeterminado)&
Block&

34. ALGUNAS ETIQUETAS BLOCK
<div> "CAJA" NO SEMÁNTICA
<p> PÁRRAFO
<header> ENCABEZADO DE LA PÁGINA
<ul> LISTADO (VIÑETAS)
<aside> INFORMACIÓN
COMPLEMENTARIA (SIDEBAR)

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

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

37. ALGUNAS ETIQUETAS INLINE
<span> "FRAGMENTO" NO SEMÁNTICO
<a> VÍNCULO
<strong> NEGRITA
<em> CURSIVA (ÉNFASIS)
<time> FECHA/HORA

38. HTML5

39. HTML5
ES
HTML.

40. ETIQUETAS HTML5: MEDIA
<canvas> LIENZO DE DIBUJO
<audio> ADIVINEN
<video> ADIVINEN

41. ETIQUETAS HTML5 ESTRUCTURALES
<header> ENCABEZADO
<aside> INFO COMPLEMENTARIA
(SIDEBAR)
<footer> PIE DE PÁGINA
<hgroup> GRUPO DE ENCABEZADOS
<nav> MENÚ DE NAVEGACIÓN

42. ETIQUETAS HTML5 SEMÁNTICAS
<article> UNIDAD DE INFORMACIÓN
<section> GRUPO DE UNIDADES DE
INFORMACIÓN
<time> FECHA/HORA

43. CLASS
& ID

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

45. "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

46. CLASS = MUCHAS VECES
“PERRO”
ID = SÓLO UNA VEZ
“FIRULAIS”

47. CLASS = VARIAS A LA VEZ
“PERRO COLLIE”
ID = SÓLO UNA VEZ
“FIRULAIS”

48. CLASS = REUTILIZACIÓN
“HEY! USTEDES!”
ID = DIFERENCIACIÓN
“TÚ, SOLAMENTE TÚ”

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

50. CSS
CASCADING STYLE SHEETS

51. SINTAXIS CSS
QUÉ SE MODIFICARÁ selector
{
CÓMO SE MODIFICARÁ
regla1:valor1;
regla2:valor2;
...FIN }

52. SINTAXIS CSS
QUÉ SE MODIFICARÁ a
{
CÓMO SE MODIFICARÁ
color:green;
font:Arial;
...FIN }
"A TODAS LAS ETIQUETAS <A>…"

53. SINTAXIS CSS
QUÉ SE MODIFICARÁ h1
{
CÓMO SE MODIFICARÁ
width:100px;
margin:1em;
...FIN }
"A TODAS LAS ETIQUETAS <H1>…"

54. CSS TE CAMBIARÁ LA VIDA
SIN CSS :(
a
{
color:red;
}

55. SINTAXIS DE SELECTORES
SELECTOR HTML
perro <perro>
.gris class="gris"
#firulais id="firulais"

56. SINTAXIS DE SELECTORES
SELECTOR HTML
article <article>
.button class="button"
#toggle id="toggle"

57. SINTAXIS DE SELECTORES
SELECTOR HTML
perro.gris <perro
class="gris">
perro#firulais <perro
id="firulais">
perro.gris.maltes <perro
class="gris
maltes">

58. SELECTOR HTML
.form-­‐item <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>

59. SELECTOR HTML
div.form-­‐item <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>

60. SELECTOR HTML
.form <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>

61. SELECTOR HTML
.form.item <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>

62. SELECTOR HTML
#submit <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>

63. SELECTOR HTML
div
input <a
class="form-­‐item"
href="#">Toggle</a>
<div
class="form-­‐item">
OJO: ESPACIO <div
class="form"
id="submit">
<input
type="text"
/>
</div>
</div>
<div
class="form
item">
Text
here</div>

64. SELECTOR HTML
div
div <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>

65. SELECTOR HTML
a,
.item,
input <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>

66. MODELO DE CAJA
OUTLINE

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

68. header
{
margin:100px
50px
40px
90px;
}
...LA MAGIA DEL SHORTAND

69. footer
{
padding-­‐top:40px;
padding-­‐right:10px;
padding-­‐bottom:40px;
padding-­‐left:10px;
}

70. footer
{
padding:40px
10px;
}
...LA MAGIA DEL SHORTAND

71. aside
{
border-­‐color:#ffc;
border-­‐style:solid;
border-­‐width:2px;
}

72. aside
{
border:2px
solid
#ffc;
}
...LA MAGIA DEL SHORTAND

73. FRAME...
WORKS?

74. HTML = BOILERPLATE
CSS = BOOTSTRAP
JS = JQUERY

75. LENGUAJES DE ABSTRACCIÓN/
PREPROCESADORES
HTML = HAML
CSS = SASS
JS = COFFEESCRIPT

76. (GRACIAS, RUBY)

77. ABSTRACCIÓN
HAML HTML
.container <div
class="container">
%strong <strong>
Hola
</strong>
Hola <a
href="#">
%a{:href=>"#"} Click
here
Click
here </a>
#featured <div
id="featured">
%em
Look! <em>Look!
</em>
</div>
</div>

78. ABSTRACCIÓN
SASS CSS
.container .container
{
width:
300px width:
300px;
color:
red color:
red;
a }
border:
none .container
a
{
.item border:
none;
cursor:
pointer }
.container
.item
{
cursor:
pointer;
}

79. BORRE
CÓDIGO.

80. GRACIAS.
slideshare.net/fondiu
ÍCONOS: FORTAWESOME.GITHUB.COM/FONT-AWESOME