Arte e Internet - Magister Artes Mediales - Universidad de Chile

Referencia HTML Etiquetas Todas los nombre de etiquetas y atributos deben escribirse en minusculas, los valores de los atributos deben escribirse entre comillas y las anidaciones deben abrirse y cerrarse en el orden correcto a la estructura que representan Etiquetas que pueden contener otras etiquetas (con apertura y cierre) contenido Etiquetas que no pueden contener otras etiquetas (se cierran sobre si mismas) Etiquetas anidadas contenido Etiquetas con atributos contenido

Etiquetas especiales Salto de Linea
Regla Horizontal Espacio Inquebrantable (no-wrap)   Comentario Multilinea HTML

Pagina Basica (html5) ! ! titulo

--> --> --> --> --> --> --> --> --> -->

indica la validacion y el elemento raiz indica la apertura del elemento raiz apertura de los recursos no visuales importante para los acentos! titulo y nombre de favorito cierre de los recursos no visuales apertura de los recursos visuales espacio para contenidos cierre de los recursos visuales cierre del elemento raiz cc fernando sanchez m

Arte e Internet - Magister Artes Mediales - Universidad de Chile

Atributos Estandar Id (identificador unico) Class (identificador de clase) Style (Acceso a propiedades de estilo ) Title(subtitulo que aparece cuando se sobrevuela con el mouse)

CSS en el Head ! ! ! p { propiedad:valor;} ! ! .class { propiedad:valor;} ! ! #id { propiedad:valor } ! ! #id { propiedad:valor; ! ! ! propiedad:valor; ! ! ! propiedad:valor; ! ! ! propiedad:valor;} !

/* entidad html */ /* clase coincidente */ /* id coincidente */ /* un selector */ /* varias propiedades */

Javascript en el Head ! ! ! ! // Aca va codigo Javascript !

Externalizacion de Archivos CCS y Js CSS externo Javascript externo

cc fernando sanchez m

Arte e Internet - Magister Artes Mediales - Universidad de Chile

Eventos Estandar Propios del body, los eventos son otro tipo de atributo vinculados a tiempo o a interacciones Propios de formularios, asociados al llenado o cambio de informacion en un formulario Eventos de Mouse, lee los movimientos del mouse, son aplicables a todos los elementos visibles

Enlaces Enlace externo absoluto, busca en servidor externo enlace Enlace local absoluto, baja a la raiz y sube desde ahi enlace enlace Enlace local relativo, sube una carpeta (carpeta hija) enlace Enlace local relativo, busca en la misma carpeta (carpeta propia) enlace Enlace local relativo, baja una carpeta (carpeta padre) enlace Enlace local relativo, baja dos carpetas (carpeta abuela) enlace Enlace local relativo, baja dos carpetas y luego sube una (carpeta tia o padre) enlace Enlace local relativo, baja dos carpetas y luego sube dos (carpeta hermana o la misma) enlace Enlace local relativo, baja cuatro carpetas (carpeta tatarabuela) enlace

cc fernando sanchez m

Arte e Internet - Magister Artes Mediales - Universidad de Chile

Etiquetas de Texto Etiqueta de Parrafo, tipo block: fuerza salto de linea doble, etiqueta semantica

etiqueta de parrafo

Etiqueta de Titulo, tipo block: fuerza salto de linea doble y texto en negrita, etiqueta semantica etiqueta de titulo grande etiqueta de titulo algo grande etiqueta de titulo menos grande etiqueta de titulo tamaño normal etiqueta de titulo menos pequeño etiqueta de titulo pequeño Etiqueta Bold, texto en negrita etiqueta de negrita Etiqueta Italica, texto con enfasis etiqueta de italica



Etiqueta Pre, preserva los espacio y saltos de linea del codigo fuente etiqueta de texto preformateado Etiqueta Code, preserva los espacio y saltos de linea del codigo fuente, etiqueta semantica etiqueta de formato de codigo Etiqueta Span, permite agrupar varios elementos sin crear un bloque etiqueta comodín

Etiquetas de Listas Lista Ordenada, lista elementos en orden jerarquico (1, 2, 3, 4, etc. )

item 1

item 2

Lista Desordenada, lista elementos sin establecer jerarquia (se listan con un simbolo adelante)

• item 1
• item 2

Etiqueta de Definicion Definicion, lista los elementos con una sangria segun su nivel item principal item secundario cc fernando sanchez m

Arte e Internet - Magister Artes Mediales - Universidad de Chile

Etiqueta de Tabla Tabla, lista elementos en filas y columnas

fila 1, columna 1	fila 1, columna 2
fila 2, columna 1	fila 2, columna 2

Etiquetas de Medios Img, Etiqueta de Imagen, permite jpg, jpeg, png, gif, las dimensiones son opcionales Iframe, Etiqueta para insertar HTML externo Object, Etiqueta de Archivo PDF Object, Etiqueta de Archivo JAVA Embed, Etiqueta para insertar video Flash

Etiquetas de Formularios Formulario, Elemento para procesar informacion donde el usuario ingresa contenidos ! ! ! ! ! ! boton ! ! ! ! ! ! ! ! ! opcion 1 ! ! opcion 2 ! ! opcion 3 ! ! cc fernando sanchez m

Arte e Internet - Magister Artes Mediales - Universidad de Chile

Etiqueta de Division Div, genera divisiones de tipo Block que pueden estilarse y acomodarse generando estructuras, si un div esta vacio entonces no se "renderea" contenido contenido contenido contenido contenido contenido contenido contenido contenido

Ejemplo con mucho estilo ! ! Divs ! ! ! div {background-color:red;width:500px} ! ! .cajas{width:200px;height:200px;margin:10px} ! ! #unico{width:400px;background-color:blue} ! ! #unico2{width:100px;height:100px;margin:100px;backgroundcolor:yellow;border:8px groove aqua;padding:10px} ! ! #flotante{float:left} ! ! yo soy generico ! yo soy generico ! yo soy de clase caja ! yo soy generico ! yo soy de clase caja ! yo soy de clase caja pero igual soy especial ! yo si que soy especial ! yo floto

cc fernando sanchez m