Professional Documents
Culture Documents
JENNIFFER MORENO
En el siguiente documento daremos a conocer una breve introduccin de lo que es HTML con Programacin Multimedia
UNIVERSIDAD METROPOLITANA MATERIA: PROGRAMACIN MULTIMEDIA ING. XAVIER VILLAMIL NIVEL:9no SISTEMAS 28/11/2011
Un editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de editores que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y el uso de mens permite ganar rapidez. Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas.
Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos. Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor visual posteriormente, y depurar el cdigo cuando fuera necesario. Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows. ESTRUCTURA BSICA Todos los documentos Html tienen la estructura que se muesta a continuacin, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de pginas que dividen la ventana del navegador en varios cuadros (frames). <HTML> <HEAD> <TITLE>Ttulo de la pgina</TITLE> ... </HEAD> <BODY> Aqu ira el contenido de la pgina </BODY> </HTML>
IDENTIFICADOR DEL TIPO DE IDENTIFICADOR Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>. CABECERA DE LA PGINA La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo. Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>. Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y ms se utilizan son: <link>, <style>, <script> ,<title>, <meta>
CUPERO DEL DOCUMENTO Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera <html> <head> <title> Curso de HTML </title> </head> <body> </body> </html> El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido <body bgcolor="#0000FF"> </body> </html> COLORES EN HEXADECIMAL Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F.
La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la que se encuentra la imagen
<body background="fondo.gif"> </body> </html> A travs de la etiqueta <body> tambin es posible establecer el color del texto de la pgina a travs del atributo text. <body text="#FF0000"> </body> </html> Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos no funcionan para el navegador Netscape, pero s los atributos marginwidth (anchura del margen) y marginheight (altura del margen).
</body> </html> Ttulos Los ttulos o encabezamientos se emplean al comienzo de una seccin. Las etiquetas que se usan son: Etiqueta <h1> Ttulo </h1> <h2> Ttulo </h2> <h3> Ttulo </h3> <h4> Ttulo </h4> <h5> Ttulo </h5> <h6> Ttulo </h6> Tamao de fuentes El tamao de las fuentes se puede especificar de dos maneras, una de ellas por medio de un nmero del 1 al 7 (de ms pequeo a ms grande) del siguiente modo <font size=1> Esta es la letra ms pequea que se puede conseguir </font> Otra forma es por medio de una referencia relativa: <font size="+1"> Esto es igual que poner size=4 </font> Tipos de fuentes El tipo de fuente es un atributo de FONT y <font face="Courier">Eso se ver en la fuente Courier</font> Color de las fuentes Es otro atributo de FONT. Mira en la pgina de colores para saber cmo se especifican los colores. La sintaxis es la siguiente: <font size=2 face="MS Sans Serif" color="navy">Como ves se pueden poner varios atributos separados por un espacio</font> Prrafos y bloques tiene la siguiente sintaxis Se ve Ttulo Ttulo Ttulo Ttulo Ttulo Ttulo
7
Para definir y separar bloques de texto se emplean una serie de etiquetas que definen los prrafos, texto preformateado o bloques con significado especial como direcciones o citas. Etiquetas de bloques:
trmino
de
la
Listas de definicin Estas listas se forman con el elemento que se define y su definicin. Las etiquetas son <DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:
escribimos en html <dl> <dt >Trmino 1 <dd>Definicin del elemento 1 <dt>Trmino 2 <dd>Definicin del elemento 2 <dt>Trmino 3 <dd>Definicin del elemento 3 </dl> ENLACES En general los enlaces tienen la siguiente estructura <A HREF="URL"> Texto del enlace</A> Enlace a otro lugar del mismo documento
se ver como
Trmino 1 Definicin del elemento 1 Trmino 2 Definicin del elemento 2 Trmino 3 Definicin del elemento 3
En este caso la URL se sustituye por un marcador en la misma pgina. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se ver. Veamos un ejemplo para saltar al inicio de esta pgina. Escribiramos en el lugar desde el que queremos saltar: <A HREF="#inicio"> Ir al Inicio</A> Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="inicio"> </A> Enlace a otra pgina local En este caso la URL se dar de forma relativa (igual que para poner un fondo a la pgina). Por ejemplo si tenemos dos pginas en el mismo directorio pagina1.htm y pagina2.htm y queremos poner un enlace desde la pagina1.htm a la pagina2.htm debemos escribir <a href="pagina2.htm">Ir a pagina2</a> Con esto es suficiente, no hay que crear ningn marcador a no ser que quieras ir a un sitio concreto de la pagina2.htm. En ese caso tendras que poner en el sitio adonde quieres llegar de la pagina2.htm <a name="sitio"></a> y en la pagina1.htm <a href="pagina2.htm#sitio>Ir a sitio de la pgina 2</a>
Enlace con una direccin de correo Este es un enlace un poco diferente, veamos un ejemplo <A HREF="mailto: jmoreno@fjubilacioncesantia.org.ec"> jmoreno@fjubilacioncesantia.org.ec </A> que se ve como jmoreno@fjubilacioncesantia.org.ec Enlace para descargar un fichero En la URL se poner la ruta donde est el fichero. Por ejemplo, para descargar un fichero de nombre guiahtml.zip se debe poner <A HREF="../zip/guiahtml.zip">guiahtml.zip</A> que se vera as guiahtml.zip. Si pulsas sobre l se abrir una ventana avisndote de una descarga de archivos y preguntndote qu deseas hacer Enlace que se abre en una nueva ventana Si quieres que la pgina que enlazas aparezca en una nueva ventana del navegador, solamente tienes que poner target="nombre" como atributo del enlace, es decir: <a href="index.htm" target="nueva">Indice</a>
10
11
La etiqueta EMBED tiene multitud de atributos, he aqu algunos. AUTOSTART= FALSE (por defecto) y TRUE. Este ltimo hace que suene inmediatamente despus de cargar la pgina sin necesidad de pulsar el botn. HIDDEN=TRUE, oculta la consola y slo tiene este valor . Como no se podra activar el sonido pulsando el botn, suene al cargar la pgina LOOP=FALSE ,TRUE(por defecto),N para oir el fichero una vez, infinitas o el nmero que especifiquemos en N CONTROLS=SMALLCONSOLE, aparece una consola pequeita
12
13
RECOMENDACIONES Se necesita tener un buen sentido comn para decorar nuestras pginas Se aconseja que la pgina web sea dinmica ya que al usuario no le gusta lo esttico se debe manipular bien la insercin de imgenes,sonido,etc ya que en esos pequeos detalles est el xito BIBLIOGRAFAS
The History of HTML (by Jeffrey Veen) Guia HTML Antonio Berciano Alonso ABANoviembre1999
URL: http://platea.pntic.mec.es/~abercian/guiahtml/index.html Estructura de una pagina aulaClic Marzo - 2002. URL: http://www.aulaclic.es/html/t_2_2.htm HTML W3schools.com URL: http://www.w3schools.com/html/default.asp EDICION HTML MULTIMEDIA Y SONIDOS servicios de formacin del profesorado URL: http://www.slideshare.net/autodidactas/03-edicion-html-multimedia-sonidos-0001 MULTIDEDIA INLINE Jorge Ferrer, Vctor Garca y Rodrigo Garca 23 Febrero 2006
URL: http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html/
14