Manual para Hacer Tus Paginas Web

manualpginasweb.blogspot.
com
Introduccin: Qu es el html?
El html es el lenguaje de aplicacin por el que se hacen las pginas web.

Accesibilidad web
Esta pgina se utilizar para la accesibilidad web, para todas las personas incluidos discapacitados puedan verla sin restricciones.
Ir a l pgina web;
http://www.sidar.org/index.php
Empezar a escribir html

Tu primera pgina web
1.Crear una carpeta en el escritorio 2.Acceder a la carpeta html y crear un documento de texto. 3.Quitarle el txt. Cambindolo por html Estos archivos tiene el htm o html ambos equivalentes, nunca usar la el acento, espacios en blanco, usar nombres que describan su contenido. Para el cdigo fuente de otras pginas web lo que debemos hacer, es darle al botn derecho y luego cdigo fuente.
Las Etiquetas:
Las etiquetas son la filosofa que vamos a aprender de este lenguaje

Ejemplo:
<etiqueta>hola</etiqueta>
Otro tipo de etiquetas son denominadas como etiquetas vacias se utilizan para introducir saltos de lneas, lneas horizontales y otros elementos, este tipo de etiquetas se diferencian de las anteriores que no tiene una marca final, ya que se producen en el mismo momento concreto en el que hacemos referencias a ellas, por ello no hay que enviar la etiqueta en el mismo momento de abrirla.
manualpginasweb.blogspot.com
Ejemplos de etiquetas.
<strong>Texto resaltado</strong> <i>Cursiva</i> <strong>hola y</i></strong>(De esta manera se ver todo en negrita menos adios que se ver en cursiva.
Texto por ejemplo de color rojo. <font color=red>texto en rojo</font>
Comentarios y smbolos especiales
(<) Abrir corchetes (<) (>) Cerrar corchetes (>) (&) Smbolo de and o ampersand (&) () Comillas dobles: (")
Insertar comentarios
Ejemplos
Poniendo  lo que suceder ser que este comentario no lo vern los usuarios.

Estructura de un documento html

Definicin de un documento html
Visitar la pgina W3C esta asociacin obtiene la declaracin <DOCTYPE html PUBLIC> esta cargada de los estndares web y definen que los documentos html deben de tener una declaracin del tipo Doctype al principio del cdigo va siempre al principio antes que html, es la primera lnea que debe de estar en nuestro documento y es necesaria para decirle al navegador que tipo de versin html es la que utilizamos, si no se hiciera podra darse el caso de que el navegador procesara la pgina en modo kirch en modo de compatibilidad, pudiendo no interpretar correctamente el cdigo que luego nosotros introduciremos en la pgina.
Existen 3 posibles definiciones para un documento html.
1- html strict.dtd
Esta definicin da prioridad a la estructura frente a la presentacin es la ms estricta de todas es aconsejable esta gramatica siempre que se pueda, si se quiere elaborar un cdigo limpio de presentacin , pero no permite ciertos elementos.
<!DOCTYPE HTML PUBLIC/-//W3C//DTD HTML 4.01//EN//http://www.w3.org/TR/html4/strict.dtd/>
2- 4.01 Transitional
Otra forma es la tradicional con menos restricciones que la primera definicin estricta pero permite inclur elementos de presentacin y otros elementos no tan aconsejados.
<!DOCTYPE html PUBLIC_//W3C//DTD HTM. 4.01 transitional//EN http://www.w3.org/TR/html4/loose.dtd> 3- Por ltimo Frmaset/EN
Esta versin es igual que la tradicional, pero permite el uso de Frames o Marcos.
<!DOCTYPE html PUBLIC_//W3C//DTD HTML 4.01 Frmaset//ENhttp://www.w3.org/TR/frameset.dtd>
Para validar la pgina despus de haber insertado la declaracin abr que ir a la pgina web http://validator.w3.org/
1. Seleccionar Validate by file Upload 2. Seleccionar el archivo en examinar 3. Pulsar en Check

Pondr al principio This page is not Valid Html 4.01 Que significa que no es una pgina valida pero con el tiempo intentndolo de nuevo saldr validada. La Estructura
1, La definicin de documento doctype 1. Despus la etiqueta <html> y finaliza con </html> Todo lo que contenga esta etiqueta ser interpretado por el navegador como un documento html, hay que procurar aadir siempre la etiqueta <html> el atributo lang=es> <html lang=es> que es para el idioma en este caso es espaol de este modo los lectores de pantalla y sintecizadores de voz que reproduzcan varios idiomas son capaces de usar el acento y la pronunciacin adecuados para cada idioma y no intentarn pronuciar el texto en el idioma principal usado por el programa o el documento, de forma similar sirve de ayuda para usuarios que tengan traductores de braille. En esta pgina se pueden encontrar los cdigos para la representacin de los nombres de idioma y su cdigo correspondiente, pas y su cdigo.
http://xml.coverpages.org/iso639a.html
1.
El Cdigo html se divide en dos partes diferenciadas la cabecera y el cuerpo del documento. Entre las etiquetas <html> y </html> se escribe la etiqueta <head> y </head> En la cabecera se puede identificar el ttulo, la descripcin de la pgina y otra serie de parmetros que se vern ms adelante por ejemplo el ttulo de la pgina se escribe mediante la etiqueta <title> ejemplo </title>
Otra etiqueta es la descripcin el contenido de la pgina
Ejemplo:
<meta name=description content=introducin a la estructura del html/>
Otra etiqueta son los Keywords o palabras, con las palabras que usaremos para que nos encuentren los buscadores por ejemplo; <meta name=Keywords content=cabecera,cuerpo,documento/> Procurar no utilizar palabras que se hayan introducido en el ttulo o en la descripcin no es necesario repetirlas. La importancia es que esto es lo que se ver en los buscadores en primer lugar el ttulo y en el segundo lugar la descripcin.
Otros atributos meta importantes pueden ser tambin las siguientes:
Esta etiqueta es importante si en un momento dado tenemos sobre todo sitios web, con varios idiomas.
<meta name=languajecontent=es/>
La etiqueta Robots sirve para los buscadores e indica que tipo de documentos pueden buscar.
<meta name=robotscontent=indez,follow/>
Otra etiqueta muy importante es la content type

<meta http-equiv=content typecontent=text/html;charset=iso-8859-1/>
Esta etiqueta tiene mucha importancia ya que le dir al navegador del usuario el juego de caracteres que deber usar, si esta etiqueta faltara el navegador cojera juegos de caracteres por defecto, as que si eres espaol con caracteres especiales esta pgina se ver bien, pero si lo ven en EEUU no se ver nada por falta de caracteres o acentos y desde pases como Japn seguramente fallar todo, si se pone esta etiqueta, el navegador usar los caracteres de esta etiqueta de esta manera con esta etiqueta se ver bien en todos los ordenadores. Existen varios estndares por los que podemos estar realmente seguros que una serie de caracteres extraos la , acentos, que van a ver en todos los ordenadores del mundo se recomienda usar 1 de estos 2 valores que son:
Charset=iso-8859-1
Este es el que ms se usa actualmente y que se recomienda para utilizar en idiomas ms comunes Espaol, cataln, Euskera, Gallego, Portugues, Ingls, Francs. Otro estndar es el Charset=utf-8> Juego universal de caracteres ha aparecido para simplicar el iso 8859 en un solo estndar, pero cuando se utilice el estndar utf y tengamos que escribir acentos, se deber sustitur por su cdigo:
Ejemplo:
camin --- para que se acente habr que sustituirlo por estos caracteres
camión
La ventaja de utf es que almacena todos los caracteres que existen actualmente para cualquier idioma y la desventaja es que tenemos que escribir el cdigo fuente correctamente para que interprete dichos caracteres. En esta pgina se pueden encontrar todos los caracteres especiales en:
http://es.wikipedia.org/wiki/caracteres
El cuerpo de la pgina es lo que realmente interpretan los navegadores va siempre despus de la etiqueta </head> y se identifica con la etiqueta <body> esta es la parte que el usuario ver dentro de la etiqueta <Body> para mostrar cualquier formato de texto o imagen o cualquier otro elemento multimedia, necesitamos usar las etiquetas para que todos estos contenidos aparezcan como queremos realmente que aparezcan Un ejemplo sera <br> salto de lnea.
Textos;
1.
Parrafos, Bloques <body> -Utilizar el Adobe Dreaweaver CS3 Para escribir un prrafo utilizaremos la etiqueta <p> la casa </p> los parrafos pueden ser justificados al centro o a la derecha Ejemplo: <p align=right> El camin </p> (este parrafo se ir a la derecha. El atributo align soporta los siguientes valores (center,justify,left, right) En textos de imagenes tambin podremos poner para indicar la posicin de estas imgenes con el atributo align
Las etiquetas <div> </div> (te permitiran asignar ciertos atributos a bloques de contenido)
Ejemplos:
<body> <p align=right> la casa</p> <p align=right> El camin</p> <div align=right> <p> la casa </p> <p>El camin</p> </div> </body> Ambos contenidos se alinearn a la derecha en este caso.
Saltos de lnea y divisiones horizontales En este captulo vamos a aprender que son los enlaces, como se insertan los enlaces en las pginas web y que tipo de enlaces existen vamos a introducir el primer enlace la sintaxis es la siguiente:
<p><a href=destino>contenido</a></p>
Destino; Ser una zona de la pgina actual, una pgina distinta, un correo electrenico o incluso un
archivo. El atributo (href): es un enlace a otra parte del documento, lo que se le llama como enlaces internos, a otro documento de nuestro sitio lo que se conoce como enlaces locales, a un enlace de un documento de otra mquina diferente lo que llamamos enlaces externos o incluso a un correo electrnico y un archivo. En funcin del atributo href podemos agrupar los enlaces del siguiente modo, enlaces internos, enlaces locales, enlaces externos, enlaces con direcciones de correo y enlaces con archivos.
Ahora vamos a ver como insertar enlaces internos;
Los enlaces internos son los enlaces que se dirigen a otras partes de la pgina pero dentro de la misma pgina, este tipo de enlaces son esencialmente utilizados en pginas donde el acceso de contenido pueden verse dificultados devido a la gran cantidad de los mismos, mediante estos enlaces podemos ofrecer al vistante la posibilidad de acceder rapidamente al principio y al final de la pgina o bien a distintos conteniod dentro de una misma pgina, para crear un enlace de este tipo es necesario a parte del enlace de origen un segundo enlace que ser colocado en el destino.
Un Ejemplo con ttulares de noticias paso a paso.
<body> Vamos a suponer que queremos crear un enlace que apunte desde el principio de la pgina hasta el final de esta misma pgina. <body> < a href=#final smbolo (#) -- Identifica a los enlaces internos Final --- la zona con la que quereemos enlazar
Ejemplo;
<body> (Al principio) < a href=#final>Ir al final de la pgina</a> Se ver en el navegador Ir al final de la pgina El enlace destino para que al pasar ir al final de la pgina, os pueda llevar al final de la misma, habr que poner al final de esta pgina lo siguiente: < name=final></a> (sin colocar el corchete) </body> entre las etiquetas>< se pondra el texto si se quisiera. Ahora vamos a crear ms enlaces internos crearemos una lista con los diferentes contenidos de la pginas mediante la etiqueta <ol> y </ol> y los distintos contenidos y crearemos un enlace desde cada men al contenido propio de dicho men. Ahora vamos a la parte superior a introducir una lista ordenada <ol> y los elementos de la lista <li>
Ejemplo para enlazar noticias que ya tenemos en la pgina copiada.
<body> <a href=#final>Ir al final de la pgina</a> <ol> <li><a href=#noti1> noticia1</a></li> <li><a href=#noti2>noticia2</a></li> <li><a href=#noti3>noticia3</a></li> Para enlazarlos con la noticia habr que hacerlo de la siguiente manera en cada noticia nota va sin conchete.
Ejemplo:
<h1>< a name=noti1>lideres latinoamericanos unidos contra el trfico de drogas</a></h1> <h1>< a name=noti2></a>Nadal, nuevo rey del tenis</h1> <h1>< a name=noti3></a>los aparatos elctrnicos dejan de ser privados al entrar en EEUU</h1>
De esta manera podremos desplazarnos dentro de la misma pgina web.
Encabezados: En este apartado vamos a ver que son los encabezados y como usarlos correctamente. Los encabezados sirven para definir prrafos especiales los usaremos cuando vallamos a escribir ttulos, subttullos, etc.. es lo que nos permite dividir el documento en secciones, subsecciones etc.. son etiquetas que formatean el texto como un titular para lo cual asigna en un tamao mayor de letra y colocan el texto en negrita:
<h1>ttulo</h1>
Existen varios tipos de encabezados que se diferencian en el tamao de la letra que utilizan:
(Este encabezado es el ms grande) <h2> y </h2> (Este ser para encabezado de segundo nivel) <h3> y </h3> (Este es el encabezado ms pequeo) Los encabezados admiten el atributo de alineado align
<h1> y </h1>
Ejemplo:
<h1aling=right>ttulo</h1>
Un consejo que no se debe de olvidar nunca es utilizar las etiquetas de encabezado para formatear un texto, si queremos utilizar un encabezado ms grande y en negrita usaremos.<h1> y </h1>.
Ejemplo de los encabezados, imagina que vamos a hacer una pgina que trate de msica y vamos a
nombrar los distintos tipos de msica que existe.

Ejemplo:
<body> <h1>msica</h1> Aqu pondramos algo relacionado sobre la msica <h2>Tipos de msica</h1> <h3>Rock</h3> <h3>Clsica</h3> Ahora no podramos pasar al <h4> y </h4> pero si cambiamos el tema por ejemplo si ahora hablamos de cocina se empezara de nuevo con el encabezado y sucesivamente como antes en msica. <h1>cocina</h1>
LAS FUENTES
-Cmo modificar el tamao y usar distintas tipogrfias de fuentes?

Ejemplo texto para las fuentes:
Para cambiar las fuentes, tipografas y algunos otros elementos de los textos usaremos la etiqueta font ejemplo sin modificar el texto <body> <font> texto para las fuentes</font>
-Cmo modificar el tamao del texto? para ello la etiqueta <font> necesita estar acompaada por el atributo size
Ejemplo;
<body>
<font size=5>texto para las fuentes</font>.
El valor del tamao a de ser comprendido del 1 al 7 -Cmo modificar las tipogrfias de las fuentes?
Ejemplo:
<body>
<font size=5face=Courier> texto para las fuentes</font>
Nota; Si introducimos un tipo de tipografia que el ordenador desconoce y nos la pondr en Time Roman, para evitar esto suelen seleccionarse varios tipos de letras entre comas.
Ejemplo:
<body> <font size=5face=Courier,arial,verdara>texto para las fuentes</font> </body> Esto nos lleva a que si por ejemplo no disponieramos de la primera que es Courier, nos llevar a la segunda y en el caso de que no dispongamos de la segunda nos llevar a la tercera, y en el caso de que no dispongamos de la tercera usar la que tiene por defecto la Time Roman.
Formateo de Texto;
Aqu vamos a ver las distintas formas que existen de formatear los textos, comentar que ademas de todo lo relativo a los prrafos, uno de los aspectos primordiales del formateo de un texto es la propia letra, resulta muy comn y prctico resaltar el texto en negrita entre otros igual que haramos para cualquier documento que escribieramos en papel, todo esto y mucho ms es posible por medio del html a partir de una serie de etiquetas, entre las cuales vamos a destacar las ms importantes:
<strong> (Sirve para dar un mayor enfasis y a la vez en negrita)
Ejemplo;
<body>
<p>la<strong>casa</strong>de la pradera</p>
-Otra etiqueta importante es la <em> y </em>
Esta etiqueta sirve par dar nfasis a diferencia de <strong> que era para dar mucho enfasis es itlica.
Ejemplo:
<p>la<em>casa</em>de la pradera</p>
-Otra etiqueta muy importante es la etiqueta <u> y </u>
Esta etiqueta lo que hace es subrayar la palabra que esta comprendida entre el inicio y el final de la etiqueta. Nota; Tener cuidado al subrayar ya que se puede confundir al lector pensando que es un enlace.
Ejemplo:
<p>la<u>casa</u>dela pradera</p>
-Para definiciones pondremos la etiqueta <dfn> y </dfn> una palabra y su definicin, tambin mostrar el texto en Italica
Ejemplo:
<p><dfn>NCSA Mosaic es un visualizador word wide web</dfn></p>
-Cuando hablemos de ttulos de pliculas, libros usaremos la etiqueta <cite> y </cite>, muchos navegadores lo interpretarn como Itlica.
Ejemplo:
<p><cite>el silencio de los corderos</cite></p>
-Cuando hablemos de un texto citado pondremos la etiqueta <blokquote> y </blockquote>

Ejemplo:
<body>
<blockquote> en un lugar de la mancha, <br/>de cuyo nombre no quiero acordarme...</blockquote>
</body> -Cuando el texto citado sea ms pequeo usaremos la etiqueta <q> y </q> de este modo no tiene practicamente sangrado.
Ejemplo;
<q>en un lugar de...</q>
-Cuando se cita un texto en Ingls, al ser la pgina defnida en castellano y hace referencia a un texto en otro idioma;
Ejemplo: <head>
<html lang=es> <meta name=languaje content=es>
Tendremos que indicar que realmente cambia de idioma, es muy importante adems para los lectores de texto, aadiremos el atributo lang=en de Ingls a la etiqueta <blockquote>
Ejemplo:
<body> <blockquote lang=en> The power of the web is in its universality access by everyone regardless of disability is an esential aspect. </blockquote/ En este caso interpretaremos que el texto es un texto en ingls. Ahora vamos a pegar un prrafo en un texto en castellano de repente hace referencia a un trmino Americano, para distinguir este cambio de idioma usaremos la etiquta <span lang=en-us> el idioma de la palabra
Ejemplo:
<p> la versin 2 de las WCAG, esta todava en

<span lagn=en-us>working draft</span>
Pero si este prrafo estuviera totalmente en Ingls, usariamos la etiqueta <p lang=en-us>, recordar siempre cuando haya un cambio de idioma en la pgina, indicarlo mediante el atributo lang en la etiqueta correspondiente.
Ejemplo:
<body> <p lang=en-us> The power of the web is in its universality </p> </body> -Con la etiqueta <big> y </big> el tamao del texto es ms grande de lo normal
Ejemplo:
<p><big>texto</big><p/>
-Con la etiqueta <small>y </small> el texto del tamao es ms pequeo:

<p><small>texto</small></p>
-Con la etiqueta <sub>y </sub> hace referencia a subndice

Ejemplo:
<p> medida<sub>2</sub></p>
En el navegador se ver de la siguiente manera: Medida 2 -Gastaremos la etiqueta <sup> y </sup> , para superndices:
Ejemplo: <p>medida<sup>2</sup></p>
Asi se ver en el navegador:

Medida 2
-Para insertar una direccin utilizaremos la etiqueta <address> y </address> aparecer en Itlica.
Ejemplo:
<body>
<p><address>C/Mjico21</address></p>
</body> -Se pueden inclur varias etiquetas por ejemplo: se pueden intercalar las etiquetas, como se puede observar:
<p><strong><address>C/Mjico 21, 2<sup>o</sup></address></strong></p> </body>
Abreviaturas y acronimos
Vamos a ver que son los acronimos y las abreviaturas, vamos a saber usarlas y introducirlas en un documento html, luego vamos a hacer un ejercicio de formateo de texto y como resumen de todo lo que llevamos dado hasta ahora visto, primeramente vamos a ver.
Vamos a explicar que es abreviatura y acronimos. Una abreviatura es la representacin grfica reducida de una palabra mediante supresin de letras finales o centrales y que suele finalizar con un punto.
Ejemplo:
<body> <p> El Sr.Juan ha salido de casa, pero el Sr. Juan no ha desayunado</p> Otros ejemplos serian los siguientes, esto son abreviaturas Drcha.
Fdo. S.S.M.M Cuando introduzcamos una abreviatura en un documento html, la indicaremos mediante la etiqueta <abbr> y </abbr> seguidamente despus del punto.
Ejemplo:
<body>
<p>el<abbr>Sr</abbr>Juan ha salido de casa, pero el Sr.Juan no ha desayunado</p>
</body> La primer vez que en un documento html utilizamos una abreviatura a la etiquerta <abbr> le introducimos el atributo <title> y </title> y le indicamos la palabra completa seor.
Ejemplo;
<body>
<p>el<abbr title=seor>Sr</abbr>Juan ha salido de casa, pero el <abbr>Sr.</abbr> Juan no ha desayunado</p>
</body> En el navegador se ver de la siguiente manera. El Sr; Juan ha salido de casa, pero el Sr. Juan no ha desayunado Al poner el cursor del ratn sobre (Sr) saldr una imagen en un cuadrado que pondr seor.
Los acronimos Los acronimos son vocablos formados por la unin de letras de dos o ms palabras generalmente por el inicio de la primera palabra y el final de la ltima o mendiante otro tipo de combinaciones similares, tambin se denomina acrnimo a las formas abreviadas que se pronuncian como una palabra, la palabra ONU sera un acronimo, la primera vez que nombremos un acronimo en nuetro documento de texto al igual que las abreviaturas indicaremos su significado mediante el atributo title;
Ejemplo:
<body>
<p><acronym title=Organizacin de las naciones Unidas>ONU</acronym></p>
</body> Otros acronimos seran Ofimtica: Que es oficina de informtica Ofni; Objeto volante no identificado Modem; Modulacin de modulacin El hecho de insertar la etiqueta title en los acronimos y abreviaturas la primera vez que se utiliza en la pgina, es para que de esta forma proporcionas una definicin til a todos los usuarios y lectores de pantalla que se pueden configurar para que se pronucien de diferentes maneras.
Otra ventaja de utilizar el atributo title para estas etiquetas es que resulta muy til para los montadores de bsquedas, pues as saben por ejemplo que aquellos documentos en los que aparecen el acronico Tyc tic se estn refiriendo a tecnologa de la informacin y la comunicacin y podrn de esta manera endescarlos mucho mejor.
Ejemplo:
Imagina que queremos enfatizar un texto importante, siempre utilizar el estilo lgico cuando sea posible que ser el siguiente.
Ejemplos;
<p>hay que tener en cuenta que los precios son<strong>sin IVA</strong></p> Si queremos mostrar Sin IVA en color rojo ser de la siguiente forma.
Ejemplo:
<body>
<p>hay que tener en cuenta que los precios son<strong style=color:red;>sin IVA</strong></p>
Las listas: Vamos a ver las listas, que tipos de listas existen y como insertarlas en un documento html. Las listas son utilizadas para citar, numerar y definir objetos, una lista no es ms que una grupacin o enumeracin de elementos de informacin.
Tipos de listas:
Listas desordenadas Listas Ordenadas Listas de Definicin Listas Aninadas.

Listas Desordenadas;
Para hacer una lista desordenada usaremos la etiqueta <ul> y </ul> y para cada elemento de la lista usaremos <li> y </li>
Ejemplo:
Vamos a hacer una lista de nombres de personas. <body> <p> lista de nombres:</p> <ul> <li> Sr.Juan Menendeza/li> <li>Sr.Manuel Prez</li> <li>Sr.Jose Fernandez</li> </ul> </body>
Pero habr que ponerle la etiqueta <abbr title> en el primero por ser la primera vez, querdara de la siguiente manera. <body> <ul> <li><abbrtitle=seor>Sr.</abbr></li> <li><abbr>Sr.</abbr>Manuel Prez</li> <li><abbr>Sr.</abbr>Jos Frnandez</li> </ul> </body> Son listas desordenadas por que no nos importa el orden en los que aparecen los nombres.
Listas ordenadas;
Son las listas en las que si importa el orden usaremos para este tipo de listas el atributo <ol> y </ol> para listas ordenadas y para cada elemento de la lista el elemento <li< y </li>
Ejemplo: De una receta
<body> <p>receta:</p> <ol> <li> Inclur en una pota un chorro de aceite</li> <li> Introducir 2 dientes de ajo</li> <li> Volcar un vaso de arroz</li> </ol> </body> En este ejemplo y al ser una lista ordenada en el navegador se ver de la siguiente manera con el primero, segundo, tercero etc... 1.Inclur en una pota un chorro de aceite 2.Introducir 2 dientes de ajo 3.Volcar un vaso de arroz Si por el contrario no queremos que empiece por el 1 a la etiqueta <ol> le insertaremos la etiqueta
start=10>
Ejemplo;
<body> <p>receta:</p>
<ol start=10>
En el navegador se ver 10.Inclur en una pota un chorro de aceite 11.Introducir 2 dientes de ajo 12.Volcar un vaso de arroz
Listas de definiciones;
las listas de definiciones se usan para formatear un conjunto de palabras con sus correspondientes descripciones
Ejemplo:
Para formatear una lista de descripciones o definiciones se usarn las etiquetas <dl> Cada elemento a definir utilizaremos la etiqueta <dt> (palabra a definir) Cada definicin tendrn que especificarse entre la etiqueta <dd> y </dd> (Definicin)
Ejemplo:
<body> <p>diccionario de la real academia</p> <dl> <dt> Monitor:</dt> <dd>tambin llamado pantalla, es un dispositivo de salida que, mediante ...</dd> <dt> telefono mvil:</dt> <dd>bsicamente esta formada por dos grandes partes: una red de comunicaciones ...</dd> </dl>
Listas anidadas:
Las listas anidadas son listas que se pueden especificar unas dentro de otras, se puede insertar <ul> de listas desordenadas, insertamos la etiqueta <li> para los elementos de la lista, y sin cerrar la etiqueta <li> insertamos dentro de este elemento, una lista ordenada <ol> y despus el primer lemento de la lista ordenada de nuevo <li> y este elemento ya si lo cerramos </li>
Ejemplo: Esto seria una lista ordenada dentro de una lista desordenada.
<body> <ul> <li> primer elemento</li> <ol> <li> sublista </li> <li>otro elemento</li> </ol> </li> </ul>
Otro ejemplo de listas anidadas:
<body> <p>Ciudades del mundo</p> ( Un prrafo de ciudades del mundo) <ul> (Lista desordenada de los paises Argentina y Uruguay) <li> Argentina <ol> (Lista ordenada que se encuentra dentro de Argentina) <li> Buenos Aires</li> <li>Bariloche</li> </ol> </li> <li>Uruguay <ol> <li>Montevdeo</li>(ciudades) <li>Punta del este</li> </ol> </li> </ul> </body> En el navegador se ver de esta manera: .Argentina 1.Buenos Aires 2.Bariloche .Uruguay 1.Montevideo 2.Punta del este
ENLACES:
1.Enlaces Internos:
Nota los enlaces de texto que vallan subrayados y coloreados para que el usuario no lo confunda.
Ejemplo:
<body>
<p><a href=destino>contenido</a></p>
href a un enlace interno, locales y archivos Los enlaces internos: son los enlaces que se dirigen a otras partes de las pginas pero dentro de la misma pgina mediante estos enlaces se podr ofrecer al usuario el principio y el final de la pgina, o bien a distintos contenidos dentro de la misma pgina.
Ejemplo un enlace que dicte desde el principio de la pgina hasta el final de esta misma pgina.
<body>
<a href=#final>Ir al final de la pgina</a>
pero no har nada se necesitar un segundo enlace que ser colocado en el destino la colocaremos al final de esta pgina. <body>
<a name=final>aqu escribiremos si queremos</a>
</body> Crear enlaces mediante contenidos de las pginas poniendo listas y crearemos un enlace mediante cada men. Sin enlace destino. <body>
<a href=#final>Ir al final de la pgina</a>
<ol> <li>Noticia1</li> --- <li><a href=#noti1>Noticia1</a></li> <li>Noticia2</li>---<li><a href=#noti2>Noticia2</a></li> <li>Noticia3</li>---<li><a href=#noti3>Noticia3</a></li> </ol> Crear los enlaces con enlace destino <h1><a name=noti1>lideres latinoamericanos unidos contra el trfico de drogas</a></h1> De esta manera con todas las noticias, el enlace destino no lleva corchete.
Ejemplo para subir o bajar principio y final en la misma pgina:
<body> <a name=inicio></a> Ejemplo: ponemos arriba esto para que nos lleve al final de la pgina.
<a href=#final>final de la pgina</a>
y al final de la pgina colocaremos lo siguiente <a name=final></a> (esta sin colocar el corchete)
Enlaces Locales; En este tutorial vamos a ver que son los enlaces locales son aquellos que se dirigen a otras pginas, pero en nuestro mismo sitio web.
Ejemplo:
Tenemos una carpeta creada donde tenemos los archivos html que vamos a usar por un lado tenemos uno html, hemos creado un directorio de prueba directorio de prueba, una buena costumbre ser poner en mnuscula tanto el archivo como el directorio, porque muchos servidores hacen definicin entre lo que son maysculas y minsculas si a veces usamos maysculas y otras veces minsculas nos puede llevar seguramente a equivocacin entonces es una buena costumbre. Accedemos al directorio prueba y aqu encontramos otro archivo html que llamaremos dos.html
Vamos a editarlos 1 por 1, abrimos primero uno.html vamos a ponerle un ttulo y un encabezado y un enlace dentro de un prrafo.
Ejemplo: (Vamos a editar el archivo uno.html
<head> <title>pgina uno</title> <head> <body> <h1>pgina uno</h1> <p><a href=dos.html>Enlace a pgina dos</a></p> </body>
Ahora vamos a editar el archivo dos:
<head> <title>pgina dos</title> </head> <body> <h1>pgina dos</h1> <p><a href=uno.html>enlace a pgina uno</a></p> </body>
Ahora vamos a editar de nuevo uno html
En la etiqueta href tenemos que indicar donde se encuentra nuestro archivo nmero dos y su nombre, ahora mismo solo tenemos el nombre dos.htmlpara acceder de uno a dos tenemos que acceder al directorio de prueba que en este caso ser el nombre del directorio.
Ejemplo:
<head> <title>pgina uno</title> </head> <body> <h1> pgina uno</h1>

<p><a href=directorio prueba/dos.html>Enlace a pgina dos</a></p>
</body> Ahora lo que har ser que ya podremos ir desde la pgina uno hasta la pgina 2 pero de pgina dos a pgina uno no funcionar por lo que deberemos de ir a editar la pgina dos Ahora ser a la inversa es decir llevarnos hasta el archivo pgina uno habr que bajar un nivel en: Un directorio se baja con (../) (..) Esto es lo que hace bajar el directorio (/) Esto es para separar del nombre del archivo.
Ejemplo:
<body> <h1> pgina dos</h1>

<p><a href=../uno.html>Enlace a pgina uno</a></p>
</body> Otro ejemplo vamos a directorio prueba y creamos otra carpeta a la que vamos a llamar otra-carpeta vamos a introducir el documento dos.htmldentro de otra carpeta ahora ya no funciona cuando se pincha en el navegador.
Ejemplo para que se vea.
<body> <h1>pgina uno</h1>

<p><a href=directorio-prueba/otra-carpeta/dos.html>Enlace a pgina dos</a></p>
Ahora vamos a uno.html, si (..) puntos significa que aumenta un nivel y luego hay que separarlo por una (/) as tendra que funcionar.
Ejemplo:
<body> <h1> pgina dos</h1>

<p><a href=../../uno.html>enlace a pgina uno</a></p>
</body>
Enlaces externos; Los enlaces externos son aquellos enlaces que se dirigen hacia pginas que se encuentran fuera de nuestra pgina web, es decir cualquier otro documenhto que no forma parte de nuestro sitio, este tipo de enlaces es muy comn y no representa ninguna dificultad vamos a enlazar con video2brain.com <body>
<a href=http://video2brain.com/es/>Video2Brain.com</a>
Todas las direcciones web o url empiezan por (http://) esto es lo que diferencia los enlaces externos de los enlaces locales, si no insertaramos esta etiqueta al ir al navegador y pinchar nos dar error, si no lleva esta protcolo el navegador interpreta que es un enlace local y no externo como tiene que ser.
Enlaces con direcciones de correo:
Ejemplo:
<body>
<p><a href=mailto:davidcoachingcreativo@gmail.com>haz clic para enviarme un correo<a/></p>
</body>
Si hace clic se abrir nuestro correo predeterminado directamente.-
Otro factor importante a tener en cuenta en los enlaces de correo electrnico es que a dems de la direccin del correo electrnico del destinatario, tambin podemos colocar el asunto del mensaje, esto se consigue colocando despus de la direccin colocar ?subject=contesta rpido.
Ejemplo:
<body>
<p><a href=mailto:davidcoachincreativo@gmail.com?subject=contesta rpido> haz clic aqu para enviarme un correo</a></p>
A parte de poder poner el asunto, podemos poner otros valores, como por ejemplo CC (Correo con copia a otra cuenta de correo) para juntar el asunto con otro destinatario lo haremos con el smbolo &.
Ejemplo:
<body>
<p><a href=mailto:davidcoachingcreativo@gmail.com?subject=contestarapido&CC=manolo@yahoo.es>haz clic aqu para enviarme un correo</a></p>
</body> Nota, el inconveniente que tiene este tipo de contactos en tu pgina web, puede ser que el usuario que est visitndola y quiera ponerse en contacto , no tenga un programa de gestin de correo, y entonces no tendr opcin, de poder envicar ese correo, tambin puede ser que esa persona que est consultando tu pgina, no est en su ordenador, lo este haciendo desde otro ordenador y en el que tambpoco tiene ninguna cuenta de correo de este modo le vas a impedir que pueda ponerse en contacto contigo tendrs que permitirle otras formas, para poder ponerse en contacto contigo, a travs del correo electrnico.
Enlaces a archivos
Vamos a ver como enlazar archivos y luego un resumen de todos los enlaces vistos, nombre del archivo poner.
Ejemplo:
<body> <h1>descargas</h1> <ul> <li><a href=archivo-comprimido.zip>Archivo1</a></li> </ul>

Ya estara enlazado a ese archivo en el navegador.
Lo abriremos con el navegador y nos pondr DESCARGAS .Archivo1
Ejemplo:
Ahora vamos a hacer otra carpeta que se va a llamar nueva ruta y el archivo-comprimido.zip lo introducimos dentro de nueva ruta vamos al navegador y ya no funciona y lo hemos movido a la carpeta nueva ruta lo que haremos ser ir a esta carpeta y editarla.
Ejemplo:
<body> <h1>Descargas</h1> <ul> <li><a href=nueva-ruta/archivo-comprimido.zip>Archivo1</a></li> </ul> </body> Ahora vamos a abrir un archivo PDF
Ejemplo:
<body> <h1>Descargas</h1> <ul> <li><a href=nueva-ruta/archivo.pdf>Archivo pdf</a></li> </ul> </body>

Atributos
Vamos a ver los atributos target=_blank ser para abrir una nueva ventana, siempre que usemos el atributo target=_blank recordar que la definicin (doctype) es strict no nos la permite, tiene que se transitional, es aconsejable que no se utilice este atributo ya que es un poco incomodo para el usuario, que se le habra una ventana nueva y si lo tuvieras que hacer por necesidades, lo mejor es avisar al usuario de que ese enlace va a abrir una nueva ventana.
Ejemplo:
<body>
< a href=http://www.video2brain.com target=_blank>video2brain</a>
</body> Vamos a ver ahora el atributo title. El atributo title proporciona un ttulo al enlace que amplia la informacin sobre el destino del mismo, el valor es un texto para ampliar la informacin del destino del enlace si no necesita ser ampliada esta informacin, debe de evitarse aadir el ttulo, los navegadores suelen interpretar los ttulos mediante un mensaje emergente.
Ejemplo:
<body>
<a href=http://www.video2brain.comtarget=_blanktitle=cursos videotutoriales adobe diseo programacin linux>video2brain</a>
</body> En el navegador se ver el ttulo en un cuadrado cuando cursemos con el ratn la palabra video2brain que es lo que se ver en el navegador.
IMAGENES: Insertar imagenes;
Entramos en la carpeta de imgenes, vamos al cuerpo a insertar la primera imagen, la etiqueta utilizada para insertar imagenes, es <img con el atributo src=el valor es la ruta donde se encuentra la imagen, vamos de nuevo a la carpeta donde tenemos los archivos y vamos a insertar esta imagen alieng.gif. Seria de esta manera; <body>
<img src=imagenes/alien.gif>
</body> El valor del atributo src puede ser relativo, es decir la imagen estar fisicamente en nuestro sitio web, como el caso de acabamos de ver en el navegador o absoluta que las imagenes estarn colocadas en otro sitio web.
Ejemplo;
Vamos a insertar en nuestra pgina el logotipo de video2brain 1.Pulsamos botn derecho 2.Abrimos Propiedades 3.Y nos da la url donde est situada la imagen que se llama logo.gif 4.Copiamos la url 5.Volvemos al editor y insertarmos la url
Ejemplo como se inserta:
<body>
<img src=http://video2brain.com/es/images/logo.gif>
</body>
Ejemplo:
En este caso tenemos una carpeta de imagenes, alien.gif Del archivo documento uno.html, llama al archivo imagenes, que ocurre si copiamos esta imagen? alien.gif y la introducimos en el mismo directorio que en nuestro documento uno.html, tendramos que ir al documento donde se encuentra la etiqueta img y cambiar el atributo src, quitariamos imagenes y guardar el documento.
Ejemplo:
<body>
<img src=alien.gif>
Atributo ALT Vamos a coger otra imagen <body>

<img src=imagenes/novedades gif>
Todas las imagenes deben disponer de un equivalente textual que proporcione la misma informacin o que cumpla la misma funcin que la imagen, en este caso vamos a guardar el archivo y abrirlo en el navegador y la imagen se ver y proporciona al usuario novedades online por lo tanto la imagen se ver y proporciona al usuario novedades online por lo tanto la imagen de novedades.gif, tiene que contener el atributo alt=que proporcione la misma informacin que el navegador, el texto alternativo indica a los dispositivos del usuario que es?, lo que deben hacer en caso de no mostrar las imgenes, en una fotografa o en un logotipo podemos describir de forma sencilla su contenido, de forma que las personas que no ven la imagen se hagan una dea de la misma, en este caso:
Ejemplo:
<body>
<img src=imagenes/novedades.gifalt=Novedades online>
Para el texto alternativo existen 3 tipos de casos.

Ejemplo:
Vamos a insertar el logotipo de video2brain Si pulsamos imagen y nos vamos a Replace Images With Alt Atributes, esto significa que desabilitamos la imagen, en este caso vemos que aparece el texto alternativo, es decir el valor del atributo Alt y ahora en modo texto en lugar de la imagen, para el texto alternativo existen 3 tipos de casos.Ejemplo-(Imagenes sencillas)
Vamos a insertar el logo tipo video2brain 1.Vamos a averiguar la ruta que est dentro de imagenes y pone logo.gif estar en la carpeta de imagenes se llama /logo.gif, Cul sera el texto alternativo? Correcto para este caso, piensa lo siguiente si nos vamos al navegador y vas a la pgina de video2brain y no pudieras ver las imagenes que se muestra, que informacin te dara a ti, ms acertada para saber que imagen hay insertada en este caso, yo creo que el texto alternativo ms correcto sera Logotipo de video2brain
Ejemplo:
<body>
<img src=imagenes/logo.gifalt=Logotipo de video2brain>
Imagenes Decorativas:
Las imagenes decorativas son aquellas que se usan con fines decorativos y apenas aportan informacin o necesitan ningn texto alternativo por ejemplo las imgenes usadas como espacios o imagenes invisibles o transparentes o imagenes que se usan como lneas, le daremos el ancho width
Ejemplo con una imagen transparente
<body>
1<img src=imagenes/spacer.gifalt=logotipo de video2brain>width=100p>2
</body> En el navegador se ver claramente que el 1 se separa del 2 el ancho que le hemos dado de 100px en width (ancho), la imagen no se ve pero si que est en este caso la imagen no aporta ninguna informacin, por lo tanto el texto alternativo tendra que estar en blanco, pero siempre tenemos que inclur el atributo Alt en la etiqueta img, aunque est vacia, si no, no cumplira las directivas del (html 4.01) -DOCTYPE
Imagenes ms complejas.
Ahora vamos a insertar imagenes ms complejas, si la informacin aportada por la imagen es importante y precisa de una descripcin ms detallada buscamos en la carpeta una imagen compleja como puede ser grfica.jpg
Ejemplo: <img src=imagenes/grfica.jpgalt=grfico de barras 3D sobre ventas>
En esta imagen al ser una imagen compleja no es suficiente con el atributo alt para entender la grfica, usaremos el atributo longdesc= Que valor puede adptar el atributo longdesc, este atributo del elemento img proporciona la direccin de una pgina html en la que se incluye una descripcin detallada de la imagen en este caso vamos a llamarla por ejemplo para la imagen de una figura se le podra aportar la misma informacin en una table de datos en modo texto.
Ejemplo: <img src=imagenes/grfica.jpgalt=Grfico de barras 3D sobre ventas longdesc=explicacin.html>
Vamos a insertar otra imagen y veremos que valor admite el atributo alt insertamos novedades.gif
Ejemplo: <img src=imagenes/novedades.gif alt=
En el atributo alt tenemos que insertar el mismo texto que aparece en la imagen en este caso novedades online exactamente igual siempre que lleva una imagen con texto el atributo alt ser exactamente el mismo
Ejemplo: <img src=imagenes/novedades.gif alt=novedades online>
Vamos a insertar de nuevo alien.gif, para imagenes con animaciones abra que describir, escuetamente, la imagen y la animacin.
Ejemplo: <img src=imagenes/alien.gifalt=marciano en nave espacial volando>
De esta manera explicaremos la imagen y el movimiento de la imagen.

Otros atributos;
Con esto vamos a aprender a insertar atributos aplicados a la imagen, como puede ser la altura, el ancho de la imagen, el borde y el alineado de la imagen, primeramente vamos a insertar un encabezado <h1> y </h1>, despus insertaremos una imagen, en este caso vamos a insertar la imagen logo.gif en el atributo alt vamos a poner el siguiente texto logotipo de video2brain
Ejemplo:
<body>
<img src=imagenes/logo.gif alt=logotipo de video2brain>
En el navegador se ver de la siguiente forma.

IMAGENES VIDEO2BRAIN
Ahora vamos a ver los atributos altura y anchura, para ello hay que tener en cuenta que todos los archivos grficos poseen unas dimensiones de ancho y alto expresadas en pixeles (px) estas dimensiones pueden obtenerse a partir del propio diseador grfico o bien haciendo clic sobre el botn derecho de una imagen vista por el navegador, para luego elegir las propiedades sobre el men que se despliega. Ahora nos vamos al navegador, pulsamos botn derecho, propiedades y en dimensiones de la imagen nos da la dimensin que en este caso sera (179px 33px) (179) sera el ancho y (33) ser el alto. Vamos ahora a aplicar estas direcciones al atributo img
ejemplo: width-- Ancho y Heigth---- Alto
<body> <h1>imagenes</h1>
<img src=imagenes/logo.gif alt=logotipo de video2brainwidth=179pxheigth=33px>
</body> Pero al ir al navegador y actualizar la pgina no habr ninguna incidencia en las imagenes, el motivo es que cuando no indicamos a la etiqueta img ningn ancho ni alto, el navegador, interpreta el ancho y alto original de dicha imagen, por lo tanto ahora, al aplicarle las dimensiones reales, no sufre ninguna modificacin, la imagen.
Ejemplo para variar el ancho de la imagen width
<img src=imagenes/logo.gifalt=logotipo de video2brainwidth=279pxheigth=33px>
La ventaja de explicitar el ancho (Width) y el alto (Heigth) de una imagen en nuestro cdigo es que ayuda al navegador a confeccionar la pgina de forma que nosotros deseamos, antes incluso que las imagenes hayan sido cargadas, as pues si las dimensiones de las imgenes han sido proporcionadas, durante el proceso de carga, el navegador reserva el espacio correspondiente a cada imagen, el usuario podr comenzar a leer tranquilamente el texto sin que este se mueva de un lado a otro cada vez que se cargue una imagen. Si lo que pretendemos es aumentar el tamao, la perdida de calidad en la imagen se ver afectada. Para hacer una imagen ms pequea
Ejemplo: <img src=imagenes/logo.gif alt=logotipo de video2brainwidth=79pxheigth=14px
Nota: Reducir una imagen no es aconsejable, mejor es editarlo con un editor de imagenes, tipo fotosoft.
Ahora vamos a ver el atributro Border.
El atributo border define el tamao en pixeles (px) del cuadro que rodea la imagen, de esta forma podemos recuadrar nuestra imagen si lo deseamos, en dicho caso tenemos que especificar el atributo border igual a (=) el nmero que queramos que tenga ese borde en este caso le daremos 1px
Ejemplo: <img src=imagenes/logo.gifalt=logotipo video2brain width=179px heigth=33px border=1px.
Si en el atributo border le aplicamos un 0 este no tendr borde. Vamos a ver ahora los alineados de textos y imagenes que es el que es el mismo atributo (align=)
Ejemplo: align=rightira a la derecha
<img src=imagenes/logo.gif alt=logotipo de video2brainwidth=179px heigth=33border=0 align=rigth>
Etiqueta align= Admite los siguientes valores top- Es para que el texto coincida con la parte superior de la pgina middle- El texto aparece centro en la imagen
Enlaces con Imgenes:
En este video tutorial vamos a usar imagenes como enlaces Vamos a utilizar la imagen logo.gif una imagen aparece con un borde a su alrededor incndolnos que est enlazada.
Ejemplo:
<body>
<a href=http://www.video2brain.com/es><img src=imagenes/logo.gifalt=logotipo de video2brain><a/>
</body> Tambin podramos enlazar un texto y una imagen

Ejemplo:
Colocando un enlace de video2brain.com tanto la imagen como el texto nos llevar a la misma pgina seleccionada. Y con el Ejemplo de este caso <a href=http://video2brain.com/es>enlace de video2brain.com-<img src=imagenes/logo.gifalt=logotipo de video2brainborder=0></a>
Vamos a introducir ahora un enlace de correo electrnico y cuando pinchemos tanto el texto como la imagen se nos abrir nuestro correo predeterminado con la direccin ya escrita.
Ejemplo:
<body>
<a href=mailto@ayalga.com>enlace de video2brain.com-<img src=imagenes/logo.gifalt=logotipo de video2brainborder=0></a>
</body>
MULTIMEDIA
Tengamos en cuenta que a la hora de inclur ficheros de sonido en nuestras pginas web debemos distinguir entre los que pueden ser directamente ejecutados por el navegador y aquellos que deben ser abiertos por un programa propio, que deber tener el usuario en su equipo, para concretar un poco ms, debemos saber que existen dos maneras de escuchar los archivos de audio en Internet, por un lado una aplicacin del reproductor multimedia instalado por defecto en el ordenador del visitante ya sea windows media players Kuitanetc... que va a abrirle en una ventana nueva y reproducir el archivo de audio y por otra parte una extensin o plugim que estar instalado en el navegador del usuario y que va a mostrar un pequeo panel de control con play, avanza, rpido, stop en la pgina web por lo tanto ser insertado en la misma. Vamos a ver un ejemplo de la segunda opcin, esta claro que esta segunda opcin es mucho ms interesante que la primera, porque permite escuchar, ver y manipular en la misma pgina, mientras se est reproduciendo el contenido multimedia, sin tener que tener ningn sofware opcional.
Tipos de Reproductores:
Windows media, crearplayer y widtime uno de estos 3 reproductores de audio a sido definido por defecto para leer archivos de audio de una manera integrada, es decir que si se han insertado correctamente en la pgina web un archivo de audio el reproductor del usuario, va a arrancarse automticamente cuando se cargue la pgina. Es imposible saber cual ser el reproductor de audio que ser utilizado, pero hay algo que va a simplicar normalmente las cosa, los 3 reproductores citados son capaces de reproducir archivos mp3 esto quiere decir que si queremos estar seguros de una escucha correcta de nuestro archivo de audio en practicamente todos los reproductores, el mejor formato a utilizar es el MP3 para todos nuestros archivos de audio.
Object y Embed;
Vamos a insertar nuestro primer archivo de msica, meteremos el archivo que tenemos guardado 1.mp3
Ejemplo:
<body>
<a href=msica/1mp3>msica</a>
</body> Al pinchar sobre el enlace se reproduce el archivo de msica qu inconvenientes tiene el enlace directo a archivos de msica?, primero que la msica no arranca de manera automtica, pues previamente tiene que ser descargada, y lo ms importante, el reproductor de audio arranca en otra ventana o el archivo es descargado en el ordenador, no se inserta por lo tanto en la pgina, lo que impide por ejemplo; trabajar sobre un texto, sobre audio al mismo tiempo que en una nica ventana. Otra opcin para insertar audio en tu documento html es el mtodo embed este mtodo es el ms simple, pero no el ms eficaz ya que no ocupa ms de 1 lnea y por lo tanto es el ms fcil de modificar o de manipular.
Ejemplo:
<body>
<embed src=musica/1,mp3width=150heigth=100></embed>
</body> Al guardar y actualizar la pgina viene uno de sus inconvenientes puede provocar errores con algunas versiones de navegadores, otro inconveniente de este mtodo es que el archivo de audio debe cargarse completamente antes que reproducirse, al igual que lo llevamos con la forma de enlazar un archivo de audio musica. La etiqueta embed a parte del atributo src width(ancho) y heigth (Alto) admite tambin otra serie de atributos que no vamos a comentar, por que no sirven para todos los reproductores por ejemplo Autoplay: Funciona para algunos navegadores lo que hace reproducir automticamente el audio o decirle si le damos un valor yes y si le damos un valor no no se reproducir en otros sin embargo funciona
autoestart=false o true
Vamos a comentar el siguiente mtodo para la insercin de audio y vdeo que es object este mtodo es el ms complicado, pero tambien permite con toda seguridad que nuestros visitantes puedan escuchar el archivo de audio perfectamente, existen muchas formas de insertar el elemento object En un documento y muchos parmetros de dicha etiqueta, vamos a ver un ejemplo. <body> <object type=audio/mpegdata=musica/1.mp3width=200heigth=120> <param name=srcvalue=msica/1.mp3> <param name=autoplayvalue=true> <a href=musica/1.mp3>Escuchar msica</a> </object>
type=audio/mpeg--- Indica que tipo de archivo es. Data=musica/1.mp3--Indica la url de dicho archivo. Width200-- Indica el ancho del reproductor. Heigth=120-- Indica el alto del reproductor. <param name=srcvalue=musica/1.mp3 Autoplay para que se reproduzca automaticamente <a href=musica/1.mp3>escuchar msica</a> Esto es un enlace por si algn usuario no pudiera reproducir la etiqueta object.
Flash;
La utilizacin de flash permite evitar los problemas habituales de compatibilidad devido al navegador, flash es una extensin o pluggin y no un reproductor multimedia como puede ser el kuttaims sin embargo la extensin de flash esta disponible en otras plataformas, el reproductor flash lo que hace es leer los archivos que se llaman animaciones, pero que son en realidad, pequeos programas que pueden contener audio, video, animaciones, etc... flash puede ser utilizado para crear un reproductor multimedia, lo ms importante es que flash es capaz de leer en formato mp3 original, eso significa que es fcil leer un archivo mp3 con flash como hace flash para leer un archivo mp3?
Ejemplo;
<object typeapplication/x-shockware-flashdata=flash/rebotes.swfwidth=150heigth=150> <param name=movievalue=flash/rebotes.swf> <param name=qualityvalue=high> <param name=wmodevalue=transparent> <param name= allowscriptaccessvalue=samedomain> </object> Object hace una llamada a un archivo de flash. Type: Indica el tipo de archivo multimedia en este caso sera flash esta es la lnea que siempre hay que inclur cuando utilicemos flash. <object> type=aplication/w-shockware-flash Data-- Ser para indicar la ruta en la que va includo este archivo, los archivos flash tienen la extensin (swf) siempre. Data=flash/rebotes.swf Esto es exactament la url
<param name=movievalue=flash/rebotes.swf>
Esto quieredecir calidad alta:

<param name=qualityvalue=higth>
Modo Tranparente;
<param name=wmodevalue=transparent>
Ahora vamos a insertar de un archivo de flash a un archivo mp3
1-Primero hay que descargas el archivo swfp de flash de diu lo podemos encontrar en esta pgina, que te explica como hacerlo. Http://www.blup.fr/2005/02/16, tendremos un enlace en dexplayer.swf 2-Tiene licencia licence Creative Commons una vez guardado vamos a insertar el siguiente cdigo: <object type=aplication/x-shockwareflashdata=flash/dexplayer.swf?son=music/1.mp3width=200height=20><param name=movievalue=flash/dewplayer.swf?son=music/1.mp3> </object> En este caso en el atributo data inclumos la url del archivo es decir en el directorio /flash/se encuentra dexplayer.swf, cerramos un interrogante ? son=y aqu indicamos la url del mp3 en value indicamos de nuevo lo que pone en data.
Existen otras maneras mucho ms sencillas para insertar vdeos como puede ser la pgina de
http://www.youtube.com
1-Seleccionamos el vdeo 2-Lo paramos y en lado derecho you tube nos permite copiar el cdigo y queda muy parecido a lo que teniamos anteriormente.
As es como quedara:
<body> <object width=425 heigth=344> <param name=movievalue=http://www.youtube.com/v /5BeCw75wvyw&fs=1></param> <param name=allowfullscreenvalue=true></param> <embed src=http://www.youtube.com/v/5BeCw75wvyw&fs=1type=application/x-shockwareflashallowfullscreen=truewidth=425heigth344></embed> </object>
Colores y fondos;
Cdigo RGB como podemos aplicar colores a los distintos atributos de una pgina web, y como podemos poner colores distintos al fondo de un documento html 1Descargar el siguiente programa. colour_contrast_analixer.exe. Desde la siguiente pgina http://www.visionaustralia.org.au/info.aspx?page=959
2Buscar descarga (versin espaola) que pondr (analizador de contraste de color(zip.195KB)
El hecho de poder poner color a las pginas web les da mayor vistosidad, para especificar colores dentro de una pgina se utiliza el cdigo rgg trmino en Ingls que hace refenecia al color rojo, verde y azul en los cuales podemos especificar distintas tomas de colores. Primero explicar que los nmero hexacecimales se forman utilizando 16 digitos, estos digitos son de menos a mayor 0,1,2,3,4,5,6,7,8,9, y luego las letras maysculas A,B,C,D y F, para especificar un color en un documento html se utiliza el carcter#.
Ejemplo:
#000000--Los dos primeros seran para el color rojo: #000000 Los siguientes seran para el color verde: #000000 Los dos ltimos seran para el color azul: #000000 Para la intensidad del color se har referencia a que 0 es el menos intenso y que FF Ahora vamos a hacer una mezcla entre varios elementos.
Ejemplo:
#FFFF00 Esto vendria a significar mucho rojo, mucho verde y poco azul. Se convertira en color amarillo. Tambin se pueden utilizar numeros para mayor o menor contrarste
Ejemplo:
#FF3333 #FF9999 Lo ms importante de este programa es que nos permite comparar el contraste del color entre un fondo de pantalla. Background y el texto que est por encima del textoForeground
Aplicar colores a un documento:
Vamos a aplicar color a un texto especifico, por ejemplo: <body> <p> Este texto se ver<font color=#FF0000>rojo</font></p> Ahora vamos a aplicar un color de texto a todo el documento y va a ser todo el documento de color verde:
<body text=#00FF00>
Se ver en el navegador; Este texto se ver --- En color verde pero rojo se ver en rojo por la etiqueta <font> si quitaramos esta etiqueta todo el texto sera verde
Ejemplo: <body text=#00FF00>
<p> este texto se ver rojo</p> Ahora vamos a hacer el color del fondo del documento en color negro, utilizarmos la etiqueta bg color
Ejemplo; <body text=00FF00 bg color=#000000>
Al actualizar la pgina se ver todo en negro el fondo. Ahora vamos a explicar el color de los enlaces;
Ejemplo:
<p> Esto es un<a href=http://www.yahoo.estitle=pgina principal de yahoo>enlace</p>. Los enlaces deben diferenciarse del resto del texto de la pgina, para que los usuarios puedan identificarlos facilmente. Un enlace tiene 3 colores, estos tres colores se pueden cambiar mediante tres atributos. Para el enlace que no ha sido visitado el atributo link Ejemplo, en color blanco.
<body text=#00FF00 bg color=#000000 link=#FFFFFF
Para el enlace ya visitado ser vlink y alink es el color de los enlaces activos, un enlace de estas condiciones es cuando se hace click en el enlace.
Ejemplo:
<body text=#00FF00=#000000link=#FFFFFFvlink=#99CC00 alink=#CCCCCC>
IMAGEN DE FONDO
Vamos a aprender como insertar una imagen como fondo de un documento para ello utilizaremos la etiqueta <body background=img/bg.gif> que ser el nombre de la fotografa gif.
Ejemplo: <body background=img/bg.gif>
<p> esto es texto</p>
Para mirar el contraste entre el fondo y el texto podemos utilizar el programa colour_contrast_Ana
lysenexe
Ejemplo:
Colour select--- ser el color del texto. Background---- Ser el fondo del documento Pondremos un color balcno, para ello abrimos de nuevo el documento y aplicamos este color a todo el documento.
<body background=img/bg.giftext=#FFFFFF>
Para que el usuario pueda ver la pgina sin contraste, abriremos de nuevo el programa de contraste, abriremos la pgina. Con el lapiz o la pluma copiamos los colores nos vamos de nuevo a nuestra pgina y pegamos el color .
Ejemplo: <body background=img/bg.giftext=#FFFFFFbg color=#67554C>
Ejercicio prctico;
Vamos a hacer un resumen de lo que hemos visto hasta ahora; hay que hacer una pgina que tenga las siguientes caractersticas. 1. Un ttular con encabezado de nivel 1 y de color rojo 2. Un segundo titular con encabezado de nivel 2 y de color verde 3. Todo el texto de la pgina deber presentarse como una fuente distinta, que la que tiene por defecto, por ejemplo la de comic sanz. 4. En el caso de que no est en el sistema operativo el usuario final, que se visualiza en la tipogrfia Arial, hay que usar cursivas y negritas segn considere. 5. El color de fondo de la pantalla ser un gris muy claro y le vamos a insertar una foto a la derecha del texto, con un borde de ancho de 2 px, para ello vamos a copiar la noticia siguiente.
Aqu vamos a ver como se hace este ejercicio paso a paso:
1. Abrimos un documento en blanco.
<head> <title>prctica</title> <meta name=descriptioncontent=ejercicio prctico> <meta name=Keiwordscontent=titular, negritas, enlaces, tipografas, colores, RGB, color> <meta name=languagecontent=es> <meta http-equiv=content-typecontent=text/html;charset=iso-8859-1> </head>
2 Aplicamos el color de fondo de la pgina, insertamos el texto <body bg color=#DCDCDC text=comic
sanz ms, Arial> 3- A continuacin escribimos el ancabezado de nivel 1 alineado al centro para que destaque ms, con una tipografa de color rojo fuerte, y con el atributo tipografa (face) usaremos tambin la misma.
Ejemplo:
<h1 align=center><font color=#C000000> 4- Ahora vamos al navegador y copiamos la noticia de todo el titular para ello botn derecho copiar, de esta manera copio el ttulo de la noticia volvemos al navegador ponemos el ttulo de la noticia y ponemos la etiqueta <font>.
Ejemplo:
<h1 align=center><font color=#C00000> rpido y sobrecogedor tercer encierro de los San Fermines</font></h1> Ahora vamos a poner el subtitular que ser un encabezado <h2> y </h2> <h2 align=center><font color=#008000>Subtitular de la misma pgina</font></h2>
Ahora nos vamos a otra lnea:
Ahora seleccionamos la imagen guardar imagen ponemos el nombre de la imagen en img src ponemos un borde de 2px y al atributo alt, ponemos algo referido sobre esa imagen y por ltimo lo alinearemos a la derecha.
Ejemplo:
<img src=bonitasw_carreras.jpgborder=2 alt=Inventado con relacin a la imagen align=right. Ahora pasamos a poner el prrafo y lo copiamos de la noticia <p> la noticia del parrafo de la noticia</p> Y por ltimo realizaremos un enlace hacia esta pgina para ello copiamos el enlace de esta pgina en el navegador copiamos volvemos a nuestra pgina y lo copiamos ejemplo: <p><a href=http://www.elpais.com/articulo/cultura/rapido/sobrecogedor/tercer/encierro/sanfermines/elpepucul/20 080709elpecucu_1/testitle=Ir a la pgina del preriodico el pais>ver origen de la noticia<a/></p>
Las Tablas:
Las tablas y sus ttulos: Una tabla es un conjunto de celdas organizadas dentro, de las cuales podemos alojar distintos contenidos, como agendas, resultados, carrito de la compra y otros datos de una forma organizada. Nota; Cuando realices una pgina web, nunca uses tablas para maquetar las pginas, usar tablas para cualquier otra filosofa que no sea lo de mostrar datos tabulados crea especiales dificultades para los usuarios y lectores de pantaya. Tablas bsicas son <table> y </table> Las tablas se especificarn y se escribirn siempre por filas de izquierda a derechas, es decir sucesivamente en horizontal. Dentro de la etiqueta identficaremos las filas que son <tr> y dentro de una fila especificar las celdas
<td>.
Ejemplo:
<head> <title>tablas>/title> <meta name=descriptioncontent=como crear tablas sencillas <meta name=Keywordscontent=table, table, tablas> <meta name=laguajecontent=es. <meta http-equiv=conten-type conten=text/html;charset=iso-8859-1> </head> <body> <table> <tr> <td>1</td> <td>2</td> </tr> </table> Para insertar el borde: <body>
<table borders=1>
Ejemplo con Nombres y Apellidos tabla;
<body> <table border=1> <tr> <td>Nombre</td> <td>Apellidos</td> </tr> <td>Pedro</td> <td>Alonso</td> </tr> </table> </body>
En el navegador se vera de la siguiente manera;
Nombre Pedro
Apellidos Alonso
Pondremos <th> y </th> para los encabezados que en este caso sera nombre y apellidos salen en negrita y el resto del contenido en <td> </td>.
Es necesario inclur un ttulo en cada tabla:
Ejemplo:
<body> <table border=1> <caption> ejemplo de tabla simple</caption> <tr>

Celdas Multicolumna y Multifila
En ocasiones es necesario que una celda se extienda en varias columnas esto se entiende como celdas multicolumnas en vez de ser dos celdas ser una sola, y use dos celdas se utiza el atributo colspan, el atributo que lleva es el nmero de columnas que queremos que ocupe esta celda. <body> <table border1> <caption>tabla con celdas multicolumna</caption> <tr> <tr colspan=2Nombre completo</th> <th>edad</th>
En el navegador se vera de la siguiente forma:
Nombre completo
De esta manera ocupara las dos celdas Y para indicarlo en vertical utilizaremos el atributo rowspan
Ejemplo:
De esta manera bajara dos celdas:

Edad
<tr rowspan=2>edad</th>
Edad ------
Captulo tablas vdeos; Atributos
Ahora vamos a ver los atributos que se pueden aplicar al atributo <table> y los atributos que se pueden aplicar a las etiquetas de filas y de celdas.
Empezamos con los atributos de la etiqueta table:
Ejemplos;
border- align=rigt bg color#E6CCB3> <body>text=#FFFFFF> <table border1align=rightbg color=#E6CCB3background=img/bg.gif> bordecolor=bordercolor=#FFOOOO>cellpadding=10cellspacing=3> <caption><font color=OOOOOO>tablas con celdas multicolumna</font></caption>. <body text=FFFFFF-- En este caso el texto ser de color blanco <table border=1--- Dar el borde deseado a la tabla. align=right-- En este caso para colocar la tabla en la derecha. Bg color-- Para dar color a la tabla. Background-- Este atributo es para insertar la imagen como fondo. <font color --- Lo utilizamos para el ttulo del color.
Qu pasara si algunos usuarios tuvieran desabilitadas las imgnes,de los documentos html? Que no ver demasiado bien, por lo tanto veremos un color de fondo de la misma intensidad que la imagen que usemos de fondo de tabla. Border color=-- Es el color del borde que va a tener la tabla. Cell padding=-- Que define en pixeles el espacio entre los bordes de la celda y el contenido de la misma un valor nmerico. Cells pacin=-- Este define el espacio entre los bordes.
Otro atributo sera el ancho
width500px -- Dar el ancho a las tablas height=300px Altura de la tabla

Otro atributo para las celdas seran: <tr>
<th colspan=2width300px height=150px>Nombre completo</th>
Tambin se podrn alinear los textos de las celdas con el atributo alignleft </tr>.
Ejemplo:
<tr> <th colspan=2witdth=300px aling=left<nombre completo</th> Esto sirve para alinear todas las celdas de la tabla en su respectivo contenido. Para alinear en vertical utilizaremos el atributo valign=bottom>
Ejemplo: <th rowspan=2valignbotton>edad</th>
Para el color de esta celda bg color #990000 >edad</th> Para el color de esta celda bg color= para las etiquetas <td> y </td> y poder diferencias los encabezados del contenido.
Ejemplo:
<tr> <td bg color=#000000>Sonia</td> <td bg color=#000000>Alonso</td> <td bg color=#000000>33</td> </tr>
Las tablas complejas;
En las tablas complejas hay que inclur el atributo sumary un resumen y resultar especialmente til para los usuarios con discapacidades visuales.
Ejemplo:
<body> <table border=1sumary=esta tabla muestgra el nmero y tipo de medallas conseguidas por cada pas en las ultimas olimpiadas> <caption>medallero Olmpico</caption> <tr> <th></th> <th>Medallas de oro</tr> <th>Medallas de Plata</tr> </tr> <tr> <td>EEuu</th> <td>22</th> <td>26</th> <td>18</th> </tr> <tr> <th>Rusia</th> <td>18</td> <td>24</td> <td>20</td> </tr>
Asi se quedara en el Navegador:
Medallero Olmpico Medallero de Oro EEUU Rusia 22 18 Medallero de Plata 26 24
Con las tablas complejas hay que hacer una divisin con los atributos </head> y <head>:
(<thead>); Es el cuerpo de la tabla, define un grupo de filas de encabezamiento de una tabla solo se puede emplear un elemento <thead> por tabla y debes situarlo despus del elemento <caption> y antes de la etiqueta <tfoot>. (<tbody>); Identifica grupos de filas de datos en una tabla, este elemento divide las filas de datos en varios grupos de filas que comparten ciertas carctersticas, su uso es opcional pero sin introducimos el elemento <thead> o <tfoot> debemos de implementarlo si usamos la cabecera de la tabla tendremos que usar <tbody>. (<tfoot>); la etiquetqa tfoot la incluremos despus de la etiqueta </thead> y antes de <body> tfoot delimita un grupo de filas de pie de tabla como solo podremos utilizar un elemento tffot por cada tabla esta etiqueta aparece al final de la tabla.
Ejemplo:
<thead> <tr> <th></th> <th>Medallas de oro</th> <th>Medallas de Plata</th> </tr> </thead> <tfoot> <tr> <dt colspan=4>(*)Medallas pendientes antidopaje</td> </tfoot> <tbody>
As se ver en el Navegador;
Medalla de Oro EEUU Rusia Medalla 22 18 Pendientes
Medalla de Plata 26 24 Antidopaje
Las etiqutas <thead>, <tbody> y <tfoot> permiten que al imprimir tablas largas los navegadores puedan presentar los encabezados y pies de pgina en todas las pginas, adems los navegadores podran presentar tablas largas de forma que la cabecera y pie se mantengan estticos en pantalla, mientras que se desplaza el contenido <tbody> vamos a ver ahora los atriburtos<thead> y <tfoot> aplicados a tablas complejas, estos atributos asocian las celdas de encabezamientos emplearemos el valor del atributo <th id=.
Ejemplo:
<thead> <th></th> <th id=h1>Medallas de oro</th> <th id=h2>Medallas de Plata</th> </tr> </thead> <tfoot> <tr> <td colspan=4>(*)Medallas pendientes antidopaje</td> </tfoot> <tr> <th id=h4>EEUU</th> </tr> <th id =h5>Rusia</th> </tr>
Para asociar los paises y los encabezados:
Ejemplo:
Se ver igual pero los atributos <thid= y <td headres> es para identificar encabezamientos y relacionarlo con los datos:
Ejemplo:
</foot> <tbody> <tr> <th id=pais 1>22</td> <td headres=h1 pais 1>22</td> <td headres=h2 pais1>26</td> <td headers=h3 pais 1>18</td> </tr> <tr> <th id=pais2>Rusia</th> <td headers=h1 pais2>18</td> <td headers=h2 pais2>24</td> <td headers=h3 pais2>20</td> </tr>
En el buscador se ver igual pero es una manera muy importante ayudar a relacionar los datos con los encabezados. En el buscador <th> puedes usar el atributo abbr estos proporcionarn abreviaturas a los encabezamientos, de esta forma los detectores de pantalla mostraran las abreviaturas de las cabeceras correspondientes a una celda en vez de leer el texto completo de la cabecera, as reducimos el tiempo de lectura de los datos de una tabla y evitamos las repeticiones odiosas de largos textos.
Ejemplo:
<thead> <tr> <th><th> <th id=h1abbr=oro>Medallas de oro</th> <th id=h2abbr=Plata>Medallas de plata</th> </tr> </thead> <tfoot> <tr> <td colspan=4(*)Medallas pendientes antidopaje</td> <tfoot> <tbody>
LOS MARCOS:
Son una manera de partir la pgina en distintos apartados:
Todos estos apartados sern independientes los unos de los otros, de modo que en cada espacio se coloca una pgina web distinta.
Ejemplo:
Ejemplo, la primera poda ser 1html, la segunda 2html, la tercera 3html, la cuarta 4html, la quinta 5html y abra una pgina que podramos llamar Inicio html que hara la llamada a cada una de las pginas e indicara las porciones en las que se mostraran en esas pginas.
Pgina 1html Pgina 2html Pgina 3html Pgina 4html Pgina 5html
Una de las principales caractersticas de programacin con marcos frames, podemos es que podemos navegar por los contenidos de nuestra web con la barra de navegacin siempre visible y sin que se tenga
que desmarcar en cada una de las pginas que vamos visitando, otra caractersticas de los frames es que cada marco es independiente y por lo tanto si reduciramos la venta podemos ver que cada marco tiene su propia barra. Para ver el cdigo fuente de los marcos apretaremos botn derecho en el marco que queramos ver: Pero si queremos ver el cdigo fuente de toda la pgina, un archivo o un documento html tendremos que ir a Ver cdigo fuente. Las pginas webs que estn hechas con Frames se componen de una pgina principal que hace la llamada a una serie de pginas en cada uno de los marcos o divisiones que hemos definido en la pgina principal. Los frames marcos o cuadros permiten dividir la ventana en varias ms pequeas de modo que cada una de ellas cargue una pgina html distinta.
Captulo Marcos Video Frasenet
Los Frames se declaran en la etiqueta Frameset que debe ser colocada antes de una etiqueta body. </head> <frameset> </frameset> </body>
Si no insertaramos la etiqueta <frameset> antes de la etiqueta <body> la etiqueta <frameset> se completo: anular por
Definicin de <Frameset> <Frameset>:es la apertura de apertura y cierre que divide la zona en sus zonas y en verticalmente mediante el atributo Cols-- Columnas o bien horizontalmente mediante el atributo rows-- de Filas, los valores de los atributos Rows y Cols estn formados por una serie de elementos separados por comas que indicaran el tamao de las zonas el cual podr ser adems especificado en uno de los tres formatos siguientes:
Ejemplo:
Vamos a hacer una pgina con 2 divisiones horizontales al usar el atributo roxs y veremos una divisin del 30% un marco y 70% el otro marco, por ejemplo si queremos hacer 3 marcos sera de esta forma del ejemplo 70%10%20%, nunca sin rebasar el 100% tambin lo podramos hacer en (px) y en el caso de que solo pongamos por poner un ejemplo un 30% *> esto significara que un 30% ser una marco y arterisco que ocupar el resto del documento.
Ejemplos:
</head>
<frameset rows=20%*>-- Resto del documento.
</head>
<frameset rows=30%70%>-- Dos marcos uno del 30% y otro del 70%.
</head>
<frameset rows=20%30%50%>-- Tres marcos de 20%, otro de 30% y un
ltimo del 50%.
Nota: No superar el 100%, tambin podr realizarse en px pero esta es la manera ms fcil para realizar si quisieras 5 pginas web distintas y poder cambiar su forma cuando quisieras.
Frame y Frames anidados
una vez que hemos indicado el nmero de filas y columnas y la especie reservada a cada una de ellas, con la etiqueta </frameset>
Ejemplo: <frameset rows=30%70%
Aqu tenemos dos divisiones horizontales una de un 30% y la otra de un 70%, ahora debemos especificar con la etiqueta Frame la procedencia de cada una de los Frames que hemos partido la ventana.
Ejemplo: <frameset rows=30%70%> <frame src=hori1.htmlname=titulo>
Hay que tener en cuenta que en este caso tendremos dos ventanas a las que llamaremos: hori1html hori2html Vamos a hacer un llamamiento a cada una de las pginas.
Ejemplo:
</head> <frameset rows=20%80%> <frameset src=hori1.htmlnametitulo> <frame src=hori2.htmlnameinfo> </frameset> <body>
De esta manera todas las pginas estarian enlazadas se podr ver tanto en hori1 como en hori2
As quedara en el Navegador:
Este es el Marco del ttulo
Este es el marco de informacin Ejemplo 1 ejemplo2 Ejemplo3 Ejemplo4 Ejemplo anidado
Despus de este ejemplo vamos a pasar a describir los atributos de las etiquetas frames. Src-- Indicar la url del archivo html que en este caso ocupar un 30% de la parte de la pgina.
<frames src=hori1name=titulo>
Ejemplo:
<frames src=hori1.html>
El atributo name-- lo utilizaremos para distinguir unos hipernlaces de otros: name=titulo> Ahora nos vamos a ir al Navegador donde se encuentra nuestro Frame realizado y observars que hay una barra horizontal en el ejemplo anterior que se desplaza de arriba hacia bajo, para que esta barra no se desplace utilizaremos el atributo noresize=noresize>
Ejemplo:
<frame src=hori1htmlname=titulonoresize=noresize>
Ahora vamos a inclur otro atributo en hori2 scrolling=No> El atributo scrolling=No> nos indica si la zona debe o no debe poseer una barra de desplazamiento o si se deja cuestionar por dos visualizadores, los valores posibles son yes o no o auto en este caso si le damos a no, no nos aparecer el scrilling, si por el contrario decimos yes nos aparecer cuando actualicemos la pgina la barra de desplazamiento tanto lateral como vertical. El ltimo atributo denominado auto lo que viene a decir es que se ejecutar solamete si lo necesita, este valor no es necesario drselo ya que es el valor predeterminado si quisiermos auto no hara falta poner la etiqueta.
Ejemplo: <frame src=hori2.htmlname=info>
El siguiente atributo que vamos a inclur en hori1 sera el mrgen traducido de esta forma en atributo marginheight=100px> En este ejemplo lo que har ser poder mover la ventana del ttulo de arriba hacia bajo con la barra, sin quedarse esttico el ttulo, dejando un mrgen de 100px. Tambin lo podemos realizar con el atributo hori2 el cual dejar una separacin en la informacin del documento dejar una separacin tanto superior como inferior de una separacin de 100px en este caso.
Ejemplo: <frame src=hori2.htmlname=infomarginheight=100px>
Ahora vamos a ver el margen de ancho para ello utilizaremos el atributo marginwidth=500px> que en este ejemplo nos dara 500px por el lado derecho y 500px por el lado izquierdo.
Ejemplo: <frame src=hori2.htmlname=infomarginwidth=500pxbordecolor=#99FF00>
Al hacer esta operacin tendrs que ir a archivo Guardar conjunto de marcos actualizar la pgina. Nota: Con scroling hay que tener cuidado si eliminamos los bordes de los Frens puesto que la pgina web puede tener dimensiones distintas, dependiendo de la definicin del tamao del visitante, si el espacio de la ventana se ve reducido, podra verse reducido el espacio para el Fren y puede que no quepan los elementos que antes si cabian y si eliminamos las barras de desplazamiento puede que el vistante no pueda ver todo el contenido del marco, tambin se puede utilizar este consejo en Frends, y por lo tanto y para conclur si hacemos que los marcos no sean redimensionables seguramente tengamos una declaracin de frent demasiado rgida, que puede ver mal en algn tipo de pantalla.
Frames Anidadas:
Es posible anular Frens llamando a una pgina que tenga de nuevo Frens o bien declarndolo. Vamos ver un ejemplo para entenderlo mejor, tenemos tres pginas a una la llamamos hori1.html, hori2.html,hori3.html y otra a la que vamos a llamar uno.html pues est ltima es la que editaremos uno.html
Ejemplo:
</head> <frameset cols=20%,*> <frame src=hori1.htmltitle=este es el marco del ttulo> <frameset rows=20%,*> <frame src=hori2.htmltitle=este es el marco de informacin> <frame src=hori3.htmltitle=este es otro marco <frameset> </frameset>
En el navegador se vera de la siguiente manera
Este ser el marco del ttulo 20% en vertical (cols) Este es marcon informacin horizontal 20% (rows) Esto es otro marco que ser el resto del documento (*) Noframe;
Ahora vamos a hablar de la etiqueta noframe, hay que comentar que algunos navegadores no soportan los marcos o estn configurados para no mostrarlos, por lo que debemos ofrecer siempre una alternativa a estos problemas, para ello utilizaremos el elemento <noframes> y </noframes> en su interior deberemos inclur los elementos que son necesarios, para poder moverse por el sitio web as como los enlaces de las descripciones y de los marcos, cuando utilicemos el elemento <noframes> evita informar al usuario sobre la antigedad de su navegador y no le sugieras que lo actualice a una versin ni nada de esto.
Si nuestro navegador no soportara los marcos todo el contenido de Frasemet desaparecera, solo entendera lo que soporta entre la etiqueta <noframes>, una solucin sera a insertar entre estas etiquetas sera por ejemplo 2 prrafos en que diermos acceso tanto a la tabla de contenidos y otro a noframes.html versin sin marcos, recuerda siempre insertarlos cuando se inserte una etiqueta <frameset>
Ejemplo:
<frameset cols=221,*> <frame src=menu.htmlscrolling=autonoresize title=Men de contenidos> <frame src=contenido.htmlname=contenidosscrolling=autotitle=contenidos></frameset> <noframes> <p><a href=contenidos.html>tabla de contenidos </a></p> <p><a href=noframes.html>versin sin marcos</a></p> </noframes>
Desventajas de los Marcos:
La actual implementacin de los marcos hace que sea problemtica por varios motivos, el primero que los marcos tienden a degradar las funcionalidad del botn de pgina anterior, por otro lado es imposible hacer referencia al estado actual de un conjunto de marcos con la url, esto es porque al navegar por una pgina con marcos y cambiar el contenido de los mismo y una direccin web, no va a variar, una vez que cabian los contenidos de un conjunto de marcos el borde original ya no es valido es decir si pinchamos en contenido 1 y nos sale en la barra del navegador file///C:/Users/triner/desktip/uno.html al pulsar en contenido 2 nos saldr la misma direccin en el navegador, sin poder hacer referencia en este caso a contenido2 otra desventaja de los marcos es que se obliga al usuario a entrar por la declaracin de Frens ya que en caso de no hacerlo, solo se vera la pgina interior sin marcos, al no mostrarle los marcos exteriores pueden perderse los elementos de navegacin del sitio web otra desventaja, es que los buscadores web no entiendan las relacines entre los marcos indexaran las pginas de forma normal, sin atender si se trata de una pgina interior, marco, o no, como consecuencia de esto, las pginas deseadas del sitio web perderian su presencia original con el elementos de navegacin. Otra desventaja es la apertura de enlaces a pginas externas en los marcos de la pgina actual, que puede resultar molesto para algunos usuarios, puede dar la sensacin de que puede resultar molesto para algunos usuarios, pues da la sensacin que se est limitando la navegacin o que impide el avanzado del sitio actual Adems de eso en ocasiones se produce una deshorientacin, al abrir el contenido de un marco, en una nueva ventana, sigue habiendo navegadores que no soportan los marcos y tambin que algunos navegadores pueden tener en caso de aadir la pgina a su favor.
CSS.
Introduccin y Funcionamiento:
El CSS es un lenguaje de hojas de estilo creadas para controlar el specto de los documentos. El Css es la mejor forma de separar los contenidos y su presentacin y es imprescindible para crear pginas web profesionales, es para los contenidos y el specto, presentan muchas ventajas ya que obliga a crear documentos html bien definidos y con significado completo, adems mejora la accesibilidad del documento reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidades de estilos diferentes, ordenadores, sistemas operativos distintos, pdf. Al crear una pgina web se utiliza en primer lugar el lenguaje html, para marcar los contenidos, es decir para resignar la funcionalidad de cada elemento, una vez creado el contenido en formato html se utiliza el lenguaje CCS para definir el specto del elemento como puede ser el tamao, el color, tipo de letra, posicin de cada elemento etc...
En resumen el html es para crear los contenidos designa la funcin de cada elemento ya pueden ser prrafos, encabezados etc.. y el CSS se utiliza para el specto que va a presentar la pgina web.
Inclur CSS:
Antes de empezar a decir que una de las caractersticas del CSS es su flexibilidad y los diferentes opciones que ofrece para realizar una misma tarea de hecho existen tres opciones, para inclur CSS en un documento html. Con CSS no ser necesario maquetar la pgina es decir todo lo que incluye el diseo ya sea el color, la tipografa y el tipo del tamao desaparecera por lo que no se utilizan etiquetas <font> la primera opcin que vamos a inclu7r para el CSS es html es que los estilos se definen en una zona especifica del propio documento html para ello emplearemos la etiqueta <style>, es decir que solamente se puede inclur en la cabecera del documento es decir este mtodo se emplea para definir un nmero pequeo de estilos o cuando se requiere inclur estilos especificos en una determinada pgina html que complete los estilos que se incluyen por defecto en el resto del sitio web
Ejemplo:
<head> <style type=text/css> h1(color:red; font-family; Arial;font size:large;) p (color;gray;fonto-family:Verdara;font-size:medium: </head>

Otra forma de introducir CSS en el mismo documento sera de la siguiente forma cortaremos los estilos:
Ejemplo:
h1(color:red; font-family:Arial; font-size:large;) p (color;gray;font-family:Verdara;font-size:medium;)
Creamos un documento nuevo en blanco, pegamos los atributos de estilo guardamos el documento en nuestro sitio con la extensin CSS, vamos a llamarle disenio.css lo guardamos volvemos al documento donde nos encontrabmos, cortamos toda la etiqueta style y en su lugar pondremos la etiqueta link con esta y por ltimo el archivo html. Har referencia a disenio.es
Ejemplo:
<head>
<link rel=stylesheettype=text/css href=disenio.-cssmedia=screen/>
</head> El atributo link es primeramente rel que indica el tipo de relacin que tiene el recurso enlazado, para los archivos CSS siempre se utiliza el valor stylesheet type que indica el tiempo del recurso enlazado para los archivos CSS siempre ser el archivo text/css y media que indica el medio en el que se van a aplicar los estilos del archivo CSS de las tres formas que existen de inclur CSS en la pgina html, esta es la ms utilizada, la principal ventaja es que se puede inclur un mismo archivo css en multitud de pginas html, por lo que se garantiza la aplicacin homogneas de los mismos estilos, a todas las pginas que forman tu sitio web, con este mtodo el
mantenimiento de un sitio web se simplifica al mximo, ya que un solo cambio en un archivo css, permite variar de forma instantanea todos los estilos de todas las pginas html que enlazan ese archivo, es decir imaginte que tuviermos un montn de pginas, en nuestro sitio web enlazados entre ellas. Y el ttulo lo tenemos en rojo y lo quisiermos cambiar al color azul, no tendramos que ir a todos los documentos modificando el documento html y sus atributos o cambiar la CSS de ese documento html, simplemente con abrir la hoja de estilos, automticamente en todas las pginas el ttulo sera de color azul.
Otra forma de insertar CSS sera con la etiqueta <style type=text/css>
Ejemplo:
<head> <stule type=text/cssmedia=screen> @import disenio.css; Otra forma sera: @import url(disenio.css) @import url(disenio.css)

Manual para Hacer Tus Paginas Web

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual para Hacer Tus Paginas Web

Transféré par

Droits d'auteur :

Formats disponibles

manualpginasweb.blogspot.

El html es el lenguaje de aplicacin por el que se hacen las pginas web.

Empezar a escribir html

Las etiquetas son la filosofa que vamos a aprender de este lenguaje

Estructura de un documento html

1. Seleccionar Validate by file Upload 2. Seleccionar el archivo en examinar 3. Pulsar en Check

Otra etiqueta muy importante es la content type

nombrar los distintos tipos de msica que existe.

-Cmo modificar el tamao y usar distintas tipogrfias de fuentes?

-Otra etiqueta importante es la <em> y </em>

-Otra etiqueta muy importante es la etiqueta <u> y </u>

-Cuando hablemos de un texto citado pondremos la etiqueta <blokquote> y </blockquote>

<p> la versin 2 de las WCAG, esta todava en

-Con la etiqueta <small>y </small> el texto del tamao es ms pequeo:

-Con la etiqueta <sub>y </sub> hace referencia a subndice

Asi se ver en el navegador:

Listas desordenadas Listas Ordenadas Listas de Definicin Listas Aninadas.

Otro ejemplo de listas anidadas:

Ejemplo: (Vamos a editar el archivo uno.html

Ahora vamos a editar de nuevo uno html

<head> <title>pgina uno</title> </head> <body> <h1> pgina uno</h1>

<body> <h1> pgina dos</h1>

<body> <h1>pgina uno</h1>

<body> <h1> pgina dos</h1>

Si hace clic se abrir nuestro correo predeterminado directamente.-

<body> <h1>descargas</h1> <ul> <li><a href=archivo-comprimido.zip>Archivo1</a></li> </ul>

Lo abriremos con el navegador y nos pondr DESCARGAS .Archivo1

<body> <h1>Descargas</h1> <ul> <li><a href=nueva-ruta/archivo.pdf>Archivo pdf</a></li> </ul> </body>

Atributo ALT Vamos a coger otra imagen <body>

Para el texto alternativo existen 3 tipos de casos.

Ejemplo: <img src=imagenes/alien.gifalt=marciano en nave espacial volando>

De esta manera explicaremos la imagen y el movimiento de la imagen.

En el navegador se ver de la siguiente forma.

</body> Tambin podramos enlazar un texto y una imagen

Esto quieredecir calidad alta:

Ahora vamos a insertar de un archivo de flash a un archivo mp3

2Buscar descarga (versin espaola) que pondr (analizador de contraste de color(zip.195KB)

<p> esto es texto</p>

2 Aplicamos el color de fondo de la pgina, insertamos el texto <body bg color=#DCDCDC text=comic

Ejemplo con Nombres y Apellidos tabla;

<body> <table border=1> <caption> ejemplo de tabla simple</caption> <tr>

En el navegador se vera de la siguiente forma:

De esta manera bajara dos celdas:

Captulo tablas vdeos; Atributos

width500px -- Dar el ancho a las tablas height=300px Altura de la tabla

<tr> <td bg color=#000000>Sonia</td> <td bg color=#000000>Alonso</td> <td bg color=#000000>33</td> </tr>

Las tablas complejas;

Asi se quedara en el Navegador:

Medallero Olmpico Medallero de Oro EEUU Rusia 22 18 Medallero de Plata 26 24

Medalla de Oro EEUU Rusia Medalla 22 18 Pendientes

Medalla de Plata 26 24 Antidopaje

ltimo del 50%.

</head> <frameset rows=20%80%> <frameset src=hori1.htmlnametitulo> <frame src=hori2.htmlnameinfo> </frameset> <body>

Este es el Marco del ttulo

Este es el marco de informacin Ejemplo 1 ejemplo2 Ejemplo3 Ejemplo4 Ejemplo anidado

Ejemplo: <frame src=hori2.htmlname=info>

Ejemplo: <frame src=hori2.htmlname=infomarginheight=100px>

<head> <style type=text/css> h1(color:red; font-family; Arial;font size:large;) p (color;gray;fonto-family:Verdara;font-size:medium: </head>

Vous aimerez peut-être aussi