Tutorial HTML

1. INTRODUCCION 1.1.
Antes de empezar
Para escribir las lineas e instrucciones de un programa HTML vas a necesitas un editor de textos, en principio te sirve cualquiera, hasta el propio bloc de notas de Windows, luego basta con que lo guardes con la extensin html o htm; a partir de ese momento ya ser reconocido como pgina web por el explorador y por supuesto por los navegadores de internet. Pero hacerlo asi, puede suponer que tengas que realizar un enorme esfuerzo tanto en el aprendizaje de HTML, como en el tiempo dedicado a construir tus pginas web, y hoy por hoy, tal dedicacin ya no es necesaria. Existen una serie de editores especializados en este lenguaje que realizan la mayor parte de las acciones mediante mens y botones sin tener que escribirlas en cdigo HTML, de eso ya se encarga el propio editor. El mismo windows 98 viene con uno de estos editores de los que te hablo, se trata de FrontPage Express, segn parece es una versin reducida de Frontpage que es uno de los mejores editores que existen para este tipo de programacin. Practicamente solo tienes que escribir el texto y poco ms, pues el resto ( establecer enlaces a paginas o archivos, insertar colores de fondo o imagenes, insertar tablas, listas, propiedades de fuente y texto, etc..) se establece mediante mens existentes en la barra de herramientas, con lo cual te ahorras tener que aprender como utilizar todo eso en cdigo HTML. Este tipo de editores se llaman "WYSIWYG", que mas o menos quiere significar que lo que se ve es lo que se obtiene, por lo que mientras trabajas estas viendo la apariencia real del formato y diseo de la pgina y no el cdigo; para cuando tengas que insertar fragmentos en cdigo HTML para implementar acciones no previstas por el editor, tendrs una opcin para ver la pgina en cdigo fuente (HTML) y all podrs escribirlas. Para que lo entiendas, si estas utilizando Intenet Explorer, abre en la barra de herramientas el men "ver" y dentro haz click sobre "cdigo fuente", luego sigue leyendo en este punto. Que te ha parecido?, pues todo lo que hayas visto entre las expresiones <HTML>...</HTML> es la programacin de esta pgina, parece complicado, pero en realidad con este tipo de editores tu estars escribiendo el texto tal y como lo ves ahora, como en cualquier editor normal, todo lo dems se insertar mediante mens. Al margen de que con este manual vas a conocer bien la programacin en HTML, considero imprescindible, por las razones que ya te he expuesto, que te consigas uno de estos editores. Entre los grandes del tema destacan el FrontPage y Macromedia Dreamweaver, pero tambien hay un buen nmero del tipo shareware que podrs encontrar en la mayoria de webs que ofrezcan recursos gratuitos.
1.2.Empezando
HTML son las siglas de "Hyper Text Markup Language", es un lenguaje de programacin que permite construir documentos para que puedan ser visualizados por los navegadores de
Internet. Hasta la fecha se han producido diversos niveles de estandarizacin o revisiones del citado lenguaje; la ltima es la 3.0 y ser la utilizada en este manual. Solo a partir de Netscape 2.x y Explorer 3.x sern practicamente reconocidas todas las instrucciones que se citan, otros navegadores mas antiguos pueden no reconocer alguna de ellas. El lenguaje HTML consta de una serie de instrucciones que indican al navegador, la forma de representar los elementos del documento. Todas las instrucciones se designan mediante una palabra clave que es la que reconoce el navegador. A su vez cada una de estas instrucciones posee una serie de parmetros que la definen. Hay dos tipos principales de instrucciones: Abiertas y Cerradas. En las primeras, la palabra clave se pone unicamente al principio de la instruccin. En las segundas la palabra clave se pone al principio y al final. En ambos casos las palabras clave van encerradas entre los simbolos < y > y adems en la del final se incluye el signo / antes de la palabra. <HTML>..................</HTML> Esta es una instruccin cerrada, y la primera y fundamental para programar en este lenguaje. Todo, absolutamente todo lo que contiene el documento HTML, para que sea reconocido como tal por el navegador debe incluirse dentro de esta instruccin
1.3. Aprender rpido

Como ya te indique anteriormente, con este manual vas a tener suficiente para poder construir tu propia web, no obstante y para poder aplicar lo que vas a ir aprendiendo construiremos paso a paso una web muy sencilla a medida que vayamos conociendo cada una de las instrucciones y sus parmetros. Esta web de ejemplo estar incluida en unos cuadros de color amarillo. Quieres ir mas rapido?, no tienes paciencia para seguir el tutorial paso a paso. Hazte con uno de los editores que te he indicado ms arriba y sigue solamente los cuadros de ejemplo, limitate a usar el manual como recordatorio y para incluir las instrucciones que no tenga el editor en su men. Seguramente los nicos apartados de este manual a los que debers prestar mas atencin sern a los FRAMES y FORMULARIOS, para el resto no tendrs practicamente necesidad de conocer programacin HTML. Para editar la Web de ejemplo que vamos a construir, abr una carpeta en el directorio principal de tu disco duro, con el nombre que quieras, dentro iras guardando todas las pginas y archivos relacionados. Para empezar abrirs seis documentos en los que escribirs el cdigo que viene a continuacin, si es un editor especializado no escribas nada, miralo en cdigo HTML y vers que ya tiene escrito algo parecido: <HTML> <HEAD> </HEAD> <BODY>
</BODY> </HTML> Una vez incluido este cdigo guardalos con los siguientes nombres: index.htm, portada.htm, cabeza.htm, menu.htm, form.htm y tablero.htm. Tambin deberias incluir en este directorio, junto a los archivos anteriores, un archivo de imagen que utilizaremos en su corespondiente captulo. Ten en cuenta que solo hay dos formatos de imgenes que todos los navegadores modernos reconocen. Son las imgenes GIF y JPG, si no tienes puedes convertirlas con algn editor o visor de imagenes.
NOTA: No utilices acentos en los nombres de archivos y carpetas, causarn errores en el

navegador.
2. ESTRUCTURA DEL DOCUMENTO 2.1.cabecera

La instruccin <HEAD></HEAD> delimita la cabecera del documento. Dentro de ella pueden incluirse otras instrucciones importantes: La instruccin cerrada <TITLE> donde se incluir el titulo de la pgina web: <TITLE>Pagina de ejemplo</TITLE> Y la instruccin <META> que es abierta, sirve para indicar el contenido y las palabras clave de la web y es muy importante dado que la mayoria de los buscadores existentes en internet utilizan el contenido de esta instruccin para incluir la pgina en sus bases de datos. Esta instruccin cuenta entre otros con los parmetros name y content. Los parmetros pueden indicarse o no, sino se establecen el navegador entender que debe usar los designados por defecto. Si en una instruccin se incluyen parmetros estos deben colocarse junto a la palabra clave de inicio y antes del simbolo >. Los valores especficos de cada parmetro van encerrados entre comillas y detrs del signo =. <META name="Pagina de prueba" content="Pgina creada para aprender a construir un documento HTML que contendr todo lo que se aprenda en este tutorial"> El ejemplo anterior indica el nombre que le hemos dado a la pgina y contiene un breve resumen definiendo su contenido <META name="keywords" content="color texto listas tablas enlaces imagenes"> Este ejemplo indicar a los buscadores las palabras clave de la web (keywords), es decir sus contenidos, las cuales deben ir en el parmetro content separadas entre ellas por un espacio.
Antes de continuar, aadiremos lo aprendido a nuestra pagina index.htm: <HTML> <HEAD> <TITLE>Pagina de ejemplo</TITLE> <META name="Pagina de prueba" content="Pgina creada para aprender a construir un documento HTML que contendr todo lo que se aprenda en este tutorial"> <META name="keywords" content="color texto listas tablas enlaces imagenes"> </HEAD> <BODY> </BODY> </HTML>
NOTA: Siempre debes guardar la primera pgina de tu web con el nombre "index.htm",
pues los navegadores tienen establecido que la primera pagna a abrir de una web es la que tiene este nombre.
2.2.Cuerpo
Dentro de la instruccin cerrada <BODY> es donde va a ir todo el contenido que queramos que tenga nuestra pgina web. En primer lugar veamos los parmetros que tiene esta instruccin y para que sirven: background="nombre del fichero". Si queremos que el fondo del documento sea alguna imagen este es el parmetro que debe utilizarse, en el espacio entre comillas debe ir el nombre del fichero. Si no esta en el mismo directorio debe ir con la direccin. Ten en cuenta que si la imagen es pequea y no rellena todo el fondo del documento, se reproducir tantas veces como sea necesario para rellenarlo. Es como en los fondos del escritorio en windows. bgcolor="cdigo del color". Si no utilizaste el parmetro anterior para insertar algn archivo de fondo, con este podrs ponerle un color. Anque pongas un color no se ver si has utilizado el parmetro background con algn archivo. text="cdigo de color". Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro. link="cdigo de color". Indica el color de los textos que dan acceso a un hiperenlace. Por defecto es azul vlink="cdigo de color". Indica el color de los textos que dan acceso a un hiperenlace que ya hemos visitado con el navegador. Por defecto es prpura. alink="cdigo de color". Indica el color de los textos que dan acceso a un hiperenlace que est activo. Por defecto es rojo. Los codigos de color son nmeros hexadecimales compuestos por tres pares de cifras que indican la proporcin de los colores primarios: rojo, verde y azul. El cdigo se antecede del simbolo#. Asi los colores variarn desde" #000000" que es el negro hasta el "#FFFFFF" que es el blanco. Entre ellos, por citar alguno, tienes el rojo "#FF0000" o el azul "#0000FF".
El primer par de cifras indican la proporcin de color rojo, el segundo par de cifras la proporcin de color verde y las dos ltimas la proporcin de color azul. Cada par de cifras hexadecimales nos permite un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos los diferentes colores. De cualquier manera en tu editor de HTML podrs obtener el cdigo de color correspondiente escogiendo directamente el color desde una paleta. En HTML existe la posibilidad de incluir comentarios que no sern mostrados por el visor y son tiles para realizar anotaciones que nos indiquen lo que estamos haciendo en una determinada parte del documento. Esto puede resultar importante a medida que la pgina contenga ms cosas y tenga un cdigo muy extenso. Para incluir comentarios en la pgina Web se utiliza la instruccin :  Vamos a poner titulo, color de fondo amarillo (me gusta el amarillo), texto negro y un comentario a nuestra pgina portada.htm: <HTML> <HEAD> <TITLE>Portada</TITLE> </HEAD>  <BODY bgcolor"#FFFF00" text"#000000"> </BODY> </HTML>
3.TEXTO 3.1.Juego de caracteres

Este apartado puedes saltartelo si quieres, basta que sepas que todos los visores de pginas Web actuales soportan todos los caracteres grficos de la especificacin ISO 8859-1, que permiten escribir textos en la mayoria de los paises occidentales. Si tienes que insertar en tu web algn caracter fuera de lo normal, lee este apartado. Se han definido dos formas de representar caracteres especiales usando solamente el cdigo ASCII de 7 bits. Estos caracteres pueden ser representados por un cdigo nmerico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el simbolo & y terminan con el simbolo ;. A continuacin estn las principales entidades:
Carct Cdig Entida Carct Cdig Entida Carct Cdig Entida Carct Cdig Entida er o d er o d er o d er o d ! % ) ; ? ] { & 1/4 ! -% -) -- -; -? -] -&#12 -3; &#16 nbsp 0; " & * . < @ ^ | " -& -* -. -< -@ -^ -&#12 -4; &#16 iexcl 1; &#16 yen 5; &#16 copy 9; &#17 shy 3; &#17 plusm 7; &#18 micro 1; &#18 sup1 5; &#18 frac12 9; &#19 Aacut 3; e &#19 Aring 7; &#20 Eacut 1; e &#20 Iacute 5; &#20 Ntilde 9; &#21 Otilde 3; # ' + / = [ _ } (r) 3/4 # -' -+ -/ -= -[ -_ -&#12 -5; &#16 cent 2; $ ( : > \ ` $ -( -, -: -> -\ -` -&#12 -6; &#16 pound 3; &#16 sect 7; &#17 laquo 1; &#17 macr 5; &#17 sup3 9; &#18 middo 3; t &#18 raquo 7; &#19 iquest 1; &#19 Atilde 5; &#19 Ccedil 9; &#20 Euml 3; &#20 Iuml 7; &#21 Oacut 1; e &#21 times 5;
&#16 curren 4; &#16 uml 8; &#17 not 2; &#17 deg 6; (c)
&#16 brvbar 6; &#17 ordf 0; &#17 reg 4; &#17 sup2 8; &#18 para 2;
&#18 acute 0; &#18 cedil 4;
&#18 ordm 6; &#19 frac34 0; &#19 Acirc 4; &#19 AElin 8; g &#20 Ecirc 2; &#20 Icirc 6;
&#18 frac14 1/2 8; &#19 Agrav 2; e &#19 Auml 6; &#20 Egrav 0; e &#20 Igrave 4; &#20 Eth 8;
&#21 Ograv 0; e &#21 Ouml 4;
&#21 Ocirc 2;
&#21 Oslas 6; h &#22 Uuml 0; &#22 agrav 4; e &#22 auml 8; &#23 egrav 2; e &#23 igrave 6; &#24 eth 0;
&#21 Ugrav 7; e &#22 Yacut 1; e &#22 aacute 5; &#22 aring 9; &#23 eacute 3; &#23 iacute 7; &#24 ntilde 1; &#24 otilde 5; &#24 ugrav 9; e
&#21 Uacut 8; e &#22 Thorn 2; &#22 acirc 6;
&#21 Ucirc 9; &#22 szlig 3; &#22 atilde 7; &#23 ccedil 1; &#23 euml 5; &#23 iuml 9; &#24 oacute 3; &#24 divide 7; &#25 ucirc 1; &#25 yuml 5;
&#23 aeling 0; &#23 ecirc 4; &#23 icirc 8;
&#24 ograv 2; e &#24 ouml 6; &#25 uacute 0; &#25 thorn 4;
&#24 ocirc 4; &#24 oslash 8; &#25 uuml 2;
&#25 yacute 3;
Por lo tanto la palabra pgina la podramos escribir como: pgina página página
3.2. Espaciados y saltos de lnea

En HTML slo se reconoce un espacio entre palabra y palabra, el resto de los espacios sern ignorados por el visor.Asimismo tampoco se representan tabulaciones, retornos de carro, etc... Para ello existen unas instrucciones especficas que indican estos cdigos. La instruccin <PRE></PRE> obliga a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc. ...Para indicar un salto de lnea se utiliza <BR> y para un cambio de prrafo ( una lnea en blanco en medio ) se utiliza <P>. La instruccin <P> puede usarse tambin como cerrada <P></P> indicando de esta manera los atributos de un prrafo en concreto. Cuando se usa de esta manera tiene el parmetro align que indica al visor la forma de justificar el prrafo. Los valores posibles de este parmetro son left, right y center. SI PONEMOS SE VERA ASI
Esto es una frase <PRE>Esto es una

Esto<BR> es una<P> frase
Esto es una frase
frase</PRE> Esto es una

Esto es una frase
frase
<P align="right">prrafo justificado a laderecha </P> <P align="center">prrafo de texto centrado </P>
prrafo justificado a la derecha prrafo de texto centrado
La Instrucin <HR> muestra una lnea horizontal de tamao determinable. Utilizada sin ningn parmetro mostrara una lnea horizontal que ocupara todo el ancho de la pgina. Tiene los siguientes parmetros opcionales: align = "posicin". Alinea la lnea a la izquierda (left), a la derecha (right) o la centra (center). noshade. No muestra sombra, evitando el efecto en tres dimensiones. size = "nmero". Indica el grosor de la lnea de pixels. width = "nmero en tanto por ciento (%)". Indica el ancho de la lnea en tanto por ciento en funcin del ancho de ventana del visor. Tambin se puede especificar un nmero sin poner el simbolo de porcentaje, entonces indicara el ancho de la lnea en pixels. <HR align = "center" size="20" width="50%">
3.3. Cabeceras
En un documento de HTML se pueden indicar seis tipos de cabeceras. El texto que escribamos entre el inicio y el fin de cada instruccin ser el afectado por ella. Los textos marcados como cabeceras provocan automticamente un retorno de carro sin necesidad de incluir la instruccin <BR>: SI PONEMOS <H1>Texto de prueba</H1> <H2> Texto de prueba</H2> <H3> Texto de prueba</H3> <H4> Texto de prueba</H4> <H5> Texto de prueba</H5> <H6> Texto de prueba</H6> SE VERA ASI
Texto de prueba
Texto de prueba
Texto de prueba
Texto de prueba
Texto de prueba
Texto de prueba
Texto de Prueba
<H3>Texto de Prueba</H3>Esta es mi pgina. Esta es mi pgina.
NOTA: El uso de estas instrucciones puede ser til para poner el ttulo, pero puedes
prescindir de ellas, dado que ya podremos aumentar el tamao de letra de cualquier frase con los atributos de texto que veremos a continuacin.
3.4.Atributos de texto
Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias instrucciones. Algunas de ellas pueden ser no reconocidas por determinados visores de Internet: Atributo Negrita Cursiva Teletype Directiva <B></B> <I></I> <TT></TT> Ejemplo <B>Texto de prueba</B> <I> Texto de prueba</I> <TT> Texto deT prueba</TT> <U> Texto de prueba</U> <S> Texto de prueba</S> <BLINK> Texto de prueba</BLINK> <SUP> Texto de prueba</SUP> <SUB> Texto de prueba</SUB> <CENTER> Texto de prueba</CENTER> Resultado Texto de prueba Texto de prueba
Texto de prueba
Subrayado <U></U> Tachado Parpadeo <S></S> <BLINK></BLINK>
Texto de prueba Texto de prueba Texto de prueba

Texto de prueba
Superndice <SUP></SUP> Subndice Centrado <SUB></SUB> <CENTER></CENTER>
Texto de prueba
Texto de prueba
Por otro lado la instruccin <FONT></FONT> nos permite variar el tamao, el color y el tipo de letra de un texto determinado. Utiliza para ello los parmetros size, bgcolor y face. size = "valor". Da al texto un tamao en puntos determinado. color ="cdigo de color". Escribe el texto en el color cuyo cdigo se especifica. face ="nombre de font". Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que ve la pgina, se usar el tipo de fuente predeterminado del navegador.
<FONT size="2" color ="#FF0000" face="Arial">Texto de prueba</FONT> Existen otras instrucciones que realizan las mismas operaciones que las antes vistas en los atributos del texto, asi <STRONG></STRONG> es igual que <B></B>, <EM></EM> es igual que <I></I> y <STRIKE></STRIKE> es igual que <S></S>. Aadiremos algo de lo aprendido en nuestra pgina portada.htm: <HTML> <HEAD> <TITLE>Portada</TITLE> </HEAD>  <BODY bgcolor"#FFFF00" text"#000000"> <p align="center"><font size="7"><strong>ESCRIBIENDO</strong></font></p> <p align="left"><font size="3">Estamos empezando a escribir en esta pgina web para ver que es lo que sucede, de paso probamos los parmetros que hemos aprendido.</font></p> <p align="left"><font size="3"><em>Ahora probamos a escribir en cursiva</em></font><br> <font size="3" face="Arial">Ahora probamos a escribir con otro tipo de letra y de paso hemos hecho un salto de linea</font></p> </BODY> </HTML>
4. LISTAS
Existen tres tipos de listas: numeradas, sin numerar y de definicin.
4.1.Listas numeradas
Las listas numeradas representan los elementos de las lista numerando cada uno de ellos segn el lugar que ocupan. Para este tipo de lista se utiliza la instruccin <OL></OL>. Cada uno de los elementos debe ir precedido de la instruccin <LI>. La instruccin <OL> puede llevar los siguientes parmetros: start ="nmero". Indica qu nmero ser el primero de la lista. Si no se indica se entiende que empezar por el nmero 1. type ="tipo". Indica el tipo de numeracin utilizada. Si no se indica se entiende que ser una lista ordenada numricamente. Los tipos posibles son: l = Numricamente (1,2,3,4, ... , etc.) a = Letras minsculas (a,b,c,d, ..., etc.) A = Letras maysculas (A,B,C,D, ..., etc.) i = Nmeros romanos en minsculas (i,ii,iii,iv,v,..., etc.) I = Nmeros romanos en maysculas (I,II,III,IV,V, ..., etc.) SI PONEMOS <OL> <LI> Primero <LI> Segundo <LI> Tercero </OL> <OL type ="A"> <LI> Primero <LI> Segundo <LI> Tercero </OL> SE VER ASI 1. Primero 2. Segundo 3. Tercero
A. Primero B. Segundo C. Tercero
4.2.Listas sin numerar

Las listas sin numerar representan los elementos de la lista con una marca que antecede a cada uno de ellos. Se utiliza la instruccin <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La instruccin <UL> puede contener el parmetro type que indica la forma de la marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk (disco), circle (circulo)o square (cuadrado).
SI PONEMOS <UL type ="circle"> <LI> Primero <LI> Segundo <LI> Tercero </UL>
SE VER ASI

Primero Segundo Tercero
4.3.Listas de definicin
Las listas de definicin muestran los elementos tipo diccionario, o sea, trmino y definicin. Se utiliza para ellas la instruccin <DL></DL>. El elemento marcado como trmino se antecede de la instruccin <DT>, el marcado como definicin se antecede de la instruccin <DD>. SI PONEMOS SE VER ASI
<DL> <DT> PRIMERO PRIMERO <DD>El nmero uno El nmero uno <DT>SEGUNDO SEGUNDO <DD>El nmero dos El nmero dos <DT>TERCERO TERCERO <DD>El nmero tres El nmero tres </DL>
4.4.Apuntes finales sobre las listas.

Existen otros dos tipos de listas menos comunes. Las listas de men y las de directorio que se comportan igual que las listas sin numerar. La lista de men utiliza la instruccin <MENU></MENU> y los elementos se anteceden de <LI>. El resultado es una lista sin numerar ms compacta, con menos espacio interlineal. La lista de directorio utiliza la instruccin <DIR></DIR> y los elementos se anteceden de <LI>. Para seguir con nuestra intencin de construir una Web, vamos a poner una de las listas que hemos aprendido en el documento menu.htm: <HTML> <HEAD> <TITLE>Indice</TITLE> </HEAD> <BODY bgcolor"#000000"> <OL> <LI> Tablero <LI> Formulario <LI> Volver
</OL> </BODY> </HTML>
5.TABLAS
Las tablas nos permiten representar cualquier elemento de nuestra pgina (texto, listas, imgenes, etc.) en diferentes filas y columnas separadas entre s. Es una herramienta muy til para ordenar los contenidos. Se define mediante la instruccin <TABLE></TABLE>. Los parmetros opcionales de esta directiva son: border ="nmero". Indica el ancho del borde de la tabla en puntos. cellspacing ="nmero". Indica el espacio en puntos que separa las celdas que estn dentro de la tabla. cellpadding ="nmero". Indica el espacio en puntos que separa el borde de cada celda y el contenido de sta. width ="nmero o %". Indica la anchura de la tabla en puntos o en porcentaje en funcin del ancho de la ventana del visor. Si no se indica este parmetro, el ancho se adecuar al tamao de los contenidos de las celdas. height ="nmero o %". Indica el alto de la tabla en puntos o en porcentaje en funcin del alto de la ventana del visor. Si no se indica este parmetro, la altura se adecuar a la altura de los contenidos de las celdas. bgcolor = "cdigo de color". Especifica el color de fondo de toda la tabla. Para definir las celdas que componen la tabla se utilizan las instrucciones <TD> y <TH>. <TD> indica una celda normal, y <TH> indica una celda de cabecera, el contenido ser resaltado en negrita y en un tamao ligeramente superior al normal. Los parmetros opcionales de ambas instrucciones son: align ="valor". Indica como se debe alinear el contenido de la celda. Sus valores son: a la izquierda (left), a la derecha (right), centrado (center) o justificado (justify). valign ="valor". Indica la alineacin vertical del contenido de la celda. Sus valores son: en la parte superior (top), en la inferior (bottom), o en el centro (middle). rowspan = "nmero". Indica el nmero de filas que ocupar la celda. Por defecto ocupa una sola fila. colspan =" nmero". Indica el nmero de columnas que ocupar la celda. Por defecto ocupa una sola columna. width ="nmero o %". Indica la anchura de la columna en puntos o en porcentaje en funcin del ancho de la ventana del visor. Si no se indica este parmetro, el ancho se adecuar al tamao de los contenidos. Este parmetro slo funciona en los navegadores modernos. bgcolor = "cdigo de color". Especifica el color de fondo de la celda.
Para indicar que acaba una fila de celdas se utiliza la instruccin <TR>. A continuacin mostraremos un ejemplo de una tabla que contiene solo texto. Como se indic anteriormente el contenido de las celdas puede ser cualquier elemento de HTML, un texto, una imagen, un hiperenlace, una lista, etc.
EJEMPLO <TABLE border ="4" cellspacing ="4" cellpadding ="4" width ="80%"> <TH align ="center">Primero <TH align ="center" colspan ="2">Segundo <TR> <TD align ="left">uno <TD align ="left">dos <TD align ="left">tres <TR> <TD align ="left">cuatro <TD align ="left">cinco <TD align ="left">seis </TABLE> SE VER ASI Primero uno cuatro dos cinco Segundo tres seis
Las instrucciones <TD> y <TH> son cerradas segn el estndar de HTML, es decir, que un elemento de la tabla <TD> debera cerrarse con un </TD>, sin embargo los visores asumen que un elemento de la tabla, queda automticamente "cerrado" cuando se "abre" el siguiente.
Continuando con nuestra web abriremos el archivo tablero.htm e insertaremos la tabla anterior: <HTML> <HEAD> <TITLE>Tablero</TITLE> </HEAD>  <BODY bgcolor"#FFFF00" text"#000000"> <TABLE border ="4" cellspacing ="4" cellpadding ="4" width ="80%"> <TH align ="center">Primero <TH align ="center" colspan ="2">Segundo <TR> <TD align ="left">uno <TD align ="left">dos <TD align ="left">tres <TR> <TD align ="left">cuatro <TD align ="left">cinco <TD align ="left">seis </TABLE> </BODY> </HTML>
6. IMGENES 6.1.Insertar imgenes

Hasta ahora hemos escrito texto en nuestra Web. Vamos a ver ahora como insertar imgenes. Para incluir una imagen en nuestra pgina Web utilizaremos la instruccin <IMG>. Recuerda que actualmente los navegadoes solo reconocen dos formatos: GIF y JPG. Cualquier otro tipo de fichero grfico o de imagen (BMP, PC , CDR ,etc.) no ser mostrado por el visor, a no ser que disponga de un programa externo que permita su visualizacin. La instruccin <IMG> tiene varios parmetros: src = "imagen". Indica el nombre del fichero grfico a mostrar. alt = "texto". Mostrar el texto indicado en el caso de que el navegador utilizado para ver la pgina no sea capaz de visualizar la imagen. lowscr = "imagen". Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la pgina. Este parmetro no es reconocido por la totalidad de los navegadores, as que en la mayora de los casos ser ignorado mostrndose slo la primera imagen. Netscape muestra la imagen indicada por lowscr en primer lugar, y posteriormente la indicada por src. Si las imgenes son iguales pero tienen distinta resolucin se conseguir un efecto tipo "Fade". Si las imgenes son de distinto tamao la imagen indicada en src se redimensionar al tamao indicado por la imagen referenciada en lowscr. align ="valor". Indica cmo se alinear el texto que siga a la imagen. Los valores son:(top) alinea el texto con la parte superior de la imagen, (middle) con la parte central y (bottom) con la parte inferior. border ="nmero". Indica el tamao del borde de la imagen. A toda imagen se le asigna un borde que ser visible cuando la imagen forma parte de un hiperenlace. height = "nmero o %". Indica el alto de la imagen en puntos o porcentaje. Se usa para variar el tamao de la imagen original. width ="nmero o %". Indica el ancho de la imagen en puntos o porcentaje. Se usa para variar el tamao de la imagen original. hspace ="nmero". Indica el nmero de espacios horizontales, en puntos, que separarn la imagen del texto que la siga y la anteceda. vspace ="nmero". Indica el nmero de puntos verticales que separarn la imagen del texto que la siga y la anteceda. ismap/usemap. Indica que la imagen es un MAPA. Veremos estos parmetros en el siguiente apartado.
SI PONEMOS
SE VERA AS
Te gusta<IMG src ="imagen.jpg" alt="Lastima, no puedes verla" height="120" width="120" align="middle" hspace="20">Mi imagen Te gusta imagen Si el visor no pudiese visualizar el grfico....... Mi
Te gusta Lastima, no puedes verla Mi imagen
La imagen a mostrar puede encontrarse en el mismo lugar (URL) que la pgina Web. Si no fuese as, el nombre de la imagen ha de contener la URL donde se encuentre la imagen.Ejemplo: <IMG src="http://www.unsitio.com/imagen.gif"> Para probar lo aprendido insertaremos la imagen en la pgina portada.htm. Alli donde en el ejemplo se consigne imagen.jpg debers escribir el nombre de archivo de tu imagen con su extensin gif o jpg: <HTML> <HEAD> <TITLE>Portada</TITLE> </HEAD>  <BODY bgcolor"#FFFF00" text"#000000"> <p align="center"><font size="7"><strong>ESCRIBIENDO</strong></font></p> <p align="left"><font size="3">Estamos empezando a escribir en esta pgina web para ver que es lo que sucede, de paso probamos los parmetros que hemos aprendido.</font></p> <p align="left"><font size="3"><em>Ahora probamos a escribir en cursiva</em></font><br> <font size="3" face="Arial">Ahora probamos a escribir con otro tipo de letra y de paso hemos hecho un salto de linea</font></p> <p align="center">Te gusta<IMG src ="imagen.jpg" alt="Lastima, no puedes verla" height="120" width="120" align="middle" hspace="20">Mi imagen</p> </BODY> </HTML>
7. HIPERENLACES
Una de las grandes caractersticas de una pgina Web es que se pueden insertas hiperenlaces. Un hiperenlace es un elemento que permite el acceso a otro recurso, pgina Web o archivo. Para incluirlos se utiliza la instruccin <A></A>. El texto o imagen que se encuentre dentro de los lmites de la instruccin ser sensible, esto quiere decir que si pulsamos con el ratn sobre l, se realzar la funcin de hiperenlace indicada por la instruccin <A></A>. Si el hiperenlace est indicado por un texto, ste aparecer subrayado y en distinto color, si se trata de una imagen, sta aparecer con un borde rodendola. Esta directiva tiene el parmetro href que indica el lugar a donde nos llevar el hiperenlace si lo pulsamos. SI PONEMOS <A href="portada.htm" target="_blank"> Pulsa aqu <A href= "portada.htm"target="_blank"> <IMG src="imagen.jpg" width="120" height="90"></A> SE VER AS Pulsa aqu
Si situamos el ratn encima de la frase o imagen y pulsamos, el navegador acceder a la pgina Web indicada por el parmetro href, es decir, acceder a la pgina portada.htm. Compruebalo si quieres. Te falta por conocer el parmetro target que aprenders al final de este captulo. Un hiperenlace tambin puede llevarnos a una zona de nuestra pgina. Para ello debemos marcar en nuestra pgina las diferentes secciones en las que se divide. Lo haremos con el parmetro name. <A name="seccin1"></A> Esta instruccin marca el inicio de una seccin dentro de nuestra pgina. La seccin se llamar seccin1. Para hacer un enlace a esta seccin dentro de nuestra pgina lo haramos de la siguiente forma: <A href="#seccin1">Primera Parte</A> Un hiperenlace puede hacerse a cualquier tipo de fichero. Hemos visto cmo hacer enlaces a pginas Web o secciones dentro de una pgina Web, pero podramos hacer un enlace a un grupo de noticias, a una direccin de correo o a un fichero cualquiera: <A href="news://news.actualidad.es/">Noticias de actualidad</A> <A href="mailto:nombre@ext">Envame tus sugerencias</A> <A href="archivo.zip"> Pulsa aqu para descargar este archivo </A>
El segundo y tercer ejemplo resultan muy interesantes, pues en un caso puedes hacer que te escriban a tu direccin de correo electrnico y con el otro puedes permitir a tus visitantes que descargen ficheros a su ordenador pues el navegador intentar ejecutar el fichero, y si no puede hacerlo, como sera el caso de un fichero comprimido, preguntar al visitante si desea grabarlo en su ordenador. Si estamos usando frames, debemos tener en cuenta en que ventana queremos que se muestre la nueva pgina enlazada. Por defecto se mostrar en la ventana donde se encuentre el enlace. Para poder escoger otra ventana debe aadirse un nuevo parmetro a la instruccin <A href= > </A>. Este parmetro se llama target y puede tener los siguientes valores : target = "nombre_ventana" Muestra el hiperenlace en la ventana cuyo nombre se indica. target = "_blank" Abre una nueva copia del visor y muestra el hiperenlace en ella. (Si usamos Netscape esto provoca que tengamos funcionando dos copias del programa). target = "_self" Se muestra el hiperenlace en la subventana activa. target = "_parent" El hiperenlace se muestra en el <FRAMESET> definido anteriormente al actual. Si no hay ninguno se muestra a pantalla completa suprimiendo todas las subventanas de la pantalla. target = "_top" Suprime todas las subventanas de la pantalla y muestra el hiperenlace a pantalla completa. Ya has visto un ejemplo ms arriba, cuando hemos hecho abrir una ventana para ver la pgina portada.htm. Vamos a abrir nuestra pgina menu.htm e insertaremos enlaces en cada uno de los elementos de la lista; Uno en el primer elemento de la lista para que nos abra la pgina tablero htm, otro en el segundo elemento que abrir la pgina form.htm y el tercero para que nos permita volver a la portada. Recordemos que nuestra web se iniciar con frames y por lo tanto vamos a hacer que cuando se abran las pginas lo hagan en la subventana inferior derecha, a la que pusimos el nombre de "portada": <HTML> <HEAD> <TITLE>Indice</TITLE> </HEAD>  <BODY bgcolor"#0000FF" text"#000000"> <OL> <LI> <A href="tablero.htm" target="portada"></A>Tablero <LI><A href="form.htm" target="portada"></A>Formulario <LI><A href="portada.htm" target="portada"></A>Volver </OL> </BODY> </HTML>
Ejercicio de Prctica
<HTML> <HEAD> <TITLE>Portada</TITLE> </HEAD>  <BODY bgcolor"#C0C0C0" text"#000000"> <FORM action = "mailto: tucorreo@ext.es" method =" post" > Tu Nombre:<INPUT type = "text" name = "nombre" size = "30" > Tu Contrasea: <INPUT type ="password" name ="clave" size ="8" > <P> Archivos a Enviar: <INPUT type = "checkbox" name = "archivo" value = "imagen" > Imagen jpg <INPUT type = "checkbox" name = "archivo" value ="fichero" > Archivo zip <P> Tu Edad : <INPUT type = "radio" name = "edad" value = "-20" > Menos de 20 aos <INPUT type = "radio" name = "edad" value = "+20" > Mas de 20 aos <P> <INPUT type ="hidden" name ="lugar" value = "pagina personal" > Como encontraste mi pgina : <SELECT name = "donde" > <OPTION>De casualidad <OPTION>Por un buscador <OPTION>Me la comentaron </SELECT> <P> Tus Comentarios: <BR> <TEXTAREA name ="comentario" rows ="5" cols ="40" wrap ="virtual" ></TEXTAREA> <P> <INPUT type = "reset" value = "Borrar" > </FORM> </BODY> </HTML>

Tutorial HTML

Cargado por

Información del documento

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

Tutorial HTML

Cargado por

Copyright:

Formatos disponibles

1. INTRODUCCION 1.1.

1.3. Aprender rpido

NOTA: No utilices acentos en los nombres de archivos y carpetas, causarn errores en el

2. ESTRUCTURA DEL DOCUMENTO 2.1.cabecera

3.TEXTO 3.1.Juego de caracteres

&#16 curren 4; &#16 uml 8; &#17 not 2; &#17 deg 6; (c)

&#18 acute 0; &#18 cedil 4;

&#21 Ograv 0; e &#21 Ouml 4;

&#21 Uacut 8; e &#22 Thorn 2; &#22 acirc 6;

&#23 aeling 0; &#23 ecirc 4; &#23 icirc 8;

&#24 ograv 2; e &#24 ouml 6; &#25 uacute 0; &#25 thorn 4;

&#24 ocirc 4; &#24 oslash 8; &#25 uuml 2;

3.2. Espaciados y saltos de lnea

Esto es una frase <PRE>Esto es una

Esto es una frase

frase</PRE> Esto es una

prrafo justificado a la derecha prrafo de texto centrado

Subrayado <U></U> Tachado Parpadeo <S></S> <BLINK></BLINK>

Texto de prueba Texto de prueba Texto de prueba

Superndice <SUP></SUP> Subndice Centrado <SUB></SUB> <CENTER></CENTER>

A. Primero B. Segundo C. Tercero

4.2.Listas sin numerar

Primero Segundo Tercero

4.4.Apuntes finales sobre las listas.

</OL> </BODY> </HTML>

6. IMGENES 6.1.Insertar imgenes

Te gusta Lastima, no puedes verla Mi imagen

También podría gustarte