Dreamweaver M1 UD1 Internet y WWW

Forinsur S.L.
Centro de Formacin | Manual de Usuario
MDULO I Programacin en HTML mediante Dreamweaver Internet y WWW

Internet, como est ahora, es una excelente herramienta para la bsqueda de informacin, independientemente de en qu punto del mundo se encuentre. Las aplicaciones de negocios, de hecho, se afanan por dar a los usuarios herramientas para crear nueva informacin a partir de cero. Internet est al borde de una pequea revolucin que, aunque usted como usuario no se d cuenta de ello, transformar no la forma en que est diseada o construida, sino la manera en que usted la utilizar. De todos los servicios que nos presta Internet, el segundo ms utilizado es el World Wide Web o WWW. Una vez que uno se encuentra en condiciones de utilizar los programas clientes de Internet y en especial los navegadores o Browsers (Mozilla Firefox, Netscape Navigator o Microsoft Internet Explorer) tal vez se pregunte Cmo se crean estas pginas en Internet? La respuesta es... con HTML.
Una pgina web bsica

Lo primero es saber donde crear el archivo de texto que contendr las instrucciones HTML (Hipertexto), para lo cual tenemos varias opciones: 1. Utilizar programas creados para desarrollo de pginas WEB, entre los que podemos citar: - Microsoft Front Page. - Microsoft Internet Assistan. - Macromedia Dreamweaver. 2. Utilizar un editor de texto y crear nuestro propio cdigo, el mismo que ya no contendra cdigo basura.
Tcnico Especialista en Diseo, Animacin y Programacin Web
La primera opcin es la ms sencilla y ms rpida, sin embargo est limitada y es dependiente del software a utilizar, ya que es el software el que se encarga de elaborar y ubicar los cdigos de la pgina WEB.
La segunda opcin es ms lenta y menos vistosa, pero esta opcin le ensea a utilizar cada uno de los comandos e instrucciones HTML (etiquetas) sin depender de ningn programa. Esto tiene sus beneficios y el principal de ellos es que nuestras pginas ya no contarn con cdigo excedente y/o cdigo basura, de modo que ocuparn menos espacio, por ende sern ms rpidas al momento de ser cargadas desde Internet y al invertir menos tiempo en cargar una pgina, se gastar menos dinero pagando al proveedor de Internet.
Forinsur S.L. Centro de Formacin | Manual de Usuario
Como casi todos los sistemas ms comunes en PC funcionan bajo un entorno Windows, para crear los Hipertextos utilizaremos un accesorio que viene incluido en el sistema. El Bloc de Notas o Note Pad. El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por un navegador de Internet. Estas instrucciones son denominadas Etiquetas. Una etiqueta cumple su funcin de la siguiente manera: <nombre de la etiqueta> Apertura de una etiqueta siempre entre < > texto/grfico/etiquetas A la cual se aplica la etiqueta </nombre de la etiqueta> Cierra de la etiqueta siempre entre </ > Al acabar de crear un hipertexto , este se deber grabar con la extensin .html o bien .htm. Es bueno acotar que un archivo HTML es un archivo de texto que tiene una extensin definida. Este archivo de texto contiene etiquetas, las mismas que son expresadas como instrucciones y el navegador WEB es quien las interpreta. Una pgina web esta compuesta de 2 partes: el encabezamiento y el cuerpo de la pgina. Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar incluidas en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales son:
<html> </html> Indica al navegador que el documento texto que esta leyendo es un documento HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo. <head> </head> Aqu se detalla el encabezado de la pgina WEB. Esta etiqueta se abre luego de <html>. <body> </body> Cuerpo de la pgina donde se despliega el contenido global. Esta etiqueta se abre luego de cerrar el encabezamiento con </head> y se extiende hasta el final de la pgina, cerrndose antes de </HTML>. Ejemplo: <html> <head> </head> <body> Bienvenidos al curso de HTML </body> </html> El hipertexto ser grabado con el nombre index.html en su disquete o en alguna ubicacin en el disco duro. Al asignar la extensin .htm o .html ya se crea un hipertexto. Asegrese de ingresar index.html como nombre a grabar en su bloque de notas (incluidas las comillas) para evitar que se aada la extensin .txt. Sin cerrar el programa de edicin de texto que estamos usando, abra su navegador de WWW. En la pantalla de direccin WEB, introduzca la ruta completa a su archivo index.html, y usted deber poder ver en su pantalla su primera pgina WEB. Importante: Como se ve en el ejemplo 1. Toda etiqueta abierta debe cerrarse. En caso de no cerrarse el error podra causar confusin al navegador. Etiqueta: <title> </title>
Esta etiqueta va en la parte del encabezamiento de la pgina web, es decir en el HEAD, y define en su contenido el ttulo de la pgina web, el mismo que aparecer en la parte superior izquierda de la pantalla de su navegador. Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo <title> entre las etiquetas de apertura y cierre del encabezado (head). Ejemplo: <html> <head> <title>Curso de HTML</title> </head> <body> Bienvenidos al curso de HTML </body> </html> El nuevo archivo HTML se grabar con el mismo nombre index.html, tan solo usando la opcin de Grabar en su editor de Texto. Una vez realizado esto, y sin cerrar su editor de texto, vamos al navegador en el que seleccionamos la opcin de Actualizar/Refresh y nuestra nueva pgina estar visible. Notar que el ttulo aparecer en la parte superior de la pgina. Etiqueta <body> </body> Todo el texto, las imgenes y el formato visibles al usuario deben encontrarse entre las etiquetas <body>...</body>. Esta etiqueta cuenta con los siguientes atributos: - Bgcolor define el color de fondo de la pgina. - Text define el color del texto de la pgina. - Link define el color de los vnculos en la pgina. - Alink define el color del vnculo actual o activado en la pgina. - Vlink define el color del vnculo ya visitado. - Background define el archivo grfico que ser desplegado como fondo. - Bgproperties define el movimiento vertical del fondo.IE. Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.
Apariencia del texto

Una vez que ya se tiene una idea de cmo funcionan la etiqueta de encabezamiento y parte de la etiqueta de definicin del cuerpo de la pgina, trabajemos con el texto. HTML fue creado en principio para el alfabeto en ingls, sin embargo se buscaron modos para mostrar tambin caracteres o smbolos denominados especiales. Para utilizar caracteres especiales usaremos los smbolos & y ; para denotar el inicio y final respectivamente de un smbolo especial. De esta manera: Texto: ´ ñ " &deg: á é Descripcin: Acento ee Comillas Dobles Grados a con acento e con acento espacio en blanco " Pantalla:
La idea bsica para acentos y signos es combinar dos teclas. Para lograr una o con acento debemos combinar una o y un acento: ó Para entender un poco ms este proceso, veamos el siguiente ejemplo: Ejemplo: <html> <head> <title>Curso de HTML</title> </head> <body bgcolor=#C0D9D9 text=#000000> Bienvenidos al curso de HTML Cuando la temperatura es menor a 15°c hace bastante frío. Este es un ejemplo de página WEB </body> </html>
Despus de realizar el proceso para grabar y actualizar la pgina notara que se incluyen en la pgina los smbolos de grados, la i con acento y la a con acento. Notar tambin que el texto se encuentra de corrido en una sola fila. Para bajar de linea utilizaremos la siguiente etiqueta especial: Etiqueta <br> La etiqueta <br> indica al navegador cliente que inserte un salto de lnea en un documento HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una mquina de escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre. Etiqueta <hr> La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada automticamente, con una apariencia de tercera dimensin. Esta etiqueta es especial, por que no necesita de cierre, y tiene los siguientes atributos: Align: establece que la regla se alinee a la izquierda, centro o derecha con LEFT,CENTER o RIGHT NOSHADE: quita el sombreado predeterminado de la regla WIDTH: permite especificar el ancho de la regla (en pxeles o porcentaje) Ejemplo: <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> Bienvenidos al curso de HTML<br> <hr align=center width=50%><br> Cuando la temperatura es menor a 15°c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB :)<br> </body> </html> SIZE: permite especificar el alto de la regla (en pxeles)
Encabezados Las etiquetas <h1> </h1> al <h6> </h6> (acrnimos de heading 1..6) son encabezados del cuerpo del texto. El encabezamiento <h1> nos proporciona las letras de mayor tamao. Notar que si usamos una etiqueta de encabezamiento, automticamente se incluir un retorno de carro al final del mismo. La etiqueta tiene el siguiente atributo: - Align: Permite ubicar el encabezamiento a la izquierda, centro o derecha de la pantalla (LEFT, CENTER, RIGHT) Ejemplo: <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> <h1 align="center"> Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> <h2>Bienvenidos</h2> Cuando la temperatura es menor a 15°c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB :)<br> </body> </html> Despus de realizar el proceso de grabado/actualizacin notar las
diferentes dimensiones de las dos primeras lneas. Ubicacin, formato y atributos de texto Etiqueta <center> </center> Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre. Etiqueta <b> </b> Esta es la etiqueta que nos posibilita un texto con negrillas. Etiqueta <u> </u>
Etiqueta que posibilita resaltar un texto con subrayado. Etiqueta <i> </i> Etiqueta que permite resaltar el texto con inclinacin itlica. Recuerde que puede combinar entre si todas estas etiquetas. Veamos un ejemplo para demostrar el uso de las ltimas 4 etiquetas que se vieron. Ejemplo: <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> <h1 align="center"> Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> <h2>Bienvenidos</h2> Cuando la temperatura es menor a 15°c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB <b><i>:)</i></b><br> <b>Este texto esta con negrillas</b><br> <u>Este texto esta con subrayado</u><br> <i>Este texto esta con inclinación itálica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br> </body> </html> Note el cambio en la sentencia de la lnea o regla <hr>, se elimin align=left. Notar que la nueva regla saldr al centro, pues esta es la alineacin por defecto. Adems sacamos el punto final que exista en la primera lnea que ahora aparece centrada. Etiqueta <font> </font> Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de fuente, tamao y color. Atributos:
Color: determina el color que se aplica al texto Size: determina el tamao relativo del texto. Los tamaos vlidos son del 1 al 7, siendo el predeterminado el 3 y el ms grande el 1. Face: asigna una fuente o tipo de letra.
Ejemplificando, introduciremos lo siguiente: Espaa. Note que la primera E es ms grande que el resto del texto. Usaremos el tamao 7 para la letra E y el tamao estndar (3) para las dems letras. Ejemplo: <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000"> <h1 align="center"> Bienvenidos al curso de HTML</h1><br> <hr align=center width=50%><br> <h2>Bienvenidos</h2> Cuando la temperatura es menor a 15°c hace bastante frío.<br> <hr align=left width=25% size=5><br> Este es un ejemplo de página WEB <b><i>:)</i></b><br> <b>Este texto esta con negrillas</b><br> <u>Este texto esta con subrayado</u><br> <i>Este texto esta con inclinación itálica</i><br> Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo. <br> <font color="red"><font size=7>E</font>s</font><font color="yellow">pa</font><font color="green">a</font> <br> </body> </html>
Funcionalidad del texto

HTML es un sistema de marcado cuya funcin es definir la estructura y aspecto de un documento. Debemos profundizar esta definicin, que sin ms aclaraciones no dira mucho, a fin de comprender mejor los conceptos de marcas lgicas y tipogrficas. Una marca tipogrfica tiene como funcin formatear visualmente un documento, es decir aplicarle negritas, cursivas, subrayarlo, etc. Una marca lgica, por el contrario, tiene como funcin definir una estructura independientemente del aspecto. Es decir, independientemente del modo en que el navegador interpretar visualmente el marcado. Para comprender mejor esta diferencia, tomemos dos elementos que sirven para formatear texto: <ADDRESS></ADDRESS> Se trata de una marca lgica que representa la informacin "direccin" en el documento. Dicho de otro modo, cuando estamos ante una direccin, una direccin de correo electrnido o un nmero de telfono, segn las reglas del HTML, hay que insertar esta marca lgica. <I></I> Se trata de una marca tipogrfica que indica que el texto comprendido en el elemento va en cursiva. Es, por tanto, una marca cuya funcin es dar un determinado aspecto al documento y no marcar una estructura.
La marca FONT y el nuevo estndar HTML 4 HTML 4 es el estndar que, desde hace casi dos aos, rige las suertes del lenguaje de marcado ms popular del mundo. Sin hacer juicios de valor sobre las novedades del nuevo estndar, queremos subrayar que el W3C ha desaconsejado el uso de la marca FONT en la formatacin del texto en HTML. As, los navegadores leen todava esta marca, pero su uso est rigurosamente prohibido por el nuevo estndar. Segn HTML 4, la formatacin del texto corresponde exclusivamente a las hojas de estilo.
Formatear ttulos de <H1> ad <H6> La marca <Hn> (donde n puede ser cualquier nmero comprendido entre 1 y 6) se emplea para definir el estilo de los encabezados de la pgina, dndoles ms o menos relieve segn el nmero correspondiente. Como hemos sealado, los nmeros van del 1 al 6, siendo ms importantes los nmeros ms bajos que los altos. Visualmente, esta diversa importancia se plasma en la diferente dimensin del texto. Adems de definir el estilo de los encabezados, la marca <Hn> introduce separaciones de prrafo. <FONT> La marca tipogrfica FONT es una de las ms utilizadas y frecuentes en el actual web publishing. En la seccin Impostar el fondo del documento (elemento BODY), hemos visto que el atributo TEXT da un color nico a todo el texto del documento. La marca FONT tiene, en parte, una funcin similar, aunque es mucho ms amplia y conceptualmente diversa. La marca FONT se emplea para formatear el tipo y tamao del texto en algunos puntos del documento especficos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto comprendido dentro quedara formateado tal y como estuviera indicado. Sin embargo, conceptualmente la marca FONT ha sido concebida para definir partes limitadas de texto. Por otro lado, mientras TEXT determina tan slo en color del texto, la marca FONT puede definir el tipo utilizado, as como su tamao y color. Aqu tienes la sintaxis correcta de la marca: <FONT FACE="arial" SIZE=5 COLOR=red>Tipo para
formatear</FONT> El atributo FACE="arial" indica el tipo que se visualizar; SIZE=5 el tamao del tipo, que puede estar comprendido entre 1 y 7 (mayor dimensin cuanto ms cercano al 7); COLOR=red indica el color del texto (que puede expresarse asimismo en valores hexadecimales). <B>, <I>, <U> <B>, <I>, <U> son tres de las marcas de formatacin tipogrfica ms usadas del HTML. Todas ellas deben constar de apertura y cierre:
<B> Texto en negrita </B> El texto comprendido entre estas marcas queda formateado en negrita (la B corresponde al ingls BOLD). <I> Texto en cursiva </I> El texto comprendido entre estas marcas queda formateado en cursiva (la I corresponde al ingls ITALIC) <U> Texto subrayado </U> El texto comprendido entre estas marcas queda subrayado aun sin ser un enlace (la U corresponde al ingls UNDERLINE). Existe tambin la marca STRIKE para el texto tachado:
<STRIKE> Texto tachado </STRIKE> <SUP> y <SUB> Estas dos marcas tipogrficas crean respectivamente superndices(SUP), en los que el texto est en posicin ligeramente superior respecto al texto normal, y subndices (SUB), posicin ligeramente inferior respecto al texto normal. Es posible anidar diversas marcas a fin de obtener efectos de superposicin sucesiva. Estos elementos se usan, sobre todo, en las notas o en las frmulas matemticas. La sintaxis correcta es: Forinsur<SUP></SUP> es una marca registrada. Forinsur<SUB></SUB> es una marca registrada. Y el navegador mostrara esto: Forinsur es una marca registrada. Forinsur es una marca registrada.
Texto preformateado HTML lee el texto, obviamente, de izquierda a derecha y, sin ningn tipo de formatacin, cambia de rengln al final de cada lnea sin interrupciones. La
formatacin que examinamos en esta leccin indica al navegador dnde saltar de lnea, qu tipo de carcter utilizar, qu palabras resaltar, etc. A menudo, sin embargo, hay que importar un documento creado con un editor de texto normal sin formatear, tal y como ha sido creado. Para ello, HTML prev las marcas de texto preformateado, las cuales no leen ni interpretan algunas marcas de HTML ni los caracteres especiales:
<XMP> Texto para formatear </XMP> <PRE> Texto para formatear </PRE> Ambas marcas tienen la misma funcin, aunque el estndar de HTML 4 prev el uso de XMP y no de PRE. Breve descripcin de las marcas lgicas Al inicio de la leccin, hemos definido la diferencia entre marcas tipogrficas y lgicas. Ahora citamos las marcas lgicas ms interesantes y su correspondiente utilizacin en HTML: <ADDRESS> Se emplea para indicar informacin relacionada con cualquier tipo de direccin (e-mail, telfono, etc.). <BLOCKQUOTE> Se usa en las citas textuales que ocupan ms de dos o tres lneas. <CITE> Indica la fuente de la cita. <CODE> Se utiliza para formatear lneas de cdigos de programacin. <DFN> El texto comprendido dentro es una definicin. <EM> Da nfasis al texto comprendido dentro. <KBD> y <SAMP>
Poco utilizados. Indican cosas que el ordenador debera decir al usuario y viceversa, segn un tpico concepto de Unix. <STRONG> Denota nfasis fuerte. <VAR> Asociado a CODE, indica las variables de programacin.
Bloques de texto
En este captulo vamos a estudiar un poco cmo podemos ya formatear y distribuir el texto de nuestra pgina de una forma efectiva. Para ello disponemos de la ayuda de una serie de etiquetas especficas de HTML, que mas que formatear una palabra o grupo de ellas en alguno de los estilos posibles lo que nos permiten es definir bloques de texto con caractersticas definidas, crear espacios en blanco o saltos de lnea, introducir cabeceras, etc. Es decir, que van un poco mas all y nos van a permitir en cierta forma maquetar nuestros textos adems de aplicarles un estilo definido. Creacin de prrafos. Los prrafos en HTML se definen mediante las etiquetas <P>...</P>, que engloban en un nuevo prrafo todo el texto comprendido entre ellas. No es estrictamente necesaria la etiqueta de cierre </P>, ya que los navegadores asumen que comienza un nuevo prrafo en cuanto se encuentran con una etiqueta <P>, salvo en el caso de que prrafos sucesivos usen una alineacin diferente, en cuyo caso s que es necesaria cada etiqueta de cierre. De todas formas, y como regla general en todo el cdigo HTML, es siempre conveniente poner las etiquetas de cierre, ya que as evitamos posibles errores y obtenemos un cdigo limpio y claro. Por lo tanto, a la hora de escribir nuestros textos en HTML deberemos estudiar los diferentes bloques que lo componen y distribuir cada uno de ellos dentro de una pareja de etiquetas <P>...</P>. Cada vez que acaba un prrafo se produce un salto de lnea con espaciado incluido, por lo que entre dos prrafos habr siempre una lnea en blanco. En la distribucin del texto
en esta pgina se podr apreciar este salto entre prrafos, como ocurre si ir mas lejos con el prrafo que viene a continuacin. La forma primaria de construir bloques de texto en HTML pasa por la utilizacin de los prrafos. La etiqueta <P> admite una serie de atributos que la complementan, entre los cuales destacan: <P ALIGN="left / center / right / justify">...</P>, que permite alinear el texto del prrafo a la izquierda (por defecto), centrado, a la derecha o justificado, en cuyo caso las lneas de texto ocuparan siempre la misma anchura total, encargndose el navegador de crear espaciados entre las palabra de cada linea para conseguir este efecto. Ejemplos: <P ALIGN="left">prrafo alineado a la izquierda</P> <P ALIGN="center">prrafo centrado</P> <P ALIGN="right">prrafo alineado a la derecha</P> que nos da: prrafo alineado a la izquierda prrafo centrado prrafo alineado a la derecha <P TITLE="texto">...</P>, que asigna un ttulo determinado al texto contenido en el prrafo y que origina que al situar el cursor sobre cualquier parte de este texto aparezca un "bocadillo" con el texto introducido en el ttulo. Se puede usar para introducir una pequea explicacin sobre el texto contenido en el prrafo.
<P STYLE="atributos de estilo">...</P>, cuya finalidad es la de asignar un estilo definido al texto incluido en el prrafo, y del que haremos un estudio mas amplio en el captulo de Hojas de Estilo en Cascada (CSS) aplicadas a los textos.
<P CLASS="clase">...</P>, anloga a la anterior, pero que ahora hace referencia a una clase de estilo definida bien en la cabecera de la pgina, bien en un fichero de estilos externo.
<P ID="identificador">...</P>, anloga a las anteriores, pero que ahora define una serie de caractersticas de estilo y/o posicionamiento exclusivas de ese prrafo en concreto. Estudiaremos esto en el tema de CSS.
Otros bloques de texto. La pareja de etiquetas <P>...</P> es la bsica para la creacin de bloques de texto con unos atributos de estilo propios, pero tambin disponemos de otro par de parejas de etiquetas que nos permiten conseguir lo mismo y que son: <DIV>...</DIV>, anloga del todo a la anterior y con los mismos atributos, pero que en vez de crear un salto de lnea con separacin crea un salto de lnea simple entre dos bloques. Por ejemplo: <DIV>esto es un bloque creado con DIV</DIV> <DIV>y este es el siguiente, tambin creado con DIV</DIV> que nos da: esto es un bloque creado con DIV y este es el siguiente, tambin creado con DIV
<SPAN>...</SPAN>, tambin parecida a las anteriores, pero que no posee el atributo ALIGN y que adems no crea salto de lnea, por lo que el contenido de dos bloque SPAN se vera uno a continuacin del otro, en la misma lnea. Ejemplo:
<SPAN>esto que nos da:
es
un
bloque
creado
con
SPAN</SPAN>
<SPAN>y este es el siguiente, tambin creado con SPAN</SPAN>
esto es un bloque creado con SPAN y este es el siguiente, tambin creado con SPAN
Estas ltimas parejas de etiquetas, DIV y SPAN adquieren todo su significado con la aplicacin de Hojas de Estilos, suponiendo un antes y un despus en el formateo y posicionamiento de elementos en HTML. Las estudiaremos a fondo en el captulo correspondiente.
Listas
Las listas pueden ser: no ordenadas, ordenadas o de definicin. Las listas no ordenadas: Van precedidas por "bullets" Se entiende que no importa el orden
Se utilizan con mucha frecuencia. Ejemplo: <P>Las listas no ordenadas: <UL> <LI>Van precedidas por "bullets" <LI>Se entiende que no importa el orden <LI>Se utilizan con mucha frecuencia </UL> Van precedidas por "bullets" Se entiende que no importa el orden Se utilizan con mucha frecuencia
o o o
Las listas ordenadas: 1. Van precedidas por nmeros
2. La numeracin es automtica Son tambin muy utilizadas Ejemplo: <P>Las listas ordenadas: <OL> <LI>Van precedidas por nmeros <LI>La numeracin es automtica <LI>Son tambin muy utilizadas </OL> Las listas de definiciones: Primer trmino: Definicin del 1er trmino Segundo trmino: Definicin del 2 trmino <P>Las listas de definiciones: Ejemplo: <DL> <DT>Primer trmino <DD>Definicin del 1er trmino <DT>Segundo trmino <DD>Definicin del 2 trmino </DL>
Hiperenlaces
Un enlace vnculo hipertextual es un texto, botn o imagen que al seleccionar nos lleva a otra direccin URL, pgina WEB o recurso. Etiqueta <A> </A> La etiqueta <A> que viene de ancla, denota el inicio y el final de una instruccin que contiene alguna forma de vnculo o hipervnculo. Esta etiqueta permite al usuario vincularse a otra ubicacin dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de correo electrnico, ... Atributos: HREF: Recurso al cual se hace referencia el hipervnculo
NAME: Especifica el nombre de la posicin a donde apuntar TARGET: Destino del enlace (generalmente para pginas con Frames)
Por ejemplo, desde una nueva pgina crearemos enlaces a las 3 pginas anteriores y adems otros enlaces importantes. En este ejemplo, aplicaremos tambin los atributos para colores de los vnculos de la etiqueta Body. Ejemplo: <html> <head> <title>Página de enlaces</title> </head> <body bgcolor="#C0D9D9" text="#000000" background="fondo.gif" link="#000080" vlink="magenta" alink="black"> <center><h1> <a name="tope"></a> Enlaces</h1><br> <img src="foto.jpg" alt="Foto de Claudia"><br><br> <a href="index.html">Página Principal o Página Uno</a><br> <a href="pag2.html">Página Dos</a><br> <a href="pag3.html">Página Tres</a><br> <br> <a href="http://www.forinsur.com/">Forinsur en Internet</a><br> <a href="ftp://ftp.microsoft.com/pub/">FTP de Microsoft</a><br> <a href="mailto:fpo@forinsur.com">Envía comentarios sobre este manual por E-Mail</a><br> <br><br> <a href="#tope">De vuelta arriba</a> </center> </body> </html> Podr notar que los enlaces de la parte inferior hacen referencia a recursos que se encuentran en Internet. Reemplazando la direccin E-Mail del ltimo enlace, podr crear un enlace a su E-Mail. El ltimo enlace hace referencia a
una porcin de la misma pgina, que fue definida al inicio de la pgina HTML. Esta parte es til para accesos a partes diversas de una sola pgina.
Imgenes y multimedia
Hasta este momento se ha trabajado solamente con texto. Comencemos a introducir grficos en nuestra pgina HTML. Se deben tener dos consideraciones importantes para trabajar con grficos: - Los nicos formatos, que por ahora soportan los visualizadores son: *.gif y *.jpg o *.jpeg. - Las imgenes no deben ser de tamao grande por que el visualizador o navegador puede demorar demasiado en bajarlas. Aqu trabajaremos tambin con el atributo background de la etiqueta <body> que haba quedado pendiente. La idea de trabajar con un fondo en una pgina web, es la misma que tener un fondo en nuestro entorno Windows. El archivo puede estar ubicado en la misma carpeta o bien en otra que contenga solo grficos. Trate de que el color de fondo de la pgina (que ya no aparecer) sea parecido al color principal de la imagen que usar como fondo. Si es necesario re acomode los colores de texto y vnculos definidos en <body>. Supondremos tenemos un grfico llamado fondo.gif para el ejemplo 8 que como notar ser reformulado en funcin a utilizar las nuevas etiquetas. Importante En Internet por lo general una mayscula no es igual a una minscula. Tome en cuenta esto al utilizar y hacer referencia a archivos. Como sugerencia es bueno tener todos los archivos con minsculas. Etiqueta <img> Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye al navegador para que exhiba la imagen especificada. El formato bsico para incluir un grfico es: <img src=imagen.ext>
No es necesario redimensionar en forma permanente un archivo grfico para exhibirlo en contextos variables; sin embargo, el autor de HTML puede indicar al navegador que redimensione la imagen especificando los siguientes atributos: Src: identifica la imagen que se desplegar. Height: para redimensionamiento de grfico (en pixeles o en porcentaje). Width: para redimensionamiento de grfico (en pixeles o en porcentaje) A la imagen se le puede aplicar un borde que se hace notorio especialmente cuando se trata de una imagen que adems es un hipervnculo: - Border: Definido en pixels. La imagen tambin puede alinearse con respecto al texto: - ALIGN: Alineacin, puede ser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT. En caso de que la imagen no pueda exhibirse, se puede desplegar un texto: ALT: Especifica el texto alterno.
Es a partir de este ejemplo, que se va a realizar una nueva pgina, la misma que llamaremos pag2.html o bien pude ser grabada con otro nombre. Supondremos contamos con un grfico llamado foto.jpg. Ejemplo: <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"> <center><h1>Bienvenidos al curso de HTML</h1></center><br> <hr width=50%><br> <h2>Información General</h2> Este curso muestra los conceptos básicos del uso de etiquetas e instrucciones en la elaboración de documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br> <center><img src="foto.jpg" border="1" alt="Foto de Claudia">
</center> <br> Es muy importante saber ubicar los gráficos y combinar de buena manera los colores para brindar una buena imagen <b><i><font color="red">:)</font></i></b>.<br><br> Una página WEB es muy importante, pues provee a nuestro trabajo una ventana al mundo.<br> </body> </html> Realice el proceso de grabado con el nuevo nombre de pgina pag2.html y cargue la nueva pgina en su navegador. De un modo similar a como se inserta una imagen se puede insertar un fichero de sonido o de vdeo. Sonido de fondo al cargar la pgina En este caso la etiqueta depende del navegador, ya que se implementa de forma diferente en el Explorer y el Netscape. Los formatos ms usados son mid (para temas musicales sin voces), wav y au. Netscape La etiqueta bsica para que se cargue el fichero de msica con la pgina, sin intervencin del usuario, es en Netscape (siendo obligatorio especificar el tamao): <EMBED SRC="gifs/derroche.mid" WIDTH=144 HEIGHT=30> En Netscape se ver para WIDTH=160 HEIGHT=70 como:
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
Si pones esta etiqueta, las versiones ms recientes del Explorer (desde la 4.0) tambin la interpretan correctamente, salvo LOOP. El Explorer lee el fichero una vez para LOOP=0 y lo repite indefinidamente para N igual a otro valor cualquiera. Explorer El Explorer ofrece menos posibilidades para manejar estos ficheros. La etiqueta bsica para que se cargue la msica con la pgina es: <BGSOUND SRC="fichero de sonido" LOOP= n INFINITE> donde n es el nmero de veces que se oye el fichero: 1, 2, 3 ... o infinitas. Recuerde que slo funciona en el Explorer. Sonido de fondo en los dos navegadores Si desea que suene la msica al cargar la pgina con los dos navegadores debe escribir las etiquetas para ambos. Es decir debe poner: <bgsound src="../gifs/houston.mid"> <embed src="../gifs/houston.mid" Hidden="true" > para que suene una vez o bien: <BGSOUND SRC="../gifs/cantina.wav" LOOP=infinite> <EMBED SRC="../gifs/cantina.wav" WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="true" HIDDEN="true"> para que se ejecute indefinidamente. Aqu tiene algunos ejemplos de pginas con sonidos. Una vez cargadas utilice el botn derecho del ratn para ver el cdigo fuente (el origen en Netscape). Sonido desde un enlace en la pgina Si no quiere que se cargue la msica con la pgina, algo que llega a resultar bastante pesado a veces, debe poner un enlace al fichero de sonido, lo que funciona con ambos navegadores: Netscape y Explorer. Tambin puede
poner cualquier otro tipo de ficheros de sonido, como mp3, que comprime hasta 12 veces la msica, sin prdida apreciable de calidad. Vdeo El gran problema de los ficheros de vdeo es su tamao, ya que unos pocos segundos pueden representar varios Mb (mega bytes) de tamao. Probablemente en el futuro se ir generalizando su uso, ya que aumentar la velocidad en la Red. Los formatos que se emplean son variados: avi, mpeg, ram, mov, etc, que pueden reproducir a la vez sonido y vdeo. Los ficheros avi y mpeg se reproducen con el Reproductor Multimedia de Windows, pero los dems necesitan visores propios que se deben instalar previamente. Por ejemplo los ficheros ram se visualizan con Real Player, los mov con Quick Time, etc. Son los llamados plug-in. En Netscape, la etiqueta es muy parecida a la de sonido, siendo obligatorio especificar tambin las dimensiones: <EMBED SRC="video.avi" HEIGHT=300 WIDTH=400 AUTOSTART=false LOOP=false> En explorer debe llamar al fichero con un enlace: <A HREF="gifs/jordan.avi">Mira el vdeo de Jordan</A> lo que abrir el programa asociado al tipo de vdeo elegido cuando lo pulse. En el Netscape tambin puede hacer esto mismo.
Tablas
En HTML tambin podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas: Etiqueta <table></table> Seala el inicio y final de una tabla. Sus atributos son: - Align: Establece la alineacin de la tabla o texto mediante ALIGN=LEFT o ALIGN=RIGHT. - Bgcolor: Establece el color de fondo de las celdas de la tabla. - Border: Determina el ancho del borde en pixeles. - BorderColor: Asigna un color al borde. - BorderDark: Determina el color de la parte oscura de un borde de 3 dimensiones.
- BorderLight: Asigna el color de la parte clara de un borde de 3 dimensiones. - Caption: Especifica el titulo para la tabla. - Cellpadding: Establece la cantidad de espacio libre junto al contenido de una celda. - Cellspacing: Asigna la cantidad de espacio entre las celdas de una tabla. - Width: Determina el ancho de la tabla en pixeles o en un porcentaje.
Etiqueta <th> </th> Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una tabla. Atributos principales: Colspan especifica el nmero de celdas que cubre el encabezado Align Determina la posicin del texto del titilo
Etiqueta <tr> </tr> Indica al navegador que exhiba el texto dentro de una fila; puede tambin interpretarse como la etiqueta que define filas. Align Alineacin del texto/objetos en toda la fila
Etiqueta <td> </td> La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas especficas de una tabla. Atributos principales: Align Alineacin del texto/objeto de la celda Bgcolor Color de fondo de la celda Background imagen de fondo de una celda Width Ancho de la celda/columna con respecto al ancho de la tabla Solo precisa definir el ancho en la primera celda de la columna. Recuerde que dentro de una celda, usted puede insertar desde texto o un grfico hasta una tabla entera.
Ejemplo: <html> <head> <title>Curso de HTML</title> </head> <body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"> <center><h1> Bienvenidos al curso de HTML</h1></center><br> <hr width=50%><br> <h2>Información General</h2> Este curso muestra los conceptos básicos del uso de etiquetas e instrucciones en la elaboración de documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br> <center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center> <br> Es muy importante saber ubicar los gráficos y combinar de bien los colores para brindar una buena imagen <b><i><font color="red">:)</font></i></b>.<br><br> Una página WEB es muy importante, pues provee a nuestro trabajo una ventana al mundo.<br> <br><center> <table width=80% align=center border=3> <tr><th colspan=3>Directorio Telefónico</th></tr> <tr align=center> <td width=40% bgcolor="#C0C0C0"> Nombre </td> <td width=30% bgcolor="#C0C0C0"> Telfono </td> <td width=30% bgcolor="#C0C0C0"> E-Mail </td> </tr> <tr> <td>
José Rodríguez </td> <td> 223454 </td> <td>jose@prueba.com.bo</td> </tr> <tr> <td> Carolina Nuñez </td> <td> 453444 </td> <td>carolina@prueba.com.bo</td> </tr> </table> <br></center> </body> </html> Grabe este archivo con el nombre pag2.html sobre escribiendo el archivo anterior. Consejo: Puede usar tablas sin borde (usando BORDER=0 en la sentencia <table>) para ubicar grficos y texto de forma elegante.
Frames
Ofrece la posibilidad de utilizar marcos y varias pginas en una sola. Etiqueta <frameset> </frameset> Define la disposicin grfica de los marcos en la pantalla. Atributos: Rows: Determina el alto de las filas. Cols Determina el ancho de las columnas. Framespacing Espacio entre frames.
Etiqueta <frame></frame> Define un solo marco que forma parte del conjunto de marcos definidos en <frameset>.Sus atributos son: Marginheight: Determina que tanto espacio vertical (en pixeles) existe entre el objeto ubicado en un marco, y los extremos superior o ingerior de este. MarginWidth: Determina que tanto espacio horizontal (en pixeles) existe entre el objeto ubicado en un marco, y los extremos izquierdo o derecho de ste. Name Ofrece la capacidad de Dar nombres a las ventanas FRAME, de modo que puedan ser utilizados como destino de los hipervnculos. Noresize indica que el usuario no puede redimensionar el marco. Scrolling Habilita una barra de desplazamiento para un marco. Existen tres parmetros posibles SCROLLING=YES, SCROLLING=NO y SCROLLING=AUTO que habilita la barra solo si es necesario SRC indica que exhiba en un marco el contenido de un documento HTML. Etiqueta <noframes></noframes> Etiqueta que es usada para desplegar un texto o una pgina alternativa cuando un navegador no es capaz de desplegar los marcos. Veamos un ejemplo que resume todo esto. Debemos crear un nuevo archivo html, al cual llamaremos: frames.html. Ejemplo: <html> <head> <title>Página de frames</title> </head> <frameset COLS="20%,*" frameborder=0 framespacing=0 border=0> <frame name="izquierda" src="pag4.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="no"> <frameset ROWS="30%,*" frameborder=0 framespacing=0 border=0> <frame name="superior" src="pag2.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="no"> <frame name="principal" src="pag3.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="no">
</frameset> </frameset> <noframes> <center> Su navegador no puede desplegar frames. </center> </noframes> </html>
Una vez que cargue la nueva pgina frames.html podr ver los marcos que se crearon. Notar que los enlaces del marco derecho aparecen en el mismo marco, lo que debemos hacer es redireccionar estos enlaces usando el atributo target en el ejemplo pag4.html que quedara de esta manera: Ejemplo: <html> <head> <title>Página de enlaces</title> </head> <body bgcolor="#C0D9D9" text="#000000" background="fondo.gif" link="#000080" vlink="magenta" alink="black"> <center><h1> <a name="tope"></a> Enlaces</h1><br> <img src="foto.jpg" alt="Foto de Claudia"><br><br> <a href="index.html" target="principal">Página Principal O Página Uno</a><br> <a href="pag2.html" target="principal">Página Dos</a><br> <a href="pag3.html" target="principal">Página Tres</a><br> <br> <a href="http://www.forinsur.com/" target="principal">Forinsur Centro de Formacin en Internet</a><br> <a href="ftp://ftp.microsoft.com/pub/" target="principal">FTP de Microsoft</a><br> <a href="mailto:fpo@forinsur.com">Envía comentarios sobre este manual por E-Mail</a><br> <br><br> <a href="#tope">De vuelta arriba</a> </center>
</body> </html> Guarde este archivo con el nombre pag4.html y haga una actualizacin de la pgina en su navegador para notar los cambios.
Marcas no visibles
Comentarios Se llama comentario en el mbito de HTML las notas que el autor o autores ponen en el cdigo para facilitar su entendimiento. Estos comentarios no son mostrados por el navegador y por tanto slo sern visibles al leer el cdigo HTML de la pgina web. En general es recomendable ir insertando comentarios al crear una pgina para marcar determinadas partes y as encontrarlas ms fcilmente. Algunos usos que suelen darse a los comentarios son: Notas para recordar detalles del cdigo la prxima vez que vayamos a cambiarlo, como por ejemplo para indicar por qu hemos usado una etiqueta y no otra, por qu hemos usado una lista numerada y no una no numerada, etc. Este tipo de comentarios son muy usados cuando las pginas son complejas. Apuntar que queda por hacer en una determinada seccin o como es conveniente cambiarla. O bien para indicar el comienzo o fin de una determinada seccin de la pgina. Para identificar fcilmente partes importantes del cdigo o aquellas que cambian ms a menudo. Usos particulares de cada webmaster. De hecho los comentarios pueden usarse para cualquier cosa y cada programador de pginas web tiene su propio modo de usarlos.
Para crear un comentario no se usa una etiqueta, aunque es una estructura parecida. En primer lugar ponemos una cadena que indica el comienzo del comentario:  , dos guiones y el smbolo mayor que. La estructura de un comentario es por tanto:  Suele ser recomendable dejar un espacio entre ambas cadenas y el texto anterior y posterior, tal y como acabamos de mostrar. Veamos algunos ejemplos prcticos de comentarios:    Podemos ver un ejemplo de un comentario junto con otro cdigo HTML y el resultado de visualizar ese cdigo con el navegador. Como observamos el navegador ignora los contenidos del interior de los comentarios. Al mostrar la pgina los navegadores actan como si los comentarios no existieran. Como vemos Explorer permite comentarios multilnea y con etiquetas dentro.
Para terminar slo queda hacer una aclaracin. Tal y como hemos dicho todo el texto entre los smbolos "" es un comentario sea lo que sea y tenga el nmero de lneas que tenga. Sin embargo el estndar de HTML recomienda que los comentarios se limiten a una sola lnea, y si debe ocupar varias necesariamente se aconseja incluir los smbolos de comentario en cada una de ellas. Datos sobre la pgina La marca URL base

Dreamweaver M1 UD1 Internet y WWW

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Dreamweaver M1 UD1 Internet y WWW

Cargado por

Copyright:

Formatos disponibles

Forinsur S.L.

Centro de Formacin | Manual de Usuario

MDULO I Programacin en HTML mediante Dreamweaver Internet y WWW

Una pgina web bsica

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Apariencia del texto

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Funcionalidad del texto

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

<SPAN>esto que nos da:

<SPAN>y este es el siguiente, tambin creado con SPAN</SPAN>

Las listas ordenadas: 1. Van precedidas por nmeros

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tcnico Especialista en Diseo, Animacin y Programacin Web

Forinsur S.L. Centro de Formacin | Manual de Usuario

También podría gustarte