Date post: | 12-Jun-2015 |
Category: |
Technology |
Upload: | sergio-nouvel-castro |
View: | 7,286 times |
Download: | 6 times |
HTML y CSS 1
Cátedras paralelas
www.fondiu.cl
twitter: @_fondiu
Cómo funcionan las páginas web
Navegador
Petición (URL y/o
conjunto de datos)
Usuario
Servidor
Respuesta (Usualmente HTML
con referencias a archivos)
• Lenguaje de marcado que contiene los elementos de una página Web
• El navegador interpreta este lenguaje y muestra los resultados
• HTML = Contenido
Qué es html
• Lenguaje de instrucciones que determina cómo se visualiza o presenta una página Web => Estilo
• Colores, posiciones, tamaños, bordes, tipografías, etc.
• CSS = “Presentación”
Qué es CSS
• Antiguamente, el editor y el compositor de texto eran personas distintas
• El editor no podía previsualizar el texto, y el compositor no sabía qué destacar
• El editor incluía instrucciones en el texto: "esto es cursiva", "esto es título", "esto es una nota al pie".
html: orígenes
• Hoy, el navegador (Firefox, Chrome, IE) es el "compositor" y recibe las instrucciones del autor del código para mostrarlas visualmente
html: orígenes
• HTML = Hypertext Markup Language
• Hipertexto = Links
• Markup = Marcado semántico (“esto es un título, esto es un párrafo, esto es un botón”)
Qué es html
• Lenguaje de etiquetas
• Las etiquetas delimitan información, similar a marcar un texto con corchetes o paréntesis
Html: sintaxis
<etiqueta> …contenido... </etiqueta>
apertura
cierre
Html: sintaxis
<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.
Html: sintaxis
<strong>Esto es
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 negrita y esto
no lo es.
Esto está en cursiva y
esto no lo está.
y esto no lo es.
Html: sintaxis
<ironía>
Qué bonito te queda ese vestido!
</ironía>
• No todas las etiquetas tienen apertura y cierre: algunas son un elemento aislado
• Las etiquetas que no cierran reciben un "/" al final para marcar su cierre.
Html: sintaxis
<p>A continuación, un salto de línea: <br/> Gracias, salto de línea.</p>
Html: etiquetas
<p>
<a>
<strong>
<em>
<h1>…<h6>
Párrafo
Vínculo (ancla)
Negrita
Cursiva
Títulos de 1 al 6
Algunas etiquetas
pueden contener a
otras
Html: 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, como <div>, <ul>, <ol>
Html: anidación
<div> Esto es una "div", y <div>
esto es una sub "div" dentro de otra
</div> </div>
• La etiqueta que está dentro de otra se llama hija (child).
• La etiqueta que contiene a otra es padre (parent) de ésta.
Html: anidación
<padre>Esta etiqueta actúa como contenedor <hija>esta etiqueta está dentro de otra</hija></padre>
• No todas las etiquetas permiten anidación de otras.
• Algunas no aceptan ciertos tipos de anidación:
• <a> no acepta <p> o <h1>, por ejemplo.
Html: anidación
• Algunas etiquetas necesitan atributos.
• Por ejemplo, un link necesita saber dónde llevarte, y una imagen necesita saber donde está el archivo.
• El atributo siempre va en la etiqueta de apertura.
Html: atributos
<etiqueta atributo="valor"> bla bla bla… </etiqueta>
Algunas etiquetas que necesitan atributos para ser útiles
Html: atributos
<a href="http://fondiu.cl">
<img src="images/foto.jpg">
<div class="menu">
<input type="button">
<form action="http://google.com">
Es usual que las etiquetas combinen dos o más atributos:
Html: atributos
<a href=http://fondiu.cl
target="_blank">
<img src="images/foto.jpg"
width="100" height="50" />
• Una página Web se divide en dos secciones: <head> y <body>, encerradas por una etiqueta <html> que define el documento
Html: página web básica
<html> <head>…</head> <body>…</body> </html>
• La sección <head> es invisible, y contiene las etiquetas que definen la página, su título y su metainformación, así como la vinculación a CSS y a JavaScript.
Html: head
Html: etiquetas head
<link>
<meta>
<title>
<style>
<script>
Referencia a externo (NO vínculo)
Metainformación
Título (pestaña/Google)
Declaración de estilo CSS
Bloque de texto JavaScript
FAVICON – Se muestra gracias a una etiqueta <link>
• La sección <body> enmarca todo el contenido visible en la página, incluyendo el fondo.
• Las etiquetas en <body> tienen 2 comportamientos principales: block o inline.
Html: body
• Las etiquetas block son cajas que poseen un carril "dedicado" para ellos. Además poseen dimensiones, fondo y posición.
Html: blocK
Block
Block (predeterminado)
Block
Html: etiquetas block
<form>
<div>
<p>
<h1>…<h6>
<blockquote>
<ul> y <ol>
<li>
Formulario
División no semántica
Párrafo
Encabezados
Bloque de cita
Listados
Elemento de lista
• Las etiquetas inline se comportan como letras o un destacador: siguen el flujo del texto dentro de un elemento block.
Html: INLINE
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>
{ block
Html: etiquetas inline
<a>
<strong>
<em>
<span>
<abbr>
<acronym>
Vínculo
Negrita
Cursiva
Fragmento no semántico
Abreviatura
Acrónimo
Block • Contiene texto
• Es una "caja"
• Ocupa su carril propio
Html: block v/s INLINE
Inline • Va junto con el texto
• Es un "destacador"
• Va dentro de un elemento block
• Son atributos HTML
• Aplicables a cualquier etiqueta dentro de <body>
• Imprescindibles para usar CSS
• En sí mismas no hacen nada más que "poner nombres"
• Pueden haber ambos en un mismo elemento
Html: clases & ids
Html: clases & ids
<a class="grande">Click aquí</a>
<div class="grande">Hola</div>
<ul id="menu">…</ul>
<span class="destacado" id="principal">
Texto importante </span>
Class • Se puede usar varias
veces en la página
• Sirve para agrupar elementos comunes
• Un elemento puede tener varias clases
Html: class & ids
ID • Se usa una sola vez
en la página
• Sirve para distinguir un elemento único
• Un elemento sólo puede tener un ID
Html: clases & ids
Ejemplo ficticio
Html: clases & ids
<animal>…</animal>
<animal>…</animal>
<animal>…</animal>
<animal>…</animal>
Html: clases & ids
<animal class="gato">…</animal>
<animal class="gato">…</animal>
<animal class="perro">…</animal>
<animal class="perro">…</animal>
Html: clases & ids
<animal class="gato" id="Benito">
…</animal>
<animal class="gato" id="Demóstenes">
…</animal>
<animal class="perro" id="Pulgoso">
…</animal>
<animal class="perro" id="Cachupín">
…</animal>
Html: clases & ids
<animal class="gato blanco" id="Micifuz">
…</animal>
<animal class="gato gris" id="Demóstenes">
…</animal>
<animal class="perro gris" id="Pulgoso">
…</animal>
<animal class="perro blanco" id="Cachupín">
…</animal>
• CSS toma los elementos en <body> anteriormente mencionados y modifica su aspecto
• Puede cambiar color, forma, posición, profundidad e incluso comportamiento (de inline a block y viceversa)
CSS: funcionamiento
• El navegador tiene algunos estilos predefinidos (fondo blanco, texto negro, vínculos azules, Times New Roman…)
• CSS permite cambiar completamente el aspecto de una página
CSS: funcionamiento
• REUTILIZACIÓN
• Permite vincular muchas páginas a un solo archivo CSS
• Permite modificar muchos elementos de una sola vez
• Permite separar el contenido de la presentación: cambiar diseños es fácil
CSS: ventajas
CSS: funcionamiento
Sin CSS Con CSS
CSS: funcionamiento
CSS: sintaxis
selector {
regla1:valor;
regla2:valor2;
}
• Selector: define qué elemento HTML será afectado (ej: <a>)
• Regla: define el atributo a modificar (ej: color)
• Valor: define cómo se modifica (ej: red)
Css: sintaxis
• Esto se lee: "a todas las etiquetas <a>, dales color rojo".
Css: sintaxis
a {
color:red;
}
Css: sintaxis
Sin CSS
a {
color:red;
}
• CSS tiene una sintaxis de selectores
• De esta forma, cada selector refleja un elemento o varios de HTML que cumplen con la condición del selector.
• Por ejemplo, el selector "a" quiere decir "todas las etiquetas <a>".
Css: selectores
Los selectores nos permiten especificar qué queremos cambiar
"Dale 200px de ancho a la columna"
"Haz que los vínculos sean rojos"
"Pon el fondo de color negro"
Css: selectores
Css: selectores
gato
.gris
#micifuz
gato.gris
gato#micifuz
Etiqueta <gato>
class="gris"
id="micifuz"
Sólo etiquetas <gato class="gris">
Sólo etiquetas <gato id="micifuz">
CSS Equivalencia
Css: selectores
ul
.menu
#sidebar
ul.menu
ul#sidebar
Etiqueta <ul>
class="menu"
id="sidebar"
Sólo etiquetas <ul class="menu">
Sólo etiquetas <ul id="sidebar">
CSS Equivalencia
Css: selectores
.red <div class="red">
<p>
<strong class="red">
…
</strong>
</p>
</div>
<h1 class="red">…</h1>
CSS Equivalencia
Css: selectores
div.red <div class="red">
<p>
<strong class="red">
…
</strong>
</p>
</div>
<h1 class="red">…</h1>
CSS Equivalencia
Css: selectores
strong.red <div class="red">
<p>
<strong class="red">
…
</strong>
</p>
</div>
<h1 class="red">…</h1>
CSS Equivalencia
Un selector puede especificar un elemento que posea varias clases a la vez
Css: selectores
a.gato.blanco <a class="gato
blanco">
… y también un elemento que mezcle clases y IDs
Css: selectores
a.gato#micifuz <a class="gato"
id="micifuz">
a.gato.blanco#micifuz <a class="gato blanco"
id="micifuz">
Css: selectores
ul li
li ul
Etiquetas <li> que estén DENTRO
de una etiqueta <ul>
Etiquetas <ul> que estén DENTRO
de una etiqueta <li>
Selectores de anidación padre/hijo
El padre siempre está a la izquierda del hijo.
Sólo el elemento hijo es afectado.
CSS Equivalencia
Css: selectores
ul li
li ul
Selectores de anidación padre/hijo
El padre siempre está a la izquierda del hijo.
Sólo el elemento hijo es afectado.
<ul>
<li>…</li>
</ul>
<li>
<ul>…</ul>
</li>
Css: selectores
p a <p>
<a href="#">…</a>
</p>
<p>
<strong>
<a href="#">…</a>
</strong>
</p>
CSS Equivalencia
p strong a
Css: selectores
p strong a <p>
<a href="#">…</a>
<strong>
<a href="#">…</a>
</strong>
</p>
CSS Equivalencia
Css: selectores
body div <body>
<div>
<div>
<div>…</div>
</div>
</div>
</body>
CSS Equivalencia
Css: selectores
div p <div>
<p>
<strong>…</strong>
</p>
</div>
<p>…</p>
<div>
<div>
<p>…</p>
</div>
</div>
CSS Equivalencia
Css: selectores
p .hola <p>
<span class="hola">
…
</span>
<em class="hola">
…
</em>
</p>
<span class="hola">…</span>
CSS Equivalencia
• En una sola declaración CSS pueden juntarse varios selectores, unidos por comas
Css: selectores
a, div, strong {
color:red;
}
Css: selectores
a, .hola <p>
<span class="hola">
…
</span>
<a class="chao">
…
</a>
</p>
<p class="hola">…</p>
CSS Equivalencia
Css: pseudo-clases
• Las pseudo-clases definen estados especiales de HTML que no son elementos ni etiquetas propiamente tales
• :hover = mouse por encima
• :focus = elemento "enfocado"
• :active= al hacer clic
Css: pseudo-clases
a {
color:blue;
}
a:hover {
color:red;
}
CSS
Hover me!
Hover me!
Css: pseudo-clases
a {
color:blue;
}
a:active {
color:green;
}
CSS
Click me!
Click me!
Css: pseudo-clases
input {
background-
color:white;
}
input:focus {
background-
color:yellow;
}
CSS
hola
• HTML es un lenguaje que evoluciona en el tiempo
• Hoy en día coexisten 3 especificaciones principales: HTML 4, XHTML 1 y HTML 5
especificaciones html
• La especificación "clásica" que usan la mayoría de las páginas
• Sus 2 versiones más conocidas: Strict y Transitional
especificaciones: html 4
• Combina HTML 4 con el estándar XML
• Más estricto y "correcto" que HTML 4, pero muy similar en forma
• Ofrece las mismas funcionalidades
especificaciones: Xhtml
• Lenguaje "nuevo"
• Permite escribir en HTML y XHTML
• Ofrece nuevas funcionalidades "nativas": video, audio, canvas
• Código más semántico
• Más posibilidades de interfaz
• Mejor manejo de errores de usuario
especificaciones: HTML 5
Html 5: etiquetas
<canvas>
<video>
<audio>
Lienzo de dibujo
Se imaginarán :)
Se imaginarán :)
Etiquetas media
Html 5: etiquetas
<nav>
<article>
<aside>
<header>
<footer>
<section>
Menú
Unidad de contenido (ej: post de blog)
Sidebar
Encabezado
Pie de página
Sí. Es una sección (grupo de unidades)
Etiquetas semánticas
• Los formularios permiten a una página Web enviar y recibir datos de otras páginas, un script o base de datos.
• Cada vez que envías un e-mail, comentas en un blog, te suscribes a un newsletter o cambias tu foto en Facebook estás enviando un formulario.
html: forms
• Los formularios realizan 3 funciones básicas:
1. Ofrecen controles de interfaz para ingresar la información
2. Validan la información ingresada
3. Envían la información visible y oculta al destino especificado
html: forms
• Un formulario SIEMPRE está envuelto por una etiqueta <form>, que define dónde será enviado.
html: forms
<form action="http://google.com"
method="POST">
• El atributo action especifica el lugar donde serán recibidos y procesados los datos del formulario.
• "Envíame esto a http://google.com por favor, y me procesai los datos, ñatito"
html: forms
<form action="http://google.com"
method="POST">
• El atributo method especifica qué tipo de envío se hará:
• GET sólo consulta datos y no modifica nada (sólo lectura)
• POST lee y envía datos y espera la respuesta del servidor (lectura y escritura).
html: forms
<form action="http://google.com"
method="POST">
¿Qué datos se envían?
• Todos los recopilados en elementos de "entrada" (inputs)
• Esto incluye elementos que interactúan con el usuario (controles) como elementos invisibles
html: forms
forms: etiquetas
<input type="text">
<input type="password">
<input type="button">
<input type="submit">
<input type="checkbox">
<input type="radio">
<input type="file">
Campo de texto (1 línea)
Campo de contraseña
Botón genérico
Botón de envío form
Casilla de verificación
Botón de radio
"Examinar…"
Controles de formulario
forms: etiquetas
<input type="image">
<textarea>
<select>
<option>
<optgroup>
<fieldset>
<legend>
Campo texto multilínea
Elemento de menú select
Grupo de imagen
Agrupador de campos
Título del fieldset
Controles de formulario
forms: etiquetas
<input type="hidden"> Muahahahaha
Controles de formulario
glosario
HTML: Lenguaje de marcado para pags Web / Contenido
CSS: Lenguaje de estilos / Presentación – Apariencia
Etiqueta: Unidad estructural – delimitador de contenido
Atributo: Datos complementarios para etiquetas
Head: Encabezado (invisible) de página Web
Meta: Información de una página acerca de sí misma
Body: Sección visible de una página Web
glosario
Anidación: Etiquetas contenidas dentro de otras
Padre/Hijo: Relación entre contenedor y contenido
Block: Comportamiento visual de "caja" de un elemento
Inline: Comportamiento visual estilo "destacador"
Regla CSS: Atributo a ser modificado por un valor (ej: color)
Declaración CSS: Conjunto de reglas que modifican un
elemento
Selector: Definición del elemento a ser modificado
glosario
Class: Atributo HTML que permite agrupar similares
ID: Atributo HTML que permite identificar y diferenciar
Pseudo-clase: Selector que permite tomar estados HTML
especiales
Script: Conjunto de instrucciones. En HTML, referido a
JavaScript
próxima clase
HTML
Tablas
URLs
Reseña de JavaScript
CSS
Reglas
Modelo de caja
Posicionamiento
Fondo
Cascada
Códigos de color