Openhtmlycss 110721220625 Phpapp01

Ctedras paralelas
HTML y CSS 1
www.fondiu.cl twitter: @_fondiu
Cmo funcionan las pginas web
Peticin (URL y/o conjunto de datos)
Servidor
Usuario
Navegador
Respuesta (Usualmente HTML con referencias a archivos)
Qu es html
Lenguaje de marcado que contiene los elementos de una pgina Web El navegador interpreta este lenguaje y muestra los resultados HTML = Contenido
Qu es CSS
Lenguaje de instrucciones que determina cmo se visualiza o presenta una pgina Web => Estilo Colores, posiciones, tamaos, bordes, tipografas, etc. CSS = Presentacin
html: orgenes
Antiguamente, el editor y el compositor de texto eran personas distintas El editor no poda previsualizar el texto, y el compositor no saba qu destacar El editor inclua instrucciones en el texto: "esto es cursiva", "esto es ttulo", "esto es una nota al pie".
html: orgenes
Hoy, el navegador (Firefox, Chrome, IE) es el "compositor" y recibe las instrucciones del autor del cdigo para mostrarlas visualmente
Qu es html
HTML = Hypertext Markup Language Hipertexto = Links Markup = Marcado semntico (esto es un ttulo, esto es un prrafo, esto es un botn)
Html: sintaxis
Lenguaje de etiquetas Las etiquetas delimitan informacin, similar a marcar un texto con corchetes o parntesis
apertura
cierre
<etiqueta> contenido... </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 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
<irona> Qu bonito te queda ese vestido! </irona>
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 continuacin, un salto de lnea: <br/> Gracias, salto de lnea.</p>
Html: etiquetas
<p> <a> <strong> <em> <h1><h6>
Prrafo Vnculo (ancla)

Negrita Cursiva
Ttulos de 1 al 6
Html: anidacin
Algunas etiquetas pueden contener a otras
<p> Esto es un prrafo <a>y esto es un vnculo dentro del prrafo. </a> Esto es slo prrafo. </p> Esto no es prrafo ni vnculo.
Html: anidacin
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: anidacin
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 acta como contenedor <hija>esta etiqueta est dentro de otra</hija></padre>
Html: anidacin
No todas las etiquetas permiten anidacin de otras. Algunas no aceptan ciertos tipos de anidacin: <a> no acepta <p> o <h1>, por ejemplo.
Html: atributos
Algunas etiquetas necesitan atributos. Por ejemplo, un link necesita saber dnde 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 ms atributos:
<a href=http://fondiu.cl target="_blank">
<img src="images/foto.jpg" width="100" height="50" />
Html: pgina web bsica
Una pgina 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 seccin <head> es invisible, y contiene las etiquetas que definen la pgina, su ttulo y su metainformacin, as como la vinculacin a CSS y a JavaScript.
Html: etiquetas head
<link> <meta> <title> <style> <script>
Referencia a externo (NO vnculo) Metainformacin

Ttulo (pestaa/Google) Declaracin de estilo CSS
Bloque de texto JavaScript
FAVICON Se muestra gracias a una etiqueta <link>
Html: body
La seccin <body> enmarca todo el contenido visible en la pgina, 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. Adems poseen dimensiones, fondo y posicin.
Block
Block (predeterminado)
Block
Html: etiquetas block
<form> <div> <p> <h1><h6> <blockquote> <ul> y <ol> <li>
Formulario
Divisin no semntica Prrafo

Encabezados Bloque de cita
Listados
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 prrafo, y esto es un elemento inline dentro de este prrafo.
<p>Hola, esto es un prrafo, <span> y esto es un elemento inline</span> dentro de ese prrafo.</p>
Html: etiquetas inline
<a> <strong> <em> <span> <abbr> <acronym>
Vnculo
Negrita Cursiva
Fragmento no semntico Abreviatura
Acrnimo
Html: block v/s INLINE
Block
Contiene texto Es una "caja" Ocupa su carril propio
Inline
Va junto con el texto Es un "destacador" Va dentro de un 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 ms 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
Se puede usar varias veces en la pgina Sirve para agrupar elementos comunes Un elemento puede tener varias clases
ID
Se usa una sola vez en la pgina Sirve para distinguir un elemento nico Un elemento slo 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="Demstenes"> </animal>
<animal class="perro" id="Pulgoso"> </animal>

<animal class="perro" id="Cachupn"> </animal>
Html: clases & ids
<animal class="gato blanco" id="Micifuz"> </animal>

<animal class="gato gris" id="Demstenes"> </animal>
<animal class="perro gris" id="Pulgoso"> </animal>

<animal class="perro blanco" id="Cachupn"> </animal>
CSS: funcionamiento
CSS toma los elementos en <body> anteriormente mencionados y modifica su aspecto Puede cambiar color, forma, posicin, profundidad e incluso comportamiento (de inline a block y viceversa)
CSS: funcionamiento
El navegador tiene algunos estilos predefinidos (fondo blanco, texto negro, vnculos azules, Times New Roman) CSS permite cambiar completamente el aspecto de una pgina
CSS: ventajas
REUTILIZACIN Permite vincular muchas pginas a un solo archivo CSS Permite modificar muchos elementos de una sola vez Permite separar el contenido de la presentacin: cambiar diseos es fcil
CSS: funcionamiento
Sin CSS
Con CSS
CSS: funcionamiento
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 cmo 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 condicin 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 vnculos sean rojos" "Pon el fondo de color negro"
Css: selectores
CSS
Equivalencia
Etiqueta <gato> class="gris"
gato .gris #micifuz gato.gris gato#micifuz
id="micifuz"
Slo etiquetas <gato class="gris"> Slo etiquetas <gato id="micifuz">
Css: selectores
CSS
Equivalencia
ul .menu #sidebar ul.menu ul#sidebar
Etiqueta <ul> class="menu"
id="sidebar"
Slo etiquetas <ul class="menu"> Slo 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
Css: selectores
CSS
Equivalencia
strong.red
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 tambin un elemento que mezcle clases y IDs

a.gato#micifuz <a class="gato" id="micifuz">
<a class="gato blanco" id="micifuz">
a.gato.blanco#micifuz
Css: selectores
Selectores de anidacin padre/hijo
El padre siempre est a la izquierda del hijo. Slo el elemento hijo es afectado.
CSS
Equivalencia
ul li
Etiquetas <li> que estn DENTRO

de una etiqueta <ul>
li ul
Etiquetas <ul> que estn DENTRO
de una etiqueta <li>
Css: selectores
Selectores de anidacin padre/hijo
El padre siempre est a la izquierda del hijo. Slo el elemento hijo es afectado.
ul li
<ul> <li></li> </ul>

<li> <ul></ul> </li>
li ul
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 p
<div> <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 declaracin 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 { color:blue; } a:hover { color:red; }
Hover me!
Hover me!
Css: pseudo-clases
CSS
a { color:blue; } a:active { color:green; }
Click me!
Click me!
Css: pseudo-clases
CSS
input { backgroundcolor:white; } input:focus { backgroundcolor:yellow; }
hola
especificaciones html
HTML es un lenguaje que evoluciona en el tiempo Hoy en da coexisten 3 especificaciones principales: HTML 4, XHTML 1 y HTML 5
especificaciones: html 4
La especificacin "clsica" que usan la mayora de las pginas Sus 2 versiones ms conocidas: Strict y Transitional
especificaciones: Xhtml
Combina HTML 4 con el estndar XML Ms 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 Cdigo ms semntico Ms posibilidades de interfaz Mejor manejo de errores de usuario
Html 5: etiquetas
Etiquetas media
<canvas> Lienzo de dibujo <video> Se imaginarn :) <audio> Se imaginarn :)
Html 5: etiquetas
Etiquetas semnticas
<nav> <article> <aside> <header> <footer> <section>
Men Unidad de contenido (ej: post de blog)
Sidebar
Encabezado Pie de pgina
S. Es una seccin (grupo de unidades)
html: forms
Los formularios permiten a una pgina Web enviar y recibir datos de otras pginas, un script o base de datos. Cada vez que envas un e-mail, comentas en un blog, te suscribes a un newsletter o cambias tu foto en Facebook ests enviando un formulario.
html: forms
Los formularios realizan 3 funciones bsicas: 1. Ofrecen controles de interfaz para ingresar la informacin 2. Validan la informacin ingresada 3. Envan la informacin visible y oculta al destino especificado
html: forms
Un formulario SIEMPRE est envuelto por una etiqueta <form>, que define dnde ser enviado.
<form action="http://google.com"
method="POST">
html: forms
El atributo action especifica el lugar donde sern recibidos y procesados los datos del formulario. "Envame esto a http://google.com por favor, y me procesai los datos, atito"
method="POST">
html: forms
El atributo method especifica qu tipo de envo se har: GET slo consulta datos y no modifica nada (slo lectura) POST lee y enva datos y espera la respuesta del servidor (lectura y escritura).
method="POST">
html: forms
Qu datos se envan? Todos los recopilados en elementos de "entrada" (inputs) Esto incluye elementos que interactan con el usuario (controles) como elementos invisibles
forms: etiquetas
Controles de formulario
<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 lnea)
Campo de contrasea
Botn genrico Botn de envo form
Casilla de verificacin
Botn de radio
"Examinar"
forms: etiquetas
<input type="image"> <textarea> <select> <option> <optgroup> <fieldset> <legend>
Campo texto multilnea

Elemento de men select
Grupo de imagen
Agrupador de campos
Ttulo del fieldset
forms: etiquetas
<input type="hidden"> Muahahahaha
glosario
HTML: Lenguaje de marcado para pags Web / Contenido CSS: Lenguaje de estilos / Presentacin Apariencia
Etiqueta: Unidad estructural delimitador de contenido Atributo: Datos complementarios para etiquetas
Head: Encabezado (invisible) de pgina Web Meta: Informacin de una pgina acerca de s misma
Body: Seccin visible de una pgina Web
glosario
Anidacin: Etiquetas contenidas dentro de otras Padre/Hijo: Relacin 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) Declaracin CSS: Conjunto de reglas que modifican un
elemento
Selector: Definicin 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
prxima clase
HTML
CSS
Tablas URLs
Resea de JavaScript
Reglas Modelo de caja

Posicionamiento Fondo
Cascada
Cdigos de color

Openhtmlycss 110721220625 Phpapp01

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Openhtmlycss 110721220625 Phpapp01

Uploaded by

Copyright:

Available Formats

Ctedras paralelas

www.fondiu.cl twitter: @_fondiu

Cmo funcionan las pginas web

Peticin (URL y/o conjunto de datos)

Respuesta (Usualmente HTML con referencias a archivos)

<etiqueta> contenido... </etiqueta>

Esto es negrita y esto no lo es.

<irona> Qu bonito te queda ese vestido! </irona>

<p> <a> <strong> <em> <h1><h6>

Prrafo Vnculo (ancla)

Y otras pueden contenerse a s mismas, como <div>, <ul>, <ol>

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

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

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

Html: pgina web bsica

Html: etiquetas head

<link> <meta> <title> <style> <script>

Referencia a externo (NO vnculo) Metainformacin

Bloque de texto JavaScript

FAVICON Se muestra gracias a una etiqueta <link>

Html: etiquetas block

<form> <div> <p> <h1><h6> <blockquote> <ul> y <ol> <li>

Divisin no semntica Prrafo

Hola, esto es un prrafo, y esto es un elemento inline dentro de este prrafo.

Html: etiquetas inline

<a> <strong> <em> <span> <abbr> <acronym>

Html: block v/s INLINE

Html: clases & ids

Html: clases & ids

Html: class & ids

Html: clases & ids

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="perro" id="Pulgoso"> </animal>

Html: clases & ids

<animal class="gato blanco" id="Micifuz"> </animal>

<animal class="perro gris" id="Pulgoso"> </animal>

selector { regla1:valor; regla2:valor2; }

gato .gris #micifuz gato.gris gato#micifuz

ul .menu #sidebar ul.menu ul#sidebar

Etiqueta <ul> class="menu"

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

<a class="gato blanco">

y tambin un elemento que mezcle clases y IDs

Etiquetas <li> que estn DENTRO

Etiquetas <ul> que estn DENTRO

de una etiqueta <li>

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

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

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

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

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

a { color:blue; } a:hover { color:red; }

a { color:blue; } a:active { color:green; }

<canvas> Lienzo de dibujo <video> Se imaginarn :) <audio> Se imaginarn :)

<nav> <article> <aside> <header> <footer> <section>

Men Unidad de contenido (ej: post de blog)

S. Es una seccin (grupo de unidades)

Campo de texto (1 lnea)