Introducción Al HTML

Introduccin al HTML Qu es HTML? HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".
HTML es el lenguaje que te permite describir y dar forma a ts pginas Web. Publica tus propias pginas con fotos, listas, tablas, etc. Obtn informacin de los visitantes de tu sitio. Disea los formularios que te permitirn contactar tus futuros clientes. Crea un sitio para vender ts productos o servicios. Incluye video clips, msica, sonidos, y otras aplicaciones que darn vida a ts pginas Web Qu conocimientos previos debes poseer? Para estudiar HTML no se requiere de conocimientos previos en programacin. Es muy simple de aprender ya que no es un lenguaje de programacin sino que es un lenguaje de marcas. Los archivos HTML Los archivos HTML deben tener una extensin htm o html (ej. misitio.htm o misitio.html). Para crear un archivo HTML solo hace falta un editor de texto. Un archivo HTML est compuesto por etiquetas. Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Google Chrome, Opera, Safary, etc.) como mostrar la pgina Web.
Vamos a hacer nuestro primer sitio! Si ests usando Windows, Si usas Mac, abre "Simpletext". Ejemplo abre el "Block de Notas".
<html> <head> <title>Mi primera pgina Web</title> </head> <body> Hola a todos. </body> </html>
Resultado Hola a todos.
Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML).
Abre el navegador Internet(Internet Explorer, Firefox, Chrome, etc.). Selecciona "File" y luego "Open". Se abrir una ventana, selecciona "Browse" y ubica el archivo que acabas de guardar -"pagina1.html"- elgelo y presiona "Open". Ahora t ves la direccin, por ejemplo "C:\My Documents\pagina1.html". Presiona "OK" y el navegador mostrar la pgina recin creada.
Expliquemos el ejemplo <html> --> Indica al navegador que abre un archivo HTML. <head> --> Apertura de la cabecera del documento. Seccin que no se muestra en la pantalla. <title>Mi primera pgina Web</title> --> Ttulo de la pgina. </head> --> Cierre de la cabecera del documento. <body> --> Apertura del cuerpo del documento. Esta seccin aparece en la pantalla. Hola a todos. --> Texto que va a ser mostrado por el navegador. </body> --> Cierre del cuerpo del documento. </html> --> Cierre del archivo HTML La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el cdigo HTML de la pgina. Luego vemos la etiqueta <head>. Lo que sigue a continuacin hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aqu colocamos informacin tal como el ttulo de la pgina( <title>Mi primera pgina Web</title>), palabras claves para los motores de bsqueda, una descripcin de la pgina y otros datos del documento. Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta seccin es el que veremos en pantalla, como por ejemplo, "Hola a todos.". Nota: observa que todas las etiquetas de cierre se diferencian de las de apertura por llevar "/"antes del nombre. Elementos y etiquetas de HTML Las etiquetas HTML son las encargadas de dar forma a nuestro sitio. Los elementos Los elementos son declaraciones para visualizar o dar forma a una pgina Web. Las etiquetas Las etiquetas (en ingls: tags) son marcas insertadas en un documento HTML para proporcionar informacin sobre una unidad o contenido. Reglas bsicas
Las etiquetas estn encerradas entre los signos "<" y ">". Generalmente vienen en pares <p> y <p>. La primera es de apertura y la segunda de cierre. El texto que se encuentra entre dos etiquetas es el contenido del elemento. Las etiquetas no son sensibles a las maysculas y minsculas, o sea <b> es lo mismo que <B>. Etiquetas de HTML Veamos un ejemplo. <html> <head> <title>Una pgina Web</title> </head> <body> Hola a todos. <b>Este texto es en negrita</b> </body> </html> Esta es una etiqueta HTML: <b>Este texto es en negrita.</b> El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en negrita). El contenido de dicho elemento es: Este texto es en negrita. El fin del elemento HTML es con la etiqueta de cierre </b>. Otro elemento HTML en el ejemplo es: <body> Hola a todos. <b>Este texto es en negrita</b> </body> EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del documento). El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita</b>. El fin del elemento HTML es con la etiqueta de cierre </body>. Qu son los atributos de las etiquetas? Muchas etiquetas llevan atributos. Los mismos proveen de mayor informacin a los elementos HTML.
Los atributos siempre van con la estructura: nombre="valor". Los atributos siempre van en la etiqueta de apertura. Los valores siempre hay que ponerlos entre comillas.
Un ejemplo de los atributos sera: Ejemplo Cdigo Resultado <body bgcolor="#FFFF00"> Hola a todos. Este texto es en Hola a todos. <b>Este texto es en negrita</b> negrita </body> En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el valor"#FFFF00"(representa el color amarillo en hexadecimal). Esto quiere decir que el color de fondo de la pgina ser amarillo. Un consejo con respecto al uso de minsculas. Si bien HTML acepta tanto etiquetas en mayscula <B> como en minscula <b>, el World Wide Web Consortium (W3C) recomienda el uso de minsculas. Adems XHTML (la siguiente versin de HTML) acepta solo minsculas. Es por eso que recomendamos acostumbrarse a usar minsculas cuando escribas tus cdigos HTML. Etiquetas bsicas de HTML Las etiquetas ms simples y de uso ms comn en HTML. Etiquetas Bsicas Headings Nos definen el tamao de un ttulo o cabecera. <h1> nos d el tipo de letra ms grande. <h6> nos d el tipo de letra ms pequeo. HTML agrega automaticamente un espacio antes y despus de cada ttulo. <h1> al ser usado como ttulo de una pgina Web, es de suma importancia ya que es uno de los parmetros que Google y dems buscadores tiene en cuenta, a la hora de indexar un sitio web. Ejemplo Cdigo <html> <head> <title>Headings</title> </head> <body> <h1>Heading <h2>Heading Resultado
Heading 1 1</h1> Heading 2 2</h2>
<h3>Heading <h4>Heading <h5>Heading <h6>Heading </body> </html>
3</h3> Heading 3 4</h4> 5</h5> Heading 4 6</h6> Heading 5 Heading 6
Prrafos Los prrafos se definen con la etiqueta <p>. Ejemplo Cdigo <html> <head> <title>Prrafos</title> </head> <body> <p>Este <p>Y </body> </html> Resultado Este es el primer prrafo. Y este es el segundo prrafo.
es este es
el el
primer segundo
prrafo.</p> prrafo. </p>
Comentarios La etiqueta  se utiliza para insertar un comentario dentro del cdigo que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el cdigo y son de gran ayuda en el momento que necesitemos editarlo.  * Nota que el signo de exclamacin se coloca solo al principio del cdigo. Salto de lnea El salto de lnea est definido con la etiqueta <br>. Es utilizado cuando queremos cortar una lnea sin necesidad de terminar con el prrafo. La etiqueta <br> obliga a saltar de lnea dondequiera que la ubiquemos. Ejemplo Cdigo Esto es <br> un salto de l<br>nea. Resultado Esto un nea.
salto
Trazar una lnea La etiqueta <hr> nos permite trazar una lnea horizontal como las que separan las distintas secciones de este tutorial. La etiqueta <hr> no tiene cierre. Ejemplo Cdigo <hr> Resultado
Tabla con las etiquetas bsicas Etiqu etas Descripcin Ej. Ttulo de tamao h1 a Ttulo de tamao h2 Ttulo de tamao h3 Ttulo de tamao h4 tamao Ttulo de tamao h5
<h1> a Define el <html> <h6> tamao de los <head> <title><h1> encabezados <h6></title> </head> <body> <h1>Ttulo de h1</h1> <h2>Ttulo de h2</h2> <h3>Ttulo de h3</h3> <h4>Ttulo de h4</h4> <h5>Ttulo de h5</h5> <h6>Ttulo de h6</h6> </body> </html> <p> Define prrafo
tamao Ttulo de tamao h6 tamao tamao tamao tamao
un <html> <head> <title><p>...</p></title > </head>
<body> <p>Este texto es prrafo.Este texto es un
Este texto es un prrafo.Este texto es un prrafo.Este texto es un prrafo.Este texto es un prrafo.Este texto es un prrafo.Este texto es un prrafo.Este texto es un prrafo.Este texto es un un prrafo.
prrafo.Este texto prrafo.Este texto prrafo.Este texto prrafo.Este texto prrafo.Este texto prrafo.Este texto prrafo.</p> </body> </html>  Define comentario
es es es es es es
un un un un un un
un <html> <head> <title></title> </head> <body>  <p>Los comentarios no se visualizan</p>  </body> </html>
Los comentarios visualizan
no
se
<br>
Define un salto <html> de lnea <head> <title>br lnea</title> </head> <body>
Salto
El salto lnea donde de rrir coloquemos .
de ocu lo
El salto de<br> lnea ocu<br>rrir donde lo <br>coloquemos<br>. </body> </html> <hr> Define una <html> lnea horizontal <head> <title><hr></title> </head> <body> Las lneas horizontales son muy tiles para separar secciones. Seccin 1 Seccin 2 Seccin 3
<p>Las lneas horizontales son muy tiles para separar secciones.</p> Seccin 1 <hr> Seccin 2 <hr> Seccin 3 </body> </html> Formato de texto con HTML Elige como decorar y visualzar los textos de tu sitio. Formato bsico del texto HTML nos permite definir el formato de visualizacin del texto en la pantalla. Muy til para cuando queramos resaltar o enfatizar un texto en especial. Tambin muy usado para subrayar o escribir subndices o superndices. Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos Para ello utilizamos las siguientes etiquetas: Ejemplo Cdigo <b>Texto <big>Texto <em>Texto <i>Texto <small>Texto <strong>Texto <sub>Texto <sup>Texto <ins>Texto <del>Texto <tt>Texto teletipo</tt> en en Resultado
negrita</b> Texto normal Texto grande</big> Texto normal Texto enfatizado</em> Texto normal Texto itlica</i> Texto normal Texto pequeo</small> Texto normal Texto fuerte</strong> Texto normal Texto subndice</sub> Texto normal Texto superndice</sup> Texto normal Texto subrayado</ins> Texto normal Texto tachado</del> Texto normal Texto Texto normal Texto teletipo
Etiquetas para dar forma al texto
Etiquetas <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <tt> <s> <strike> <u>
Descripcin Define un texto en negrita Define un texto grande Define un texto enfatizado Define un texto en itlica Define un texto pequeo Define un texto fuerte Define un texto subndice Define un texto superndice Define un texto subrayado Define un texto tachado Define un texto de teletipo Define un texto tachado. Desaprobado. Use <del> en su lugar Define un texto tachado. Desaprobado. Use <del> en su lugar Define un texto subrayado. Desaprobado. Use <ins> en su lugar
Etiquetas de "Texto estructurado" Estas estiquetas programacin. son usadas comunmente para mostrar cdigos de
Etiquetas Descripcin <code> <kbd> <samp> <var> <pre> <listing> <xmp> Define un texto en cdigo de computadora Define un texto del teclado Define un texto ejemplo de cdigo de computadora Define una variable Define un texto preformateado Desaprobado. Use <pre> en su lugar Desaprobado. Use <pre> en su lugar
<plaintext> Desaprobado. Use <pre> en su lugar
Etiquetas de citaciones y definiciones Etiquetas <abbr> <acronym> <address> <bdo> Descripcin Indica una forma abreviada (p.ej., WWW, HTTP, etc.) Indica un acrnimo (p.ej., WAC ,radar, autobs, etc.) Define la informacin sobre el autor Define la direccin del texto (p.ej., de izq. a der., de der. a izq.)
<blockquote> <q> <cite> <dfn>
Designa una cita larga Designa una cita corta Contiene una cita o una referencia a otras fuentes Indica que aqu es donde se define el trmino encerrado
Caracteres Especiales en HTML Uso de acentos, signos de apertura de interrogacin y exclamacin, ees, espacio en blanco, etc. Caracteres especiales Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado especial en HTML (por ej. "<" menor que). Para poder mostrarlos, debemos usar su nombre en cdigo. Los nombres de las entidades estn compuestos por el signo( &), luego el nombre de la entidad y al final (" ;" punto y coma). Los nmeros de estos caracteres estn compuestos por ( &), luego (# numeral), el nmero de la entidad y al final (" ;" - punto y coma). Por ejemplo para mostrar el signo "<" debemos escribir < o <. El uso ms comn de los caracteres especiales es el espacio en blanco. Si en un texto figuran 5 espacios en blanco seguidos, HTML automaticamente borra 4. Para ingresar espacios en blanco usamos " " y HTML los dejar en su lugar. Otro uso muy frecuente es el de insertar acentos en el cdigo html por medio de los nmeros de las entidades Caracteres especiales de uso frecuente Resultado Descripcin Espacio en blanco < > & " Comillas Apertura signo de exclamacin Apertura signo de interrogacin Marca registrada Derecho de autor Euro Menor que Mayor que Nombre < > & " ¡ ¿ ® © €
a minscula con acento e minscula con acento i minscula con acento o minscula con acento u minscula con acento minscula u minscula con diresis A mayscula con acento E mayscula con acento I mayscula con acento O mayscula con acento U mayscula con acento mayscula U mayscula con diresis
á é í ó ú ñ ü Á É Í Ó Ú Ñ Ü
Enlaces en HTML La propiedad ms importante de Internet, es la posibilidad de conectarse los unos con los otros. Los Enlaces o Links Los enlaces o links(en Ingls) nos permiten conectarnos con otros documentos:

una imagen un video un archivo de sonido sitios en la web(otra pgina web) mandar un email Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabraanchor(ancla). La etiqueta <a> tiene como cierre </a>. Sintaxis <a atributo="valor">Texto del enlace</a> Ejemplo Vamos a crear un enlace hacia la home de Virtualnauta.com Cdigo <body>
<a href="/http://www.virtualnauta.com/">La </body> Resultado La home de Virtualnauta EL atributo target
home
de
Virtualnauta</a>
Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace. Ejemplo Vamos a abrir el documento en una nueva pgina del navegador. Cdigo <body> <a href="http://www.vitualnauta.com/" target="_blank">La </body> Resultado La home de Virtualnauta EL atributo name Este atributo se usa para definir una determinada ubicacin dentro de la pgina. Supongamos que definimos un destino de vnculo llamado "destino-uno" en el archivo "uno.html". Sintaxis ...texto antes del destino de vnculo... <a name="destino-uno">Captulo 1</a>  ...texto despus del destino de vnculo... Y en otra parte de la pgina, del mismo sitio o de otro sitio, creamos un enlace a Captulo 1. Para ello utilizamos el signo # seguido del nombre del enlace. <a href="http://www.misitio.com/uno.html#destino-uno">Ir 1</a> O en caso que el enlace est definido en el mismo documento: <a href="/#destino-uno">Ir al Captulo 1</a> Creando un enlace a un email Se utiliza en caso que queramos que un enlace mande un email. En el momento que presionamos dicho link se abrir automaticamente el programa de email que tenemos definido por defecto. al Captulo home de Virtualnauta</a>
Ejemplo Cdigo <body> <a </body> Resultado Mandar email mailto: nos indica la direccin ejemplo: alguien@gmail.com. email a la que va dirigida, en este href="/mailto: alguien@gmail.com">Mandar email</a>
Un enlace a partir de una imagen Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto. Ejemplo Cdigo <body> <a </body> Resultado href="http://www.google.com/"><img src="/../graficos/google.gif"> </a>
Etiquetas y atributos de los enlaces Etiq ueta s <a> href URL Atributo Valor s
Descripcin Define un vnculo Direccin conectar. URL
Ej.
Google. a <html> <head> <title>a href=...</title > </head> <body> <a href="http://w ww.google.co m/">Google.<
/a> </body> </html> hreflang cdigo lenguaje de Especifica el lenguaje <html> de la URL. <head> <title>a hreflang</title > </head> <body> <p><b>hrefla ng</b> solo especifica el cdigo de lenguaje del enlace utilizado</p> <br> <a href="http://w ww.google.es/ " hreflang="es" >Google Espaa</a> </body> </html> name nombre seccin Ir a la seccin 5 de Para crear un <html> marcapginas dentro <head> de un documento. <title>Marcap Seccin 1 ginas en el documento</ti Texto, texto y ms texto. tle> </head> Seccin 2 <body> Texto, texto y ms <a texto. href="#sec5" >Ir a la Seccin 3 seccin 5</a> Texto, texto y ms <h3>Seccin texto. 1</h3> <p>Texto, Seccin 4 texto y ms texto.</p> Texto, texto y ms texto. hreflang solo especifica el cdigo de lenguaje del enlace utilizado Google Espaa
<h3>Seccin Seccin 5 2</h3> <p>Texto, texto y ms Texto, texto y ms texto. texto.</p> <h3>Seccin Seccin 6 3</h3> Texto, texto y ms <p>Texto, texto. texto y ms texto.</p> Seccin 7 <h3>Seccin Texto, texto y ms 4</h3> texto. <p>Texto, texto y ms Seccin 8 texto.</p> Texto, texto y ms <h3><a texto. name="sec5" >Seccin 5</a></h3> <p>Texto, texto y ms texto.</p> <h3>Seccin 6</h3> <p>Texto, texto y ms texto.</p> <h3>Seccin 7</h3> <p>Texto, texto y ms texto.</p> <h3>Seccin 8</h3> <p>Texto, texto y ms texto.</p> </body> </html> rel alternate designates stylesheet start Especifica la relacin entre el documento actual y el destino del vnculo.
next
<html> <head> <title>a href=...rel</ti tle> </head>
Pgina 4 El atributo rel, define la relacin entre el documento actual y el documento destino del vnculo. la
<body> <h2>Pgina 4</h2> Seguir en <p>El pgina 5 atributo rel, define la relacin entre el documento actual y el documento destino del vnculo.</p> <a href="pagina5 .html" rel="next">Se guir en la pgina 5</a> </body> </html> prev <html> <head> <title>a href=...rel</ti tle> </head> Pgina 6
<body> <h2>Pgina 6</h2> Volver a la pgina <p>El 5 atributo rel, define la relacin entre el documento actual y el documento destino del vnculo.</p> <a href="pagina5 .html" rel="prev">V olver a la pgina 5</a>
El atributo rel, define la relacin entre el documento actual y el documento destino del vnculo.
</body> </html> contents index glossary copyright chapter section subsection apendix help bookmark nofollow <html> <head> <title>a href=...rel</ti tle> </head> nofollow
Se usa en caso que un usuario ingrese una URL de forma automtica sin el consentimiento del autor del sitio. <body> De esta forma el <h2>nofollow vnculo no ser </h2> considerado por <p>Se usa en los buscadores. caso que un usuario La Web de Luis ingrese una URL de forma automtica sin el consentimient o del autor del sitio.<br>De esta forma el vnculo no ser considerado por los buscadores.</ p> <a href="ejemplo .html" rel="nofollow" >La Web de Luis</a> </body> </html> rev alternate Especifica la relacin
designates stylesheet start next prev contents index glossary copyright chapter section subsection apendix help bookmark coords
entre el destino del vnculo y el documento actual(vnculo inverso).
coordenadas Especifica las coordenadas de la superficie que contiene el enlace. Define la forma del rea. rect rectangle circ circle poly polygon Usamos coords="izquierda, arriba, derecha, abajo" Usamos coords="centro centro y, radio" x,
shape
Usamos coords="x1, y1, x2, y2, .., xn, yn" Indica donde abrir el URL.
target _blank
Google El URL se abrir en <html> una nueva ventana. <head> <title>Un vnculo que se abre en otro pgina del navegador</ti tle> </head> <body>
<a href="http:// www.google.c om/" target="_blan k">Google</a > </body> </html> _parent Google El URL se abrir en el <html> frameset padre. <head> <title>Vnculo que se abre en esta misma pgina</title > </head> <body> <a href="http:// www.google.c om/" target="_pare nt">Google</ a> </body> </html> _self Google El URL se abrir en el <html> mismo frame donde <head> fue apretado. <title>Vnculo que se abre en este recuadro</titl e> </head> <body> <a href="http:// www.google.c om/" target="_self" >Google</a> </body>
</html> _top Google El URL se abrir en <html> una ventana de <head> tamao completo. <title>Vnculo que se abre en esta misma ventana</title > </head> <body> <a href="http:// www.google.c om/" target="_top" >Google</a> </body> </html> type tipo de Especifica el tipo de contenido contenido a conectar.
Frames en HTML Dividimos la pgina en partes ms pequeas y en cada una de ellas visualizamos documentos diferentes. Los Frames Los frames(marcos en espaol) permiten a los autores presentar documentos con vistas mltiples. Esto posibilita mantener cierta informacin visible mientras otras vistas se desplazan o se sustituyen. Cada vista es un documento independiente de los otros.
La etiqueta frameset La etiqueta <frameset> se usa para dividir la ventana del navegador en diferentes marcos y a cada uno asignarle una medida distinta. Cada frameset define un grupo de filas y columnas. Sintaxis
<frameset rows="valor1, valor_n"> ...el resto </frameset>
valor2, de
valor_n"
cols="valor3, la
valor4,
definicin...
Los posibles valores para definir el tamao de las filas y de las columnas pixels | % | * La etiqueta frame La etiqueta <frame> asigna que documento colocaremos en cada marco. Sintaxis <frameset cols="25%,75%">  <frame src="/URL_1"> <frame src="/URL_2"> </frameset> Nota: La etiqueta <frame> no debe llevar etiqueta de cierre La etiqueta noframes La etiqueta <noframes> muestra un texto para los navegadores que no soportan frames. <noframes> se coloca dentro de la etiqueta frameset si el navegador soporta frames, el texto del <noframes> no se mostrar si usamos la etiqueta <noframes> el texto de la misma debe ir entre las etiquetas <body> </body> <frameset rows="25%,75%"> <noframes> <body> Su navegador no soporta frames </body> </noframes> <frame src="/frame1.htm"> <frame src="/frame2.htm"> </frameset>
La etiqueta iframe La etiqueta <iframe> se usa para crear un frame en lnea que contiene otro documento. El iframe puedo mostrar una ventana que contenga otra pgina Web dentro de la pgina que estamos diseando Sintaxis <iframe src="/URL del sitio que desea mostrar"> Ejemplo Cdigo
<iframe src="/http://www.virtualnauta.com" width="100%"> </iframe> Resultado
Etiquetas y atributos de los marcos Etiq ueta s <fram eset> cols
Atributos Valor Descripcin Organiza ventanas mltiples.
Ej
pixels Asigna el nmero <html> y el tamao de las columnas. <frameset cols="100px,200px,100p x"> <frame src="marco_1.html"> <frame src="marco_2.html"> <frame src="marco_3.html"> </frameset> </html> % <html> <frameset cols="20%,30%,50%"> <frame src="marco_1.html"> <frame src="marco_2.html"> <frame src="marco_3.html"> </frameset> </html> * <html> <frameset cols="100px,*"> <frame
src="marco_1.html"> <frame src="marco_2.html"> </frameset> </html> rows pixels Asigna el nmero <html> y el tamao de las filas. <frameset rows="100px,200px,100p x"> <frame src="marco_1.html"> <frame src="marco_2.html"> <frame src="marco_3.html"> </frameset> </html> % <html> <frameset rows="20%,30%,50%"> <frame src="marco_1.html"> <frame src="marco_2.html"> <frame src="marco_3.html"> </frameset> </html> * <html> <frameset rows="100px,*"> <frame src="marco_1.html"> <frame src="marco_2.html"> </frameset> </html> <fram e> Define subventana. una
framebord 0 er
Especifica si se <html> mostrar o no el borde alrededor <frameset del frame. rows="20%,30%,50%"> <frame frameborder="0" src="marco_1.html"> <frame frameborder="0" src="marco_2.html"> <frame frameborder="0" src="marco_3.html"> </frameset> </html>
<html> <frameset rows="20%,30%,50%"> <frame frameborder="1" src="marco_1.html"> <frame frameborder="1" src="marco_2.html"> <frame frameborder="1" src="marco_3.html"> </frameset> </html>
longdesc
URL
URL con una larga descripcin del contenido del frame (se usa para navegadores que no soportan frames).
marginhei pixels Define el margen <html> ght superior e inferior del frame. <frameset rows="20%,30%,50%"> <frame marginwidth="50px"src= "marco_1.html"> <frame marginheight="30px"src= "marco_2.html">
<frame src="marco_3.html"> </frameset>  </html> marginwid pixels Define el margen <html> th izquierdo y derecho del <frameset frame. rows="20%,30%,50%"> <frame marginwidth="50px"src= "marco_1.html"> <frame marginheight="30px"src= "marco_2.html"> <frame src="marco_3.html"> </frameset>  </html> name frame Define un nombre <html> _nam para el frame. e <frameset rows="20%,30%,50%"> <frame name="1" src="marco_1.html"> <frame name="2" src="marco_2.html"> <frame name="3" src="marco_3.html"> </frameset>  </html> noresize noresi No le permite al <html> ze usuario modificar el tamao del <frameset frame. rows="20%,30%,50%"> <frame noresize="noresize" src="marco_1.html"> <frame
noresize="noresize" src="marco_2.html"> <frame noresize="noresize" src="marco_3.html"> </frameset> </html> scrolling yes Determina la <html> accin de la barra de <frameset desplazamiento. cols="33%,33%,34%"> <frame scrolling="yes" src="marco_4.html"> <frame scrolling="no" src="marco_5.html"> <frame scrolling="auto" src="marco_6.html"> </frameset> </html> no <html> <frameset cols="33%,33%,34%"> <frame scrolling="yes" src="marco_4.html"> <frame scrolling="no" src="marco_5.html"> <frame scrolling="auto" src="marco_6.html"> </frameset> </html> auto <html> <frameset cols="33%,33%,34%"> <frame scrolling="yes" src="marco_4.html"> <frame scrolling="no" src="marco_5.html"> <frame scrolling="auto" src="marco_6.html">
</frameset> </html> src URL Archivo que va a <html> ser mostrado en el frame. <frameset cols="100px,200px,100p x"> <frame src="marco_1.html"> <frame src="marco_2.html"> <frame src="marco_3.html"> </frameset> </html> <nofra mes> Muestra un texto <html> para los navegadores que <frameset no soportan cols="33%,33%,34%"> frames. <frame src="marco_1.html"> <frame src="marco_2.html"> <frame src="marco_3.html"> </frameset> <noframes>En caso que su navegador no soporte marcos, este es un ejemplo de la divisin de la pantalla por medio de frames</noframes> </html> <ifram e> align left Crea un frame en lnea que contiene otro documento. Alineacin del <html> iframe con <head> respecto al texto. <title>iframes</title> </head> <body>
<h2>Iframe alineado a la izquierda</h2> <iframe src="http://www.virtualn auta.com" width="50%" align="left"></iframe> </body> </html> right <html> <head> <title>iframes</title> </head> <body> <h2>Iframe alineado a la derecha</h2> <iframe src="http://www.virtualn auta.com" width="50%" align="right"></iframe> </body> </html> top middl e botto m framebord 0 er Especifica si se <html> mostrar o no el <head> borde alrededor <title>iframes</title> del iframe. </head> <body> <h2>Iframe bordes</h2> sin
<iframe src="http://www.virtualn auta.com" width="50%" frameborder="0"></ifra me> </body> </html>
<html> <head> <title>iframes</title> </head> <body> <h2>Iframe bordes</h2> con
<iframe src="http://www.virtualn auta.com" width="50%" frameborder="1"></ifra me> </body> </html> height pixels Define la altura <html> del iframe. <head> <title>iframes</title> </head> <body> <h2>Iframe con altura de 60 pixels</h2> <iframe src="http://www.virtualn auta.com" height="60px"></iframe > </body> </html> % longdesc URL URL con una larga descripcin del contenido del iframe (se usa para navegadores que no soportan frames).
marginhei pixels Define el margen ght superior e inferior del iframe. marginwid pixels Define el margen th izquierdo y el derecho del
iframe. name nombr Define un nombre <html> e para el iframe. <head> <title>iframes</title> </head> <body> <h2>Iframe definimos un nombre</h2> <iframe src="http://www.virtualn auta.com" width="80%" height="200px" name="ejemploiframe"></iframe> </body> </html> scrolling yes Determina la <html> accin de la barra <head> de <title>iframes</title> desplazamiento. </head> <body> <h2>Iframe con barras de desplazamiento</h2> <iframe src="http://www.virtualn auta.com" width="80%" height="200px" scrolling="yes"></iframe > </body> </html> no <html> <head> <title>iframes</title> </head> <body> <h2>Iframe sin barras de desplazamiento</h2> <iframe
src="http://www.virtualn auta.com" width="80%" height="200px" scrolling="no"></iframe > </body> </html> auto <html> <head> <title>iframes</title> </head> <body> <h2>Iframe con barras de desplazamiento automticas</h2> <iframe src="http://www.virtualn auta.com" width="80%" height="200px" scrolling="auto"></ifram e> </body> </html> src URL Archivo que va a <html> ser mostrado en <head> el iframe. <title>iframes</title> </head> <body> <h2>Iframe mostrando Virtualnauta</h2> <iframe src="http://www.virtualn auta.com"></iframe> </body> </html> width pixels Define el ancho <html> del iframe. <head> <title>iframes</title> </head> <body>
<h2>Iframe con ancho de pixels</h2>
un 100
<iframe src="http://www.virtualn auta.com" width="100px"></iframe > </body> </html> % <html> <head> <title>iframes</title> </head> <body> <h2>Iframe con un ancho del 80%</h2> <iframe src="http://www.virtualn auta.com" width="80%"></iframe> </body> </html>
Tablas de HTML Las usamos para componer un sitio o simplemente como tabla de datos. Las tablas Las tablas son herramientas muy tiles para presentar datos en forma de tablas y para el diseo de pginas y ubicacin de textos y grficos dentro de las mismas. Caractersticas de las tablas Definimos las tablas con la etiqueta <table>. La tabla est dividida en filas definidas con la etiqueta <tr>. Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>. Las celdas pueden contener texto, imgenes, formularios, listas, otras tablas, etc.
Sintaxis
<table> <tr> <td>contenido <td>contenido </tr> </table> Ejemplo
celda celda
1</td> 2</td>
Vamos a crear una pequea tabla para ver su comportamiento Cdigo <table <tr> <td>Nombre</td> <td>Apellido</td> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> Bordes de las tablas Para que se visualicen los bordes de una tabla, debemos agregar el atributo border junto con el valor expresado en pixels, de lo contrario no se vern los bordes que dividen las celdas de la tabla. Ejemplo Cdigo <table border="3px"> <tr> <td>Borde</td> <td>3 </tr> </table> Resultado Borde 3 pixels pixels</td> Resultado border="1px"> Nombre Apellido Pedro Garcia
Veamos un ejemplo sin bordes Ejemplo Cdigo <table> <tr> <td>Esta <td>Sin </tr> </table> Resultado Esta tabla es Sin bordes tabla es</td> bordes</td>
Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe. Encabezados de las tablas
Los encabezados de una tabla se definen con la etiqueta <th>. Ejemplo Cdigo <table <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> <tr> <td>Juan</td> <td>Perez</td> </tr> </table> Resultado border="1px"> Nombre Apellido Pedro Juan Garcia Perez
La etiqueta <th> siempre muestra los encabezados remarcados. Mrgenes de las celdas Es el espacio que se encuentra entre los bordes de la celda y su contenido. Definimos los mrgenes con el atributo cellpadding. Ejemplo Cdigo Resultado <table border="1px" cellpadding="20px"> <tr> Nombre <th>Nombre</th> <th>Apellido</th> </tr> Pedro <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>
Apellido
Garca
Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mnimo entre las palabras dentro de cada celda y los bordes de las mismas. Espaciado entre celdas Es el espacio que se encuentra entre El mismo est definido con el atributo cellspacing. Ejemplo Cdigo <table <tr> Resultado border="1px" cellspacing="15px"> Nombre Apellido celda y celda.
<th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>
Pedro
Garcia
Nota: en este ejemplo el atributo cellspacing deja un espacio de 15 pixels entre las celdas de la tabla. Etiquetas y atributos de las tablas Etiqu Atributos etas Valor Descripcin Define una tabla. Alnea las tablas. Use la propiedad position de CSS en su lugar. Ej
<table > align left Desaprobad center o right
bgcolor rgb(x,x,x) Color de fondo de las Desaprobad #xxxxxx tablas. Use la o propiedad nombre_c background de olor CSS en su lugar. border pixels Espesor del borde de <html> la tabla. <head> <title>Tabla con bordes remarcados</ti tle> </head> <body> <table border="5px"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido
1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> cellpadding pixels Espacio entre la <html> pared de la celda y el <head> contenido. <title>Uso del cellpadding</tit le> </head> <body> <table border="1" cellpadding="1 0"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table>
</body> </html> % <html> <head> <title>Uso de cellpadding</tit le> </head> <body> <table border="1" cellpadding="1 5%"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> cellspacing pixels Espacio entre celdas. <html> <head> <title>Distanci a entre celdas</title> </head>
<body> <table border="1" cellspacing="10 "> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> % <html> <head> <title>Distanci a entre celdas</title> </head> <body> <table border="1" cellspacing="20 %"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td>
</tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> frame void Especifica cual de los <html> bordes alrededor de <head> la tabla ser visible. <title>Muestra sin bordes</title> </head> <body> <table frame="void"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td>
<td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> above <html> <head> <title>Muestra solo borde superior</title > </head> <body> <table frame="above" > <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> below <html> <head>
<title>Muestra solo borde inferior</title> </head> <body> <table frame="below" > <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> hsides <html> <head> <title>Muestra solo bordes horizontales</t itle> </head> <body> <table frame="hsides" > <tr> <td> </td> <td>Columna
1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> <html> <head> <title>Muestra solo bordes horizontales</t itle> </head> <body> <table frame="hsides" > <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td>
</tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> lhs <html> <head> <title>Muestra solo el borde izquierdo</title > </head> <body> <table frame="lhs"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html>
rhs
<html> <head> <title>Muestra solo borde derecha</title> </head> <body> <table frame="rhs"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html>
vsides
<html> <head> <title>Muestra solo bordes verticales</title > </head> <body> <table frame="vsides"
> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> box <html> <head> <title>Muestra todos los bordes</title> </head> <body> <table frame="box"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td>
<td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> border <html> <head> <title>Muestra todos los bordes</title> </head> <body> <table frame="border" > <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table>
</body> </html> rules none Especifica las lneas <html> divisorias <head> horizontales y <title>No verticales. muestra lneas divisorias internas</title> </head> <body> <table rules="none"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> groups rows <html> <head> <title>Muestra lneas divisorias horizontales</t itle> </head>
<body> <table rules="rows"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> cols <html> <head> <title>Muestra lneas divisorias verticales</title > </head> <body> <table rules="cols"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila
1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html> all <html> <head> <title>Muestra todas las lneas divisorias internas</title > </head> <body> <table rules="all"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td>
<td>Contenido 2-2</td> </tr> </table> </body> </html> summary texto Resumen del contenido de la tabla para navegadores sin visualizador. Especifica el ancho de <html> la tabla. <head> <title>Especific amos el ancho de la tabla</title> </head> <body> <table width="120%" border="1"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html>
width
pixels
<html> <head> <title>Especific amos el ancho de la tabla</title> </head> <body> <table width="400px" border="1"> <tr> <td> </td> <td>Columna 1</td> <td>Columna 2</td> </tr> <tr> <td>Fila 1</td> <td>Contenido 1-1</td> <td>Contenido 1-2</td> </tr> <tr> <td>Fila 2</td> <td>Contenido 2-1</td> <td>Contenido 2-2</td> </tr> </table> </body> </html>
<tr> align right
Define una fila. Alnea horizontalmente texto en la celda. <html> el <head> <title>Especific amos la alineacin horizontal de las filas</title> </head>
<body> <p>Tabla ejemplo de filas con el atributo align</p> <table width="400" border="1"> <tr> <th>Valor</th > <th>Resultado </th> <th>Resultado </th> </tr> <tr align="right"> <td>right</td> <td>alineado a</td> <td>la derecha</td> </tr> <tr align="left"> <td>left</td> <td>alineado a</td> <td>la izquierda</td> </tr> <tr align="center"> <td>center</td > <td>texto</td > <td>centrado< /td> </tr> <tr align="justify"> <td>justify</td > <td>texto</td >
<td>texto</td > </tr> </table> </body> </html> left <html> <head> <title>Especific amos la alineacin horizontal de las filas</title> </head> <body> <p>Tabla ejemplo de filas con el atributo align</p> <table width="400" border="1"> <tr> <th>Valor</th > <th>Resultado </th> <th>Resultado </th> </tr> <tr align="right"> <td>right</td > <td>alineado a</td> <td>la derecha</td> </tr> <tr align="left"> <td>left</td> <td>alineado a</td> <td>la izquierda</td> </tr>
<tr align="center" > <td>center</t d> <td>texto</td > <td>centrado< /td> </tr> <tr align="justify" > <td>justify</t d> <td>texto</td > <td>texto</td > </tr> </table> </body> </html> center <html> <head> <title>Especific amos la alineacin horizontal de las filas</title> </head> <body> <p>Tabla ejemplo de filas con el atributo align</p> <table width="400" border="1"> <tr> <th>Valor</th > <th>Resultado </th> <th>Resultado </th> </tr>
<tr align="right"> <td>right</td > <td>alineado a</td> <td>la derecha</td> </tr> <tr align="left"> <td>left</td> <td>alineado a</td> <td>la izquierda</td> </tr> <tr align="center" > <td>center</t d> <td>texto</td > <td>centrado< /td> </tr> <tr align="justify" > <td>justify</t d> <td>texto</td > <td>texto</td > </tr> </table> </body> </html> justify <html> <head> <title>Especific amos la alineacin horizontal de
las filas</title> </head> <body> <p>Tabla ejemplo de filas con el atributo align</p> <table width="400" border="1"> <tr> <th>Valor</th > <th>Resultado </th> <th>Resultado </th> </tr> <tr align="right"> <td>right</td > <td>alineado a</td> <td>la derecha</td> </tr> <tr align="left"> <td>left</td> <td>alineado a</td> <td>la izquierda</td> </tr> <tr align="center" > <td>center</t d> <td>texto</td > <td>centrado< /td> </tr> <tr
align="justify" > <td>justify</t d> <td>texto</td > <td>texto</td > </tr> </table> </body> </html> char bgcolor rgb(x,x,x) Color de fondo de las Desaprobad #xxxxxx celdas. Use la o propiedad nombre_c background de olor CSS en su lugar. char carcter Especifica que un carcter ("."o",") acte como eje de alineacin. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carcter de alineacin en cada lnea. Especifica la posicin <html> vertical de los datos <head> dentro de la celda. <title>Especifica mos la alineacin de las filas</title> </head> <body> <p>Tabla ejemplo de filas con el atributo valign</p> <table width="200" border="1"> <tr
charoff
pixels %
valign
top
valign="top"> <th>TOP</th> <td>Resultado ------></td> <td>arriba</td> </tr> <tr valign="middle"> <th>MIDDLE</th > <td>Resultado ------></td> <td>medio</td> </tr> <tr valign="bottom" > <th>BOTTOM</t h> <td>Resultado ------></td> <td>abajo</td> </tr> <tr valign="baseline" > <th>BASELINE</ th> <td>Resultado ------></td> <td>lineabase</t d> </tr> </table> </body> </html> middle <html> <head> <title>Especifica mos la alineacin de las filas</title> </head> <body> <p>Tabla ejemplo de filas
con el atributo valign</p> <table width="200" border="1"> <tr valign="top"> <th>TOP</th> <td>Resultado ------></td> <td>arriba</td> </tr> <tr valign="middle"> <th>MIDDLE</t h> <td>Resultado ------></td> <td>medio</td> </tr> <tr valign="bottom" > <th>BOTTOM</t h> <td>Resultado ------></td> <td>abajo</td> </tr> <tr valign="baseline" > <th>BASELINE< /th> <td>Resultado ------></td> <td>lineabase</ td> </tr> </table> </body> </html> bottom <html> <head> <title>Especifica mos la alineacin
de filas</title> </head>
las
<body> <p>Tabla ejemplo de filas con el atributo valign</p> <table width="200" border="1"> <tr valign="top"> <th>TOP</th> <td>Resultado ------></td> <td>arriba</td> </tr> <tr valign="middle"> <th>MIDDLE</t h> <td>Resultado ------></td> <td>medio</td> </tr> <tr valign="bottom" > <th>BOTTOM</t h> <td>Resultado ------></td> <td>abajo</td> </tr> <tr valign="baseline" > <th>BASELINE< /th> <td>Resultado ------></td> <td>lineabase</ td> </tr> </table>
</body> </html> baseline <html> <head> <title>Especifica mos la alineacin de las filas</title> </head> <body> <p>Tabla ejemplo de filas con el atributo valign</p> <table width="200" border="1"> <tr valign="top"> <th>TOP</th> <td>Resultado ------></td> <td>arriba</td> </tr> <tr valign="middle"> <th>MIDDLE</t h> <td>Resultado ------></td> <td>medio</td> </tr> <tr valign="bottom" > <th>BOTTOM</t h> <td>Resultado ------></td> <td>abajo</td> </tr> <tr valign="baseline" > <th>BASELINE< /th> <td>Resultado
------></td> <td>lineabase</ td> </tr> </table> </body> </html> <td> <th> Define una celda. <html> <head> <title>theadtbodyscope</title> </head> <body> <table border="1"> <caption>Tabla de poblacin por pas</caption> <thead> <tr> <th scope="col">Pas --></th> <th scope="col">Chi na</th> <th scope="col">Indi a</th> <th scope="col">USA </th> <th scope="col">Bra sil</th> <th scope="col">Mex ico</th> </tr> </thead> <tbody> <tr> <th scope="row">Po blacin</th> <td>1,326,910,0 00</td>
<td>1,139,830,0 00</td> <td>305,516,00 0</td> <td>187,974,00 0</td> <td>106,682,50 0</td> </tr> <tr> <th scope="row">% del mundo</th> <td>19.71%</td > <td>16.93%</td > <td>4.54%</td > <td>2.79%</td > <td>1.58%</td > </tr> </tbody> </table> </body> </html> Define los <html> encabezados de una <head> tabla. <title>theadtbodyscope</title> </head> <body> <table border="1"> <caption>Tabla de poblacin por pas</caption> <thead> <tr> <th scope="col">Pas --></th> <th scope="col">Chi na</th> <th
scope="col">Indi a</th> <th scope="col">USA </th> <th scope="col">Bra sil</th> <th scope="col">Mex ico</th> </tr> </thead> <tbody> <tr> <th scope="row">Po blacin</th> <td>1,326,910,0 00</td> <td>1,139,830,0 00</td> <td>305,516,00 0</td> <td>187,974,00 0</td> <td>106,682,50 0</td> </tr> <tr> <th scope="row">% del mundo</th> <td>19.71%</td > <td>16.93%</td > <td>4.54%</td > <td>2.79%</td > <td>1.58%</td > </tr> </tbody> </table> </body> </html> abbr texto Especifica una
abreviado versin abreviada del contenido de una celda. align left Alnea horizontalmente texto en la celda. <html> el <head> <title>Especifica mos la alineacin horizontal de las celdas</title> </head> <body> <p>Tabla ejemplo celdas con atributo align</p> <table width="400" border="1">
de el
<tr> <th>Valor align</th> <th>Explicacin< /th> </tr> <tr> <td align="right">rig ht</td> <td>alineado a la derecha</td> </tr> <tr> <td align="left">left< /td> <td>alineado a la izquierda</td> </tr> <tr> <td align="center">c enter</td> <td>texto centrado</td> </tr>
<tr> <td align="justify">ju stify</td> <td>texto</td> </tr> </table> <p><b>Nota:</ b> solo las celdas con el atributo align son afectada</p> </body> </html> right <html> <head> <title>Especifica mos la alineacin horizontal de las celdas</title> </head> <body> <p>Tabla ejemplo celdas con atributo align</p> <table width="400" border="1">
de el
<tr> <th>Valor align</th> <th>Explicacin </th> </tr> <tr> <td align="right">rig ht</td> <td>alineado a la derecha</td> </tr> <tr> <td align="left">left </td>
<td>alineado a la izquierda</td> </tr> <tr> <td align="center">c enter</td> <td>texto centrado</td> </tr> <tr> <td align="justify">j ustify</td> <td>texto</td> </tr> </table> <p><b>Nota:</ b> solo las celdas con el atributo align son afectada</p> </body> </html> center <html> <head> <title>Especifica mos la alineacin horizontal de las celdas</title> </head> <body> <p>Tabla ejemplo celdas con atributo align</p> <table width="400" border="1">
de el
<tr> <th>Valor align</th> <th>Explicacin </th> </tr>
<tr> <td align="right">rig ht</td> <td>alineado a la derecha</td> </tr> <tr> <td align="left">left </td> <td>alineado a la izquierda</td> </tr> <tr> <td align="center">c enter</td> <td>texto centrado</td> </tr> <tr> <td align="justify">j ustify</td> <td>texto</td> </tr> </table> <p><b>Nota:</ b> solo las celdas con el atributo align son afectada</p> </body> </html> justify <html> <head> <title>Especifica mos la alineacin horizontal de las celdas</title> </head> <body> <p>Tabla ejemplo celdas con atributo
de el
align</p> <table width="400" border="1"> <tr> <th>Valor align</th> <th>Explicacin </th> </tr> <tr> <td align="right">rig ht</td> <td>alineado a la derecha</td> </tr> <tr> <td align="left">left </td> <td>alineado a la izquierda</td> </tr> <tr> <td align="center">c enter</td> <td>texto centrado</td> </tr> <tr> <td align="justify">j ustify</td> <td>texto</td> </tr> </table> <p><b>Nota:</ b> solo las celdas con el atributo align son afectada</p> </body> </html> char
axis
nombre Sita una celda en de la categoras categora conceptuales.
bgcolor rgb(x,x,x) Color de fondo de las Desaprobad #xxxxxx celdas. Use la o propiedad nombre_c background de olor CSS en su lugar. char carcter Especifica que un carcter acte como eje de alineacin. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carcter de alineacin en cada lnea. Indica el nmero de <html> columnas que esta <head> celda debe anexar. <title>Especifica mos la cantidad de columnas que esta celda debe anexar</title> </head> <body> <p>Ejemplo de celdas que se anexan con colspan</p> <table width="400" border="1"> <tr> <th colspan="3">Tab la = 3 celdas</th> </tr> <tr> <td colspan="2">2 celdas</td> <td>1 celda</td> </tr>
charoff
pixels %
colspan
nmero
<tr> <td>1 celda</td> <td>1 celda</td> <td>1 celda</td> </tr> <tr> <td>1 celda</td> <td colspan="2">2 celdas</td> </tr> <tr> <td>1 celda</td> <td>1 celda</td> <td>1 celda</td> </tr> </table> </body> </html> headers lista de Lista de celdas de nombres encabezado que de celdas proporcionan informacin de encabezado para la celda de datos actual. Especifica la altura de la celda. Use la propiedad height de CSS en su lugar. Si est presente, deshabilita el ajuste automtico de lneas. Use CSS en su lugar. Indica el nmero de <html> filas que esta celda <head> debe anexar. <title>Especifica mos la cantidad de filas que esta celda debe anexar</title> </head>
height pixels Desaprobad o nowrap nowrap Desaprobad o rowspan nmero
<body> <p>Ejemplo de celdas que se anexan con rowspan</p> <table width="400" border="1"> <tr> <td>1 celda</td> <td>1 celda</td> <td>1 celda</td> </tr> <tr> <td rowspan="2">2 celdas</td> <td>1 celda</td> <td rowspan="3">3 celdas</td> </tr> <tr> <td>1 celda</td> </tr> <tr> <td>1 celda</td> <td>1 celda</td> </tr> </table> </body> </html> scope col Este atributo <html> especifica el conjunto <head> de celdas de datos <title>theadpara las cuales la tbodycelda de encabezado scope</title> actual proporciona </head> informacin de
encabezado.
<body> <table border="1"> <caption>Tabla de poblacin por pas</caption> <thead> <tr> <th scope="col">Pas --></th> <th scope="col">Chi na</th> <th scope="col">Indi a</th> <th scope="col">USA </th> <th scope="col">Bra sil</th> <th scope="col">Mex ico</th> </tr> </thead> <tbody> <tr> <th scope="row">Po blacin</th> <td>1,326,910,0 00</td> <td>1,139,830,0 00</td> <td>305,516,00 0</td> <td>187,974,00 0</td> <td>106,682,50 0</td> </tr> <tr> <th scope="row">% del mundo</th> <td>19.71%</td >
<td>16.93%</td > <td>4.54%</td > <td>2.79%</td > <td>1.58%</td > </tr> </tbody> </table> </body> </html> colgroup row <html> <head> <title>theadtbodyscope</title> </head> <body> <table border="1"> <caption>Tabla de poblacin por pas</caption> <thead> <tr> <th scope="col">Pas --></th> <th scope="col">Chi na</th> <th scope="col">Indi a</th> <th scope="col">USA </th> <th scope="col">Bra sil</th> <th scope="col">Mex ico</th> </tr> </thead>
<tbody> <tr> <th scope="row">Po blacin</th> <td>1,326,910,0 00</td> <td>1,139,830,0 00</td> <td>305,516,00 0</td> <td>187,974,00 0</td> <td>106,682,50 0</td> </tr> <tr> <th scope="row">% del mundo</th> <td>19.71%</td > <td>16.93%</td > <td>4.54%</td > <td>2.79%</td > <td>1.58%</td > </tr> </tbody> </table> </body> </html> rowgroup valign top Especifica la posicin <html> vertical de los datos <head> dentro de una celda. <title>Especifica mos la alineacin vertical de las celdas</title> </head> <body> <p>Tabla ejemplo celdas con atributo
de el
valign</p> <table width="200" border="1"> <tr> <th>TOP</th> <td>Resultado ------></td> <td valign="top">arri ba</td> </tr> <tr> <th>MIDDLE</th > <td>Resultado ------></td> <td valign="middle"> medio</td> </tr> <tr> <th>BOTTOM</t h> <td>Resultado ------></td> <td valign="bottom" >abajo</td> </tr> <tr> <th>BASELINE</ th> <td>Resultado ------></td> <td valign="baseline" >lineabase</td> </tr> </table> </body> </html> middle <html> <head> <title>Especifica mos la alineacin vertical de las
celdas</title> </head> <body> <p>Tabla ejemplo celdas con atributo valign</p> <table width="200" border="1">
de el
<tr> <th>TOP</th> <td>Resultado ------></td> <td valign="top">arri ba</td> </tr> <tr> <th>MIDDLE</t h> <td>Resultado ------></td> <td valign="middle"> medio</td> </tr> <tr> <th>BOTTOM</t h> <td>Resultado ------></td> <td valign="bottom" >abajo</td> </tr> <tr> <th>BASELINE< /th> <td>Resultado ------></td> <td valign="baseline" >lineabase</td> </tr>
</table> </body> </html> bottom <html> <head> <title>Especifica mos la alineacin vertical de las celdas</title> </head> <body> <p>Tabla ejemplo celdas con atributo valign</p> <table width="200" border="1">
de el
<tr> <th>TOP</th> <td>Resultado ------></td> <td valign="top">arr iba</td> </tr> <tr> <th>MIDDLE</t h> <td>Resultado ------></td> <td valign="middle" >medio</td> </tr> <tr> <th>BOTTOM</t h> <td>Resultado ------></td> <td valign="bottom" >abajo</td> </tr> <tr> <th>BASELINE<
/th> <td>Resultado ------></td> <td valign="baseline" >lineabase</td> </tr> </table> </body> </html> baseline <html> <head> <title>Especifica mos la alineacin vertical de las celdas</title> </head> <body> <p>Tabla ejemplo celdas con atributo valign</p> <table width="200" border="1">
de el
<tr> <th>TOP</th> <td>Resultado ------></td> <td valign="top">arr iba</td> </tr> <tr> <th>MIDDLE</t h> <td>Resultado ------></td> <td valign="middle" >medio</td> </tr> <tr> <th>BOTTOM</t h> <td>Resultado
------></td> <td valign="bottom" >abajo</td> </tr> <tr> <th>BASELINE< /th> <td>Resultado ------></td> <td valign="baseline" >lineabase</td> </tr> </table> </body> </html> width pixels Desaprobad % o <capti on> Especifica el ancho de la celda. Use la propiedad width de CSS en su lugar. Define el ttulo de la <html> tabla. <head> <title>theadtbodyscope</title> </head> <body> <table border="1"> <caption>Tabla de poblacin por pas</caption> <thead> <tr> <th scope="col">Pas --></th> <th scope="col">Chi na</th> <th scope="col">Indi a</th> <th scope="col">USA </th> <th
scope="col">Bra sil</th> <th scope="col">Mex ico</th> </tr> </thead> <tbody> <tr> <th scope="row">Po blacin</th> <td>1,326,910,0 00</td> <td>1,139,830,0 00</td> <td>305,516,00 0</td> <td>187,974,00 0</td> <td>106,682,50 0</td> </tr> <tr> <th scope="row">% del mundo</th> <td>19.71%</td > <td>16.93%</td > <td>4.54%</td > <td>2.79%</td > <td>1.58%</td > </tr> </tbody> </table> </body> </html> align top Desaprobad bottom o left right Ubicacin del ttulo con respecto a la tabla. Use la propiedad captionside de CSS en su lugar.
<colgr oup> <col>
Crea un explcito columnas.
grupo de
Permite a los autores compartir atributos entre varias columnas. align right left center justify char char carcter Especifica que un carcter acte como eje de alineacin. Nota: usar junto con align="char". Especifica la distancia entre el borde y el primer carcter de alineacin en cada lnea. Especifica el nmero de columnas de un grupo de columnas. Alnea verticalmente el contenido en el grupo de columnas. Define el ancho del grupo de columnas. Alnea horizontalmente el contenido en el grupo de columnas.
charoff
pixels %
span
nmero
valign
top middle bottom baseline
width
% pixels longitud relativa
<thea d> <tbody > <tfoot >
Las filas de una tabla <html> pueden agruparse en <head> una cabecera de <title>theadtabla <thead>, un tbodypie de tabla <tfoot> scope</title> y una o ms </head> secciones de cuerpo de tabla <tbody>. <body> <table border="1"> <caption>Tabla de poblacin por pas</caption> <thead> <tr>
<th scope="col">Pas --></th> <th scope="col">Chi na</th> <th scope="col">Indi a</th> <th scope="col">USA </th> <th scope="col">Bra sil</th> <th scope="col">Mex ico</th> </tr> </thead> <tbody> <tr> <th scope="row">Po blacin</th> <td>1,326,910,0 00</td> <td>1,139,830,0 00</td> <td>305,516,00 0</td> <td>187,974,00 0</td> <td>106,682,50 0</td> </tr> <tr> <th scope="row">% del mundo</th> <td>19.71%</td > <td>16.93%</td > <td>4.54%</td > <td>2.79%</td > <td>1.58%</td >
</tr> </tbody> </table> </body> </html> align right left center justify char char character Especifica que un carcter acte como eje de alineacin. Nota: usar junto con align="char". pixels % Especifica la distancia entre el borde y el primer carcter de alineacin en cada lnea. Especifica la posicin vertical de los datos dentro de la celda. Alnea horizontalmente texto en la celda. el
charoff
valign
top middle bottom baseline
Listas - Listados Las listas son ideales para el diseo de mens. Las listas Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura. Tenemos tres tipos de listas:

Ordenadas. Desordenadas. De definicin.
Listas Ordenadas Son aquellas que ordenan la lista anteponiendo nmeros ,letras o signos. Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma, utilizamos la etiqueta <li>. Ejemplo
Vamos a crear una lista ordenada Cdigo <ol> <li>Naranjas</li> <li>Manzanas</li> <li>Bananas</li> </ol> Resultado 1. 2. 3. Naranjas Manzanas Bananas
Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc. Listas Desordenadas Exponen la lista anteponiendo un punto, cuadrado o tringulo negro. Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>. Ejemplo Cdigo <ul> <li>Tomates</li> <li>Pepinos</li> <li>Cebollas</li> </ul> Listas de definicin Se utilizan para definir trminos. etiqueta <dl>. con <dt>. Resultado

Tomates Pepinos Cebollas
Las listas de definicin se representan con la Los trminos de las mismas La definicin de esos trminos comienza con <dd>. Ejemplo
Cdigo Resultado <dl> Chocolate <dt>Chocolate</dt> Elaborado a base de cacao <dd>Elaborado a base de cacao</dd> Caramelo <dt>Caramelo</dt> Elaborado a base de azucar <dd>Elaborado a base de azcar</dd> </dl> Dentro de las etiquetas <dd> se pueden agregar imgenes, prrafos, otras listas, etc. Etiquetas y atributos de las listas Etiqu Atributos Valor etas <ol> Descripcin Define una Ej. lista <html> Listado de
ordenada.
colores bsicos: <head> <title>Listas 1. Azul ordenadas</t 2. Rojo itle> </head> 3. Amarillo <body> <p>Listado de colores bsicos:</p> <ol> <li>Azul</li > <li>Rojo</li > <li>Amarillo </li> </ol> </body> </html>
compact Desaproba do
Representa la lista de un modo ms compacto. Use las propiedades de las listas en CSS en su lugar.
start nmero del Especifica el nmero del Desaproba 1 objeto primer objeto de una do lista. Use las propiedades de las listas en CSS en su lugar. type A Desaproba a do I i 1 <ul> Define una desordenada. Algunos tipos de lista <html> chocolates: <head> <title>Listas Chocolat desordenada e amargo s</title> Chocolat </head> e con leche <body> Chocolat <p>Algunos e blanco tipos de chocolates:< Chocolat /p> Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSSen su lugar.
<ul> <li>Chocolat e amargo</li> <li>Chocolat e con leche</li> <li>Chocolat e blanco</li> <li>Chocolat e relleno</li> </ul> </body> </html> compact Desaproba do Representa la lista de un modo ms compacto. Use las propiedades de las listas en CSS en su lugar. Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSSen su lugar.
e relleno
type disc Desaproba square do circle <li>
Algunos tipos de Define el comienzo del <html> chocolates: Item. <head> <title>Listas Chocolat desordenada e amargo s</title> Chocolat </head> e con leche <body> Chocolat <p>Algunos e blanco tipos de chocolates:< Chocolat /p> e relleno <ul> <li>Chocolat e amargo</li> <li>Chocolat e con leche</li> <li>Chocolat e blanco</li> <li>Chocolat e relleno</li> </ul>
</body> </html> type disc Desaproba square do circle A a I i 1 value nmero del Establece el nmero del Desaproba objeto objeto de lista actual. do Use las propiedades de las listas en CSS en su lugar. <dl> Define una definicin. lista Ingredientes: de <html> <head> Chocolate <title>Listas Cacao de Azucar definicin</ti Leche tle> Caramelo </head> Azucar Colorante <body> s <p>Ingredie ntes:</p> <dl> <dt>Chocola te</dt> <dd>Cacao </dd> <dd>Azuca r</dd> <dd>Leche </dd> <dt>Carame lo</dt> <dd>Azuca r</dd> <dd>Colora ntes</dd> </dl> </body> </html> <dt> Trminos de los objetos <html> de lista. <head> Ingredientes: Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSSen su lugar.
<title>Listas Chocolate Cacao de Azucar definicin</ti Leche tle> Caramelo </head> Azucar Colorante <body> s <p>Ingredie ntes:</p> <dl> <dt>Chocola te</dt> <dd>Cacao </dd> <dd>Azuca r</dd> <dd>Leche </dd> <dt>Carame lo</dt> <dd>Azuca r</dd> <dd>Colora ntes</dd> </dl> </body> </html> <dd> Descripcin de objetos de lista. Ingredientes: los <html> <head> Chocolate <title>Listas Cacao de Azucar definicin</ti Leche tle> Caramelo </head> Azucar Colorante <body> s <p>Ingredie ntes:</p> <dl> <dt>Chocola te</dt> <dd>Cacao </dd> <dd>Azuca r</dd> <dd>Leche </dd> <dt>Carame lo</dt>
<dd>Azuca r</dd> <dd>Colora ntes</dd> </dl> </body> </html> <dir> Desapr obado <menu > Desapr obado Acta como <ul>.
Acta como <ul>.

Introducción Al HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introducción Al HTML

Uploaded by

Copyright:

Available Formats

Introduccin al HTML Qu es HTML? HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".

Resultado Hola a todos.

Heading 1 1</h1> Heading 2 2</h2>

<h3>Heading <h4>Heading <h5>Heading <h6>Heading </body> </html>

3</h3> Heading 3 4</h4> 5</h5> Heading 4 6</h6> Heading 5 Heading 6

prrafo.</p> prrafo. </p>

tamao Ttulo de tamao h6 tamao tamao tamao tamao

un <html> <head> <title><p>...</p></title > </head>

<body> <p>Este texto es prrafo.Este texto es un

Los comentarios visualizan

Define un salto <html> de lnea <head> <title>br lnea</title> </head> <body>

El salto lnea donde de rrir coloquemos .

Etiquetas para dar forma al texto

<plaintext> Desaprobado. Use <pre> en su lugar

<blockquote> <q> <cite> <dfn>

<a href="/http://www.virtualnauta.com/">La </body> Resultado La home de Virtualnauta EL atributo target

Descripcin Define un vnculo Direccin conectar. URL

<html> <head> <title>a href=...rel</ti tle> </head>

entre el destino del vnculo y el documento actual(vnculo inverso).

<frameset rows="valor1, valor_n"> ...el resto </frameset>

<iframe src="/http://www.virtualnauta.com" width="100%"> </iframe> Resultado

Etiquetas y atributos de los marcos Etiq ueta s <fram eset> cols

Atributos Valor Descripcin Organiza ventanas mltiples.

<iframe src="http://www.virtualn auta.com" width="50%" frameborder="0"></ifra me> </body> </html>

<html> <head> <title>iframes</title> </head> <body> <h2>Iframe bordes</h2> con

<h2>Iframe con ancho de pixels</h2>

<table> <tr> <td>contenido <td>contenido </tr> </table> Ejemplo

<th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>

<table > align left Desaprobad center o right

<tr> align right

<tr> <th>Valor align</th> <th>Explicacin </th> </tr>

nombre Sita una celda en de la categoras categora conceptuales.

height pixels Desaprobad o nowrap nowrap Desaprobad o rowspan nmero

<colgr oup> <col>

Crea un explcito columnas.

top middle bottom baseline

% pixels longitud relativa

<thea d> <tbody > <tfoot >

top middle bottom baseline

Ordenadas. Desordenadas. De definicin.

Tomates Pepinos Cebollas

type disc Desaproba square do circle <li>

Acta como <ul>.

You might also like