html+css 2013
Post on 14-Dec-2014
2.498 Views
Preview:
DESCRIPTION
TRANSCRIPT
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,
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
<P>
<H1>
<IMG>
<UL>
CSS 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
“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,
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
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
HTML5
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Á
CÓMO SE MODIFICARÁ
...FIN
"A TODAS LAS ETIQUETAS <A>…"
SINTAXIS CSS
h1 { width:100px;margin:1em;
}
QUÉ SE MODIFICARÁ
CÓMO 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"
SINTAXIS DE SELECTORES
article.button#toggle
SELECTOR HTML
<article>
class="button"
id="toggle"
SINTAXIS DE SELECTORES
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
<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>
.form
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>
.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>
#submit
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 input
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>
OJO: ESPACIO
div div
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>
a, .item, input
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>
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;
}
...LA MAGIA DEL SHORTAND
aside { border-‐color:#ffc;border-‐style:solid;border-‐width:2px;
}
aside { border:2px solid #ffc;
}
...LA MAGIA DEL SHORTAND
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
top related