Curso HTML y CSS, parte 1

Cátedras paralelas

HTML y CSS 1

www.fondiu.cl
twitter: @_fondiu

Cómo funcionan las páginas web

Petición Servidor
(URL y/o
conjunto de
datos)

Navegador
Usuario

Respuesta
(Usualmente HTML
con referencias a
archivos)

Qué es html

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

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

html: orígenes

• 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

Qué es html

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

Html: sintaxis

• Lenguaje de etiquetas
• Las etiquetas delimitan información,
similar a marcar un texto con corchetes
o paréntesis
apertura <etiqueta>
…contenido...
cierre </etiqueta>

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 Esto es negrita y esto
negrita</strong> y esto
no lo es.
no lo es.

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

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

Html: sintaxis

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

Html: sintaxis

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

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

Html: etiquetas

<p> Párrafo
<a> Vínculo (ancla)
<strong> Negrita
<em> Cursiva
<h1>…<h6> Títulos de 1 al 6

Html: anidación

Algunas
<p>
etiquetas
pueden Esto es un párrafo
contener a <a>y esto es un vínculo
otras
dentro del párrafo.
</a> Esto es sólo
párrafo.
</p>
Esto no es párrafo ni
vínculo.

Html: anidación

• Y otras pueden contenerse a sí mismas,
como <div>, <ul>, <ol>
<div>
Esto es una "div", y
<div>
esto es una sub "div"
dentro de otra
</div>
</div>

Html: anidación

• La etiqueta que está dentro de otra se
llama hija (child).
• La etiqueta que contiene a otra es
padre (parent) de ésta.

<padre>Esta etiqueta actúa
como contenedor <hija>esta
etiqueta está dentro de
otra</hija></padre>

Html: anidación

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

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

<etiqueta atributo="valor">
bla bla bla…
</etiqueta>

Html: atributos

Algunas etiquetas que necesitan atributos para ser útiles

<a href="http://fondiu.cl">
<img src="images/foto.jpg">
<div class="menu">
<input type="button">
<form action="http://google.com">

Html: atributos

Es usual que las etiquetas combinen dos o más atributos:

<a href=http://fondiu.cl
target="_blank">

<img src="images/foto.jpg"
width="100" height="50" />

Html: página web básica

• Una página Web se divide en dos
secciones: <head> y <body>,
encerradas por una etiqueta <html>
que define el documento

<html>
<head>…</head>
<body>…</body>
</html>

Html: head

• 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: etiquetas head

<link> Referencia a externo (NO vínculo)
<meta> Metainformación
<title> Título (pestaña/Google)
<style> Declaración de estilo CSS
<script> Bloque de texto JavaScript

FAVICON – Se muestra gracias a una etiqueta <link>

Html: body

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

• Las etiquetas block son cajas que poseen
un carril "dedicado" para ellos. Además
poseen dimensiones, fondo y posición.

Block

Block (predeterminado)

Block

Html: etiquetas block

<form> Formulario
<div> División no semántica
<p> Párrafo
<h1>…<h6> Encabezados
<blockquote> Bloque de cita
<ul> y <ol> Listados
<li> Elemento de lista

Html: INLINE

• Las etiquetas inline se comportan como
letras o un destacador: siguen el flujo
del texto dentro de un elemento block.

block
{ 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>

Html: etiquetas inline

<a> Vínculo
<strong> Negrita
<em> Cursiva
<span> Fragmento no semántico
<abbr> Abreviatura
<acronym> Acrónimo

Html: block v/s INLINE

Block Inline
• Contiene texto • Va junto con el texto
• Es una "caja" • Es un "destacador"
• Ocupa su carril • Va dentro de un
propio elemento block

Html: clases & ids

• 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

<a class="grande">Click aquí</a>

<div class="grande">Hola</div>

<ul id="menu">…</ul>

<span class="destacado" id="principal">
Texto importante </span>

Html: class & ids

Class ID
• Se puede usar varias • Se usa una sola vez
veces en la página en la página
• Sirve para agrupar • Sirve para distinguir
elementos comunes un elemento único
• Un elemento puede • Un elemento sólo
tener varias clases 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: funcionamiento

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

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

Sin CSS Con CSS

CSS: sintaxis

selector {
regla1:valor;
regla2:valor2;
}

Css: sintaxis

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

a {
color:red;
}

Css: sintaxis

Sin CSS

a {
color:red;
}

Css: selectores

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

gato Etiqueta <gato>
.gris class="gris"
#micifuz id="micifuz"
gato.gris Sólo etiquetas <gato class="gris">
gato#micifuz Sólo etiquetas <gato id="micifuz">

Css: selectores

CSS Equivalencia

ul Etiqueta <ul>
.menu class="menu"
#sidebar id="sidebar"
ul.menu Sólo etiquetas <ul class="menu">
ul#sidebar Sólo etiquetas <ul id="sidebar">

Css: selectores

CSS Equivalencia

.red <div class="red">
<p>
<strong class="red">
…
</strong>
</p>
</div>
<h1 class="red">…</h1>

Css: selectores

CSS Equivalencia

div.red <div class="red">
<p>
…
</strong>
</p>
</div>

Css: selectores

CSS Equivalencia

strong.red <div class="red">
<p>
…
</strong>
</p>
</div>

Css: selectores

Un selector puede especificar un
elemento que posea varias clases a la vez

a.gato.blanco <a class="gato
blanco">

Css: selectores

… y también un elemento que mezcle
clases y IDs

a.gato#micifuz <a class="gato"
id="micifuz">

a.gato.blanco#micifuz <a class="gato blanco"
id="micifuz">

Css: selectores

Selectores de anidación padre/hijo
El padre siempre está a la izquierda del hijo.
Sólo el elemento hijo es afectado.

CSS Equivalencia

ul li Etiquetas <li> que estén DENTRO
de una etiqueta <ul>
li ul Etiquetas <ul> que estén DENTRO
de una etiqueta <li>

Css: selectores

Selectores de anidación padre/hijo
El padre siempre está a la izquierda del hijo.
Sólo el elemento hijo es afectado.

ul li <ul>
<li>…</li>
</ul>

li ul <li>
<ul>…</ul>
</li>

Css: selectores

CSS Equivalencia

p a <p>
<a href="#">…</a>
</p>

p strong a <p>
<strong>
<a href="#">…</a>
</strong>
</p>

Css: selectores

CSS Equivalencia

p strong a <p>
<a href="#">…</a>
<strong>
<a href="#">…</a>
</strong>
</p>

Css: selectores

CSS Equivalencia

body div <body>
<div>
<div>
<div>…</div>
</div>
</div>
</body>

Css: selectores

CSS Equivalencia
<div>
div p
<p>
<strong>…</strong>
</p>
</div>
<p>…</p>
<div>
<div>
<p>…</p>
</div>
</div>

Css: selectores

CSS Equivalencia

p .hola <p>
<span class="hola">
…
</span>
<em class="hola">
…
</em>
</p>
<span class="hola">…</span>

Css: selectores

• En una sola declaración CSS pueden
juntarse varios selectores, unidos por
comas

a, div, strong {
color:red;
}

Css: selectores

CSS Equivalencia

a, .hola <p>
<span class="hola">
…
</span>
<a class="chao">
…
</a>
</p>
<p class="hola">…</p>

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

CSS

a { Hover me!
color:blue;
}

a:hover { Hover me!
color:red;
}

Css: pseudo-clases

CSS

a { Click me!
color:blue;
}

a:active { Click me!
color:green;
}

Css: pseudo-clases

CSS
input {
background-
color:white;
}

input:focus {
background- hola
color:yellow;
}

especificaciones html

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

• La especificación "clásica" que usan la
mayoría de las páginas
• Sus 2 versiones más conocidas: Strict y
Transitional

especificaciones: Xhtml

• 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: HTML 5

• 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

Html 5: etiquetas

Etiquetas media

<canvas> Lienzo de dibujo
<video> Se imaginarán :)
<audio> Se imaginarán :)

Html 5: etiquetas

Etiquetas semánticas

<nav> Menú
<article> Unidad de contenido (ej: post de blog)
<aside> Sidebar
<header> Encabezado
<footer> Pie de página
<section> Sí. Es una sección (grupo de unidades)

html: forms

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

<form action="http://google.com"
method="POST">

html: forms

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

method="POST">

html: forms

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

method="POST">

html: forms

¿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

forms: etiquetas

Controles de formulario

<input type="text"> Campo de texto (1 línea)
<input type="password"> Campo de contraseña
<input type="button"> Botón genérico
<input type="submit"> Botón de envío form
<input type="checkbox"> Casilla de verificación
<input type="radio"> Botón de radio
<input type="file"> "Examinar…"

forms: etiquetas


<input type="image">
<textarea> Campo texto multilínea
<select>
<option> Elemento de menú select
<optgroup> Grupo de imagen
<fieldset> Agrupador de campos
<legend> 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 CSS
Tablas Reglas
URLs Modelo de caja
Reseña de JavaScript Posicionamiento
Fondo
Cascada
Códigos de color

Curso HTML y CSS, parte 1

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Curso HTML y CSS, parte 1

Más de Sergio Nouvel Castro

Curso HTML y CSS, parte 1