3. 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)
4. 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
5. 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”
6. 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".
7.
8. html: orígenes
• Hoy, el navegador (Firefox, Chrome, IE)
es el "compositor" y recibe las
instrucciones del autor del código para
mostrarlas visualmente
9. 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”)
10. 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>
11. 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.
12. 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.
14. 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>
15. Html: etiquetas
<p> Párrafo
<a> Vínculo (ancla)
<strong> Negrita
<em> Cursiva
<h1>…<h6> Títulos de 1 al 6
16. 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.
17. 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>
18. 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>
19. 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.
20. 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>
21. 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">
22. 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" />
23. 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>
24. 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.
25. 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>
26. 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.
27. 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
28. 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
29. 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>
31. 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
32. 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
34. 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
41. 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)
42. 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
43. 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
50. 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>".
51. 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"
57. Css: selectores
Un selector puede especificar un
elemento que posea varias clases a la vez
a.gato.blanco <a class="gato
blanco">
58. 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">
59. 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>
60. 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>
61. Css: selectores
CSS Equivalencia
p a <p>
<a href="#">…</a>
</p>
p strong a <p>
<strong>
<a href="#">…</a>
</strong>
</p>
62. Css: selectores
CSS Equivalencia
p strong a <p>
<a href="#">…</a>
<strong>
<a href="#">…</a>
</strong>
</p>
63. Css: selectores
CSS Equivalencia
body div <body>
<div>
<div>
<div>…</div>
</div>
</div>
</body>
64. Css: selectores
CSS Equivalencia
<div>
div p
<p>
<strong>…</strong>
</p>
</div>
<p>…</p>
<div>
<div>
<p>…</p>
</div>
</div>
68. 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
72. 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
73. 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
74. 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
75. 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
76. Html 5: etiquetas
Etiquetas media
<canvas> Lienzo de dibujo
<video> Se imaginarán :)
<audio> Se imaginarán :)
77. 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)
78. 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.
79. 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
80. html: forms
• Un formulario SIEMPRE está envuelto
por una etiqueta <form>, que define
dónde será enviado.
<form action="http://google.com"
method="POST">
81. 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"
<form action="http://google.com"
method="POST">
82. 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).
<form action="http://google.com"
method="POST">
83. 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
84. 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…"
85. forms: etiquetas
Controles de formulario
<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
87. 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
88. 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
89. 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
90. próxima clase
HTML CSS
Tablas Reglas
URLs Modelo de caja
Reseña de JavaScript Posicionamiento
Fondo
Cascada
Códigos de color