css y html

Cátedras paralelas

HTML y CSS 1

www.fondiu.cl
twitter: @_fondiu

Cómo funcionan las páginas web

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

Usuario

Servidor

Navegador

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

cierre


…contenido...


Html: sintaxis

Esto es una
negrita y esto no lo es.
Esto está en cursiva y
esto no lo está.
Esto es un perro y
esto no lo es.

Html: sintaxis
Esto esnegrita y esto
no lo es.

Esto es negrita y esto
no lo es.

Esto está en
cursiva y esto no
lo está.

Esto está en cursiva y
esto no lo está.

Esto es un
perro y esto no
lo es.

y esto no lo es.

Html: sintaxis


Qué bonito te queda ese vestido!


Html: sintaxis

• No todas las etiquetas tienen apertura y
cierre: algunas son un elemento aislado
• Las etiquetas que nocierran reciben un
"/" al final para marcar su cierre.
A continuación, un salto
de línea:

Gracias, salto de línea.

Html: etiquetas





…

Párrafo
Vínculo (ancla)
Negrita
Cursiva

Títulos de 1 al 6

Html: anidación
Algunas
etiquetas
pueden
contener a
otras


Esto es un párrafo
y esto es un vínculo
dentro del párrafo.
Esto es sólo
párrafo.

Esto no es párrafoni
vínculo.

Html: anidación

• Y otras pueden contenerse a sí mismas,
como , ,

Esto es una "div", y

esto es una sub "div"
dentro de otra



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.
Esta etiqueta actúa
como contenedor esta
etiqueta está dentro de
otra

Html: anidación• No todas las etiquetas permiten
anidación de otras.
• Algunas no aceptan ciertos tipos de
anidación:
• no acepta o , 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.


bla bla bla…


Html:atributos
Algunas etiquetas que necesitan atributos para ser útiles







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





Html: página web básica

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

…
…


Html: head

• La sección es invisible, y
contiene las etiquetas que definen lapágina, su título y su metainformación,
así como la vinculación a CSS y a
JavaScript.

Html: etiquetas head







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

Html: body

• La sección enmarca todo el
contenido visible en la página,
incluyendo...