Universidad de Chile - Magister Artes Mediales ARTE / INTERNET. Clase 4: HTML

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Universidad de Chile - Magister Artes Mediales ARTE / INTERNET. Clase 4: HTML"

Mario Sandoval Velázquez
hace 7 años
Vistas:

1 Universidad de Chile - Magister Artes Mediales ARTE / INTERNET Clase 4: HTML

2 UNIDADES WEB </> html {} css lenguaje de las paginas web lenguaje de estilos visuales (){} js <?> php lenguaje interactivo del lado del cliente lenguaje interactivo del lado del servidor

3 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

4 XML </> xml <?xml version="1.0"?> <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> parser XML nota to from heading body Tove Jani Reminder Don't forget...

5 OBJETOS nota to from heading body Tove Jani Reminder Don't forget... objeto "valor 2" atributo 1 atributo 2 atributo 3 atributo 4 "valor 1" "valor 3" "valor 4"

6 OBJETOS clase X atributo x atributo y "valor 1" "valor 3" "valor 2" situación 1 atributo x atributo x atributo x atributo x atributo x "valor 1" "valor 1" "valor 1" "valor 1" "valor 1" situación 2 atributo x

7 XML Y HTML </> xml <?xml version="1.0"?> <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> >> xml puede inventar sus etiquetas </> html <!DOCTYPE> <html> <head> <title>hola mundo</title> </head> <body>hola mundo!</body> </html> >> html trabaja con etiquetas predeterminadas

8 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

9 ETIQUETAS <etiqueta> contenido </etiqueta> <div> contenido </div> <etiqueta /> <img src="carpeta/imagen.jpg" width="300"/> <etiqueta atributo="parametros=valor"></etiqueta> <a href="enlace.html" target="_new">enlace</a> etiqueta de <h1>tipo "block"</h1>, si se corta etiqueta de <span>tipo "inline"</span>, no se corta

10 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 e s u n a i n t e r f a z d e p r o g r a m a c i o n d e aplicaciones (API) que se u t i l i z a p a r a b u s c a r y manipular las entidades html

11 HTML 4 VS HTML 5 </> html 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>hola mundo</title> </head> <body>hola mundo!</body> </html> </> html 5 <!DOCTYPE> <html> <head> <title>hola mundo</title> </head> <body>hola mundo!</body> </html>

12 HTML MINIMO Doctype root element <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " DTD/xhtml1-transitional.dtd"> <html xmlns=" <head> <title>hola mundo</title> </head> <body> </body> </html> Hola mundo! head: recursos no visuales body: recursos visuales

13 HTML TIPICO Doctype metadatos fragmentos de otros lenguajes: js,css,php despliegue visual <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " DTD/xhtml1-transitional.dtd"> <html xmlns=" <head> <title>hola</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css.css" /> <style type="text/css"> regla css </style> <script type="text/javascript"> funcion javascript </script> <?php codigo php?> </head> <body> <div> <h1>hola mundo!</h1> <p>este es un parrafo</p> <img src="imagen.jpg"/>  </div> </body> </html> informacion para buscadores intrucciones para el navegador php se ejecuta en el servidor y elabora codigo html adicional informacion que ve el usuario

14 HEAD <title>hola mundo</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="metatags, buscador, html, pagina web" /> <meta name="description" content="descripcion de la pagina web" /> <meta name="author" content="yo" /> <meta http-equiv="refresh" content="30;url= /> <link rel="shorcut icon" href="recursos/favicon.ico"/> <link rel="stylesheet" type="text/css" href="recursos/estilo.css"/> <style type="text/css"> body{ }.class{ } #id{ } </style> <script type="text/javascript" src="recursos/scripts.js"></script> <script type="text/javascript"> funcion javascript a ejecutar del lado del cliente </script> archivo externo archivo externo <?php include("recursos/scripts.php");?> archivo externo <?php codigo php a ejecutar del lado del servidor, desaparece del lado del cliente?>

15 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

16 ESTILOS CSS <div>hola mundo!</div> objeto div contenido estilo eventos metadatos Hola mundo! css interaccion identificar <div style="propiedad:valor">hola mundo!</div> <div class="clase">hola mundo!</div>.clase {propiedad:valor;} <div id="identificado">hola mundo!</div> #identificado {propiedad:valor;} <div id="javascript">hola mundo!</div> document.getelementbyid('javascript').style.propiedad="valor";

17 EXTERNALIZACION <html> <head> <link rel="stylesheet" href="css.css"/> <style>.interno {color:#00f;} </style> </head> <body> {} css.externo{ color:#0f0; width:120px; } <div style="color:#f00"></div> <div class="interno"></div> <div class="externo"></div> </body> </html> </> html

18 FORMATO CSS comienzo asignación selector { propiedad1:valor; propiedad2:valor; propiedad3:valor; } el valor siempre incluye unidades: #,px,em, fin propiedad fin selector {propiedad1:valor;propiedad2:valor;propiedad3:valor;} style="propiedad1:valor;propiedad2:valor;propiedad3:valor;"

Documentos relacionados

Problemas típicos con HTML

Introducción a Lenguajes web Estela Conde Álvarez Isdefe 4 Noviembre 2 008 Introducción al Diseño Para Td Todos en las TIC Problemas típicos con HTML Permitía errores Cada navegador etiquetas propias Mezcla