curso html y css, parte 1

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" />

http://fondiu.cl/

• 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>




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>

</p>

</div>


CSS Equivalencia

Css: selectores

strong.red <div class="red">

<p>


…

</strong>

</p>

</div>


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


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


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


forms: etiquetas

<input type="hidden"> Muahahahaha


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

curso html y css, parte 1

Technology