Universidad de Chile - Magister Artes Mediales
ARTE / INTERNET
Clase 4: HTML
UNIDADES WEB
{}
lenguaje de las paginas web
html
css
lenguaje de estilos visuales
(){} js
php
lenguaje interactivo del lado del cliente lenguaje interactivo del lado del servidor
XML
xml
eXtensible Markup Language es un archivo de texto pero no para ser leido, sino que para ser interpretado sirve para introducir datos estructurados usa etiquetas solo para delimitar datos, deja su interpretacion a la aplicacion que los lee es prolijo en su sintaxis es universal y gratuito, no depende de plataformas especificas
XML
xml
Tove Jani Reminder Don't forget me this weekend!
parser XML
nota
to
Tove
from heading
Jani Reminder
body
Don't forget...
OBJETOS
nota
to
Tove
from heading
Jani Reminder
body
Don't forget...
"valor 2" "valor 3" objeto
atributo atributo atributo atributo
1 2 3 4
"valor 1" "valor 4"
OBJETOS clase X
atributo x atributo y
"valor 1"
"valor 3"
"valor 2" situación 1
objeto objeto objeto objeto objeto
X X X X X
atributo atributo atributo atributo atributo
x x x x x
"valor "valor "valor "valor "valor
situación 2
objeto objeto objeto objeto objeto
X X X X X
atributo x
1" 1" 1" 1" 1"
XML Y HTML
xml
Tove Jani Reminder Don't forget me this weekend!
>> xml puede inventar sus etiquetas
html
hola mundo Hola mundo!
>> html trabaja con etiquetas predeterminadas
HTML
html
HiperText Markup Language es el lenguaje que describe la estructura de un documento web esta basado en etiquetas significativas existe un catalogo de etiquetas validas si estas etiquetas son estructurales pueden anidar otras etiquetas si estas etiquetas son de contenidos pueden ser pobladas con datos
ETIQUETAS contenido contenido enlace etiqueta de tipo "block", si se corta etiqueta de tipo "inline", no se corta
DOM DE HTML ventana frame,locacion,historial
documento enlaces,imagenes,capas
formulario textarea,text, radio checkbox, select, button, submit, etc
Document Object Model es un modelo de objeto de un archivo de formato html organiza tanto archivos de extension .html como .php porque esta estructura es interpretada en el navegador y no en el servidor es una interfaz de programacion de aplicaciones (API) que se utiliza para buscar y manipular las entidades html
HTML 4 VS
html 4
html 5
HTML 5
hola mundo Hola mundo!
hola mundo Hola mundo!
HTML MINIMO
Doctype
root element
hola mundo
head: recursos no visuales
Hola mundo!
body: recursos visuales
HTML TIPICO Doctype metadatos
fragmentos de otros lenguajes: js,css,php
despliegue visual
hola regla css funcion javascript Hola mundo!
este es un parrafo
informacion para buscadores
intrucciones para el navegador php se ejecuta en el servidor y elabora codigo html adicional informacion que ve el usuario
HEAD hola mundo body{ } .class{ } #id{ }
archivo externo
funcion javascript a ejecutar del lado del cliente
archivo externo
archivo externo
CASCADE STYLE SHEET CSS
{} css
Cascade Style Sheet es el lenguaje que modifica las propiedades de estilo de los elementos html en tanto objetos esta basado en propiedades validas para cada etiqueta permite separar la programación del diseño puede ser asignados de varias maneras distintas nunca entra en contradicción, ante varias reglas simplemente evalúa cual es la mas relevante
ESTILOS CSS contenido Hola mundo!
objeto div
estilo eventos metadatos
Hola mundo! css interaccion identificar
Hola mundo! Hola mundo! .clase {propiedad:valor;} Hola mundo! #identificado {propiedad:valor;} Hola mundo! document.getElementById('javascript').style.propiedad="valor";
EXTERNALIZACION .interno {color:#00f;}
{} css .externo{ color:#0f0; width:120px; }
html
FORMATO CSS comienzo
selector {
}
el valor siempre incluye unidades: #,px,em,
asignación
propiedad1:valor; propiedad2:valor; propiedad3:valor;
fin propiedad
fin
selector {propiedad1:valor;propiedad2:valor;propiedad3:valor;} style="propiedad1:valor;propiedad2:valor;propiedad3:valor;"
http://www.w3schools.com