Introducción Al HTML

Introduccin al HTML
Qu significa HTML? y un primer ejemplo de sitio.
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, abre el "Block de Notas". Si usas Mac, abre "Simpletext".
Ejemplo
Escribe en el mismo, el siguiente texto:

Cdigo <html> <head> Resultado Hola a todos.
<title>Mi primera pgina Web</title> </head> <body> Hola a todos. </body> </html>
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.
La estructura del sitio

En los prximos captulos, encontrars una explicacin sobre los distintos elementos que conforman HTML, con una completa gua de referencias y mltiples ejemplos que harn ms simple el proceso de aprendizaje.
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. <b>Este texto es en negrita</b> Hola a todos. Este texto es en 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 1</h1> <h2>Heading 2</h2> Resultado
Heading 1
Heading 2
Heading 3 Heading 4
<h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>
Heading 5 Heading 6
Prrafos
Los prrafos se definen con la etiqueta <p>.
Ejemplo Cdigo <html> <head> <title>Prrafos</title> </head> <body> <p>Este es el primer prrafo.</p> <p>Y este es el segundo prrafo.</p> </body> </html>
Resultado
Este es el primer prrafo. Y este es el segundo prrafo.
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 Resultado Cdigo Esto es <br> un salto de l<br>nea. Esto es un salto de l nea.
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 Etiquetas Descripcin <h1> a <h6> Define el tamao de los encabezados <p>  <br> <hr> Define un prrafo Define un comentario Define un salto de lnea Define una lnea horizontal
Ej.
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 en negrita</b> <big>Texto grande</big> <em>Texto enfatizado</em> <i>Texto en itlica</i> <small>Texto pequeo</small> <strong>Texto fuerte</strong> <sub>Texto subndice</sub> <sup>Texto superndice</sup> <ins>Texto subrayado</ins> <del>Texto tachado</del> <tt>Texto teletipo</tt> Resultado Texto normal Texto en negrita Texto normal Texto grande Texto normal Texto enfatizado Texto normal Texto en itlica Texto normal Texto pequeo Texto normal Texto fuerte Texto normal Texto subndice Texto normal Texto superndice Texto normal Texto subrayado Texto normal Texto tachado Texto normal Texto teletipo
Etiquetas para dar forma al texto Etiquetas Descripcin <b> <big> <em> <i> Define un texto en negrita Define un texto grande Define un texto enfatizado Define un texto en itlica
<small> Define un texto pequeo
<strong> Define un texto fuerte <sub> <sup> <ins> <del> <tt> <s> 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
<strike> Define un texto tachado. Desaprobado. Use <del> en su lugar <u> Define un texto subrayado. Desaprobado. Use <ins> en su lugar
Etiquetas de "Texto estructurado"
Estas estiquetas son usadas comunmente para mostrar cdigos de programacin.

Etiquetas <code> <kbd> <samp> <var> <pre> <listing> <plaintext> <xmp> Descripcin 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 Desaprobado. Use <pre> en su lugar
Etiquetas de citaciones y definiciones Etiquetas Descripcin
<abbr> <acronym> <address> <bdo>
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> Designa una cita larga <q> <cite> <dfn> 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 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 Menor que Mayor que
Nombre < > & " ¡ ¿ ® © € á é í ó ú ñ ü Á É Í Ó Ú Ñ
Nmero < > & " ¡ ¿ ® © € á é í ó ú ñ ü Á É Í Ó Ú Ñ
U mayscula con diresis
Ü
Ü
Si quiere ver la gua completa de todas los caracteres especiales dirijase a HTML Gua de referencia de los caracteres especiales.
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 palabra anchor(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 home de Virtualnauta</a> </body> Resultado La home de Virtualnauta
EL atributo target
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 home de Virtualnauta</a> </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 al Captulo 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.
Ejemplo Cdigo <body> <a href="/mailto: alguien@gmail.com">Mandar email</a> </body> Resultado Mandar email
mailto: nos indica la direccin email a la que va dirigida, en este ejemplo: alguien@gmail.com.
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 href="http://www.google.com/"><img src="/../graficos/google.gif"></a> </body> Resultado
Etiquetas y atributos de los enlaces Etiquetas Atributos Valor Define un vnculo <a> href hreflang URL cdigo de lenguaje
Descripcin
Ej.
Direccin URL a conectar. Especifica el lenguaje de la URL.
name
nombre de seccin alternate designates stylesheet start next prev contents index
Para crear un marcapginas dentro de un documento.
rel
glossary copyright chapter section subsection apendix help bookmark nofollow alternate designates stylesheet
Especifica la relacin entre el documento actual y el destino del vnculo.
rev start next prev
Especifica la relacin entre el destino del vnculo y el documento actual(vnculo inverso).
contents index glossary copyright chapter section subsection apendix help bookmark coords coordenadas Especifica las coordenadas de la superficie que contiene el enlace. Define la forma del rea. rect Usamos coords="izquierda, arriba, derecha, abajo" rectangle shape circ Usamos coords="centro x, centro y, radio" circle poly Usamos coords="x1, y1, x2, y2, .., xn, yn" polygon Indica donde abrir el URL. _blank target _parent _self _top type tipo de contenido El URL se abrir en una nueva ventana. El URL se abrir en el frameset padre. El URL se abrir en el mismo frame donde fue apretado. El URL se abrir en una ventana de tamao completo. Especifica el tipo de contenido a conectar.
Atributos estndard id, class, title, style, dir, lang, tabindex, accesskey
Si desea una descripcin completa, dirjase a: atributos estndard.

Eventos intrnsecos onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Si desea una descripcin completa, dirjase a: eventos intrnsecos.
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, valor2, valor_n" cols="valor3, valor4, valor_n"> ...el resto de la definicin... </frameset>
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
En este ejemplo podemos observar que la ventana del resultado nos est mostrando la pgina principal de Virtualnauta.com.
Etiquetas y atributos de los marcos Etiquetas Atributos Valor
Descripcin Organiza ventanas mltiples.
Ej
pixels cols <frameset> % * pixels rows % * Define una subventana. 0 frameborder 1 Especifica si se mostrar o no el borde alrededor del frame. URL con una larga descripcin del contenido del frame (se usa para navegadores que no soportan frames). Define el margen superior e inferior del frame. Define el margen izquierdo y derecho del frame. Define un nombre para el frame. No le permite al usuario modificar el tamao del frame. Determina la accin de la barra de Asigna el nmero y el tamao de las filas. Asigna el nmero y el tamao de las columnas.
longdesc
URL
<frame>
marginheight
pixels
marginwidth name noresize scrolling
pixels frame_name noresize yes
no auto src <noframes> URL
desplazamiento.
Archivo que va a ser mostrado en el frame. Muestra un texto para los navegadores que no soportan frames. Crea un frame en lnea que contiene otro documento.
left right align top middle bottom 0 frameborder 1 pixels height <iframe> longdesc % URL con una larga descripcin del contenido del iframe (se usa para navegadores que no soportan frames). Define el margen superior e inferior del iframe. Define el margen izquierdo y el derecho del iframe. Define un nombre para el iframe. Define la altura del iframe. Especifica si se mostrar o no el borde alrededor del iframe. Alineacin del iframe con respecto al texto.
URL
marginheight
pixels
marginwidth name
pixels nombre yes
scrolling
no auto
Determina la accin de la barra de desplazamiento.
src
URL
Archivo que va a ser mostrado en el iframe.
pixels width % Atributos estndard id, class, title, style, lang Define el ancho del iframe.
Si deseas una descripcin completa, dirgete a: atributos estndard.

Eventos intrnsecos onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Si deseas una descripcin completa, dirgete a: eventos intrnsecos.
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 celda 1</td> <td>contenido celda 2</td> </tr> </table> Ejemplo
Vamos a crear una pequea tabla para ver su comportamiento
Cdigo <table border="1px"> <tr> <td>Nombre</td> <td>Apellido</td> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>
Resultado Nombre Apellido Pedro Garcia
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"> Resultado <tr> <td>Borde</td> Borde 3 pixels <td>3 pixels</td> </tr> </table>
Veamos un ejemplo sin bordes

Ejemplo Cdigo <table> <tr> <td>Esta tabla es</td> <td>Sin bordes</td> </tr> </table> Resultado Esta tabla es Sin bordes
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 border="1px"> <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 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 <table border="1px" cellpadding="20px"> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> Resultado
Nombre
Apellido
<td>Pedro</td> <td>Garcia</td> </tr> </table>
Pedro
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 celda y celda. El mismo est definido con el atributo cellspacing.
Ejemplo Cdigo <table border="1px" cellspacing="15px"> <tr> <th>Nombre</th> <th>Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table>
Resultado Nombre Apellido 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 Etiquetas Atributos Valor
Descripcin Define una tabla.
Ej
left <table> align Desaprobado center right Alnea las tablas. Use la propiedad position de CSS en su lugar.
rgb(x,x,x) bgcolor Desaprobado #xxxxxx nombre_color border pixels pixels cellpadding % pixels cellspacing % void above below hsides frame lhs rhs vsides box border none groups rules rows cols all summary width texto % Resumen del contenido de la tabla para navegadores sin visualizador. Especifica el ancho de la tabla. Especifica las lneas divisorias horizontales y verticales. Especifica cual de los bordes alrededor de la tabla ser visible. Espacio entre celdas. Espesor del borde de la tabla. Espacio entre la pared de la celda y el contenido. Color de fondo de las tablas. Use la propiedad background de CSS en su lugar.
pixels Define una fila. right left align center justify char rgb(x,x,x) bgcolor Desaprobado <tr> #xxxxxx nombre_color 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. Color de fondo de las celdas. Use la propiedad background de CSS en su lugar. Alnea horizontalmente el texto en la celda.
char
carcter
pixels charoff % top middle valign bottom baseline
Especifica la posicin vertical de los datos dentro de la celda.
Define una celda. Define los encabezados de una tabla. abbr texto abreviado left align right center Alnea horizontalmente el texto en la celda. Especifica una versin abreviada del contenido de una celda.
<td> <th>
justify char axis nombre de la categora rgb(x,x,x) bgcolor Desaprobado #xxxxxx nombre_color 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 columnas que esta celda debe anexar. Color de fondo de las celdas. Use la propiedad background de CSS en su lugar. Sita una celda en categoras conceptuales.
char
carcter
pixels charoff % colspan nmero
headers
Lista de celdas de encabezado que lista de nombres proporcionan informacin de encabezado de celdas para la celda de datos actual. pixels 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 filas que esta celda debe anexar.
height Desaprobado nowrap Desaprobado rowspan
nowrap
nmero col colgroup
scope row rowgroup top valign middle
Este atributo especifica el conjunto de celdas de datos para las cuales la celda de encabezado actual proporciona informacin de encabezado.
Especifica la posicin vertical de los datos dentro de una celda.
bottom baseline width Desaprobado pixels % Especifica el ancho de la celda. Use la propiedad width de CSS en su lugar. Define el ttulo de la tabla. top <caption> align Desaprobado bottom left right Crea un grupo explcito de columnas. Permite a los autores compartir atributos entre varias columnas. right left align center justify char <colgroup> <col> 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 horizontalmente el contenido en el grupo de columnas. Ubicacin del ttulo con respecto a la tabla. Use la propiedad caption-side de CSS en su lugar.
char
carcter
pixels charoff % span nmero top valign middle bottom
Alnea verticalmente el contenido en el grupo de columnas.
baseline % width pixels longitud relativa Las filas de una tabla pueden agruparse en una cabecera de tabla <thead>, un pie de tabla <tfoot> y una o ms secciones de cuerpo de tabla <tbody>. right left align center justify <thead> <tbody> <tfoot> char 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. Alnea horizontalmente el texto en la celda. Define el ancho del grupo de columnas.
char
character
pixels charoff % top middle valign bottom baseline Atributos estndard id, class, title, style, dir, lang
Especifica la posicin vertical de los datos dentro de la celda.
Si desea una descripcin completa, dirjase a: atributos estndard.

Eventos intrnsecos onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Si desea una descripcin completa, dirjase a: eventos intrnsecos.

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 significa HTML? y un primer ejemplo de sitio.

Qu conocimientos previos debes poseer?

Los archivos HTML

Vamos a hacer nuestro primer sitio!

Escribe en el mismo, el siguiente texto:

La estructura del sitio

Elementos y etiquetas de HTML

Esta es una etiqueta HTML:

Qu son los atributos de las etiquetas?

Un ejemplo de los atributos sera:

Un consejo con respecto al uso de minsculas.

Etiquetas bsicas de HTML

Este es el primer prrafo. Y este es el segundo prrafo.

* Nota que el signo de exclamacin se coloca solo al principio del cdigo.

Trazar una lnea

Formato de texto con HTML

Formato bsico del texto

<small> Define un texto pequeo

Etiquetas de "Texto estructurado"

Estas estiquetas son usadas comunmente para mostrar cdigos de programacin.

Etiquetas de citaciones y definiciones Etiquetas Descripcin

<abbr> <acronym> <address> <bdo>

Caracteres Especiales en HTML

U mayscula con diresis

Los Enlaces o Links

Sintaxis <a atributo="valor">Texto del enlace</a> Ejemplo

Vamos a crear un enlace hacia la home de Virtualnauta.com

Vamos a abrir el documento en una nueva pgina del navegador.

O en caso que el enlace est definido en el mismo documento:

Creando un enlace a un email

Un enlace a partir de una imagen

Direccin URL a conectar. Especifica el lenguaje de la URL.

Para crear un marcapginas dentro de un documento.

Especifica la relacin entre el documento actual y el destino del vnculo.

rev start next prev

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

Si desea una descripcin completa, dirjase a: atributos estndard.

Si desea una descripcin completa, dirjase a: eventos intrnsecos.

Nota: La etiqueta <frame> no debe llevar etiqueta de cierre

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

Etiquetas y atributos de los marcos Etiquetas Atributos Valor

Descripcin Organiza ventanas mltiples.

marginwidth name noresize scrolling

pixels frame_name noresize yes

no auto src <noframes> URL

pixels nombre yes

Determina la accin de la barra de desplazamiento.

Archivo que va a ser mostrado en el iframe.

Si deseas una descripcin completa, dirgete a: atributos estndard.

Si deseas una descripcin completa, dirgete a: eventos intrnsecos.

Vamos a crear una pequea tabla para ver su comportamiento

Resultado Nombre Apellido Pedro Garcia

Bordes de las tablas

Veamos un ejemplo sin bordes

Encabezados de las tablas

Resultado Nombre Apellido Pedro Juan Garcia Perez

La etiqueta <th> siempre muestra los encabezados remarcados.

Mrgenes de las celdas

<td>Pedro</td> <td>Garcia</td> </tr> </table>

Espaciado entre celdas

Resultado Nombre Apellido Pedro Garcia

Etiquetas y atributos de las tablas Etiquetas Atributos Valor