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".
Ejemplo
Escribe en el mismo, el siguiente texto:
Cdigo
Resultado
<html>
Hola a todos.
<head>
<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
<body bgcolor="#FFFF00">
Resultado
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
Resultado
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Prrafos
Los prrafos se definen con la etiqueta <p>.
Ejemplo
Cdigo
<html>
<head>
<title>Prrafos</title>
</head>
Resultado
Este es el primer prrafo.

<body>
<p>Este es el primer prrafo.</p>
Y este es el segundo prrafo.
<p>Y este es el segundo prrafo.</p>
</body>
</html>
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
Esto es <br> un salto de l<br>nea. 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
Resultado
<hr>
Tabla con las etiquetas bsicas

Etiquetas
Descripcin
Ej.
<h1> a <h6> Define el tamao de los encabezados

<p>
Define un prrafo

Define un comentario
<br>
Define un salto de lnea
<hr>
Define una lnea horizontal
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
href
<a>
URL
cdigo de
hreflang
lenguaje
nombre de
name
seccin
alternate
designates
stylesheet
start
next
prev
contents
index
rel
glossary
copyright
chapter
section
subsection
apendix
help
bookmark
nofollow
alternate
designates
stylesheet
start
next
prev
contents
index
rev
glossary
copyright
chapter
section
subsection
apendix
help
bookmark
coords
coordenadas
Descripcin
Define un vnculo
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.
Especifica la relacin entre el destino del

vnculo y el documento actual(vnculo inverso).
Especifica las coordenadas de la superficie que

contiene el enlace.
Ej.
shape
rect
rectangle
circ
circle
poly
polygon
_blank
_parent
target
_self
_top
type
tipo de
contenido
Define la forma del rea.

Usamos coords="izquierda, arriba, derecha,
abajo"
Usamos coords="centro x, centro y, radio"
Usamos coords="x1, y1, x2, y2, .., xn, yn"
Indica donde abrir el URL.
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
Atributos estndard de HTML

Lista de los atributos que son comunes para casi todas las etiquetas.
Atributos Comunes
En esta pgina se encuentran los atributos ms comunes de HTML.
Los dividimos en tres grupos de acuerdo a la funcin que tiene cada uno.
Atributos identificadores
Atributos de lenguaje
Atributos del teclado
Atributos identificadores
Vlido para todos los elementos excepto: base, head, html, meta, script, style, title.
Atributos
Valor
Descripcin
Asigna un nombre a un elemento.
El atributo id acta:
id
nombre
Como selector para las hojas de

estilo(CSS).
Como vnculo destino para vnculos de
hipertexto.
Como medio de hacer referencia a un
elemento en particular desde un script.
Como nombre de un elemento object
declarado.
Para procesos generales por parte del
usuario.
Asigna un nombre de clase.

El atributo class acta:
class
nombre de clase
style
estilo
title
texto
Como selector para las hojas de

estilo(CSS), cuando se asigna informacin
de estilo a un conjunto de elementos.
Para procesos generales por parte del
usuario.
Este atributo especifica informacin de estilo para

el elemento actual.
Este atributo ofrece informacin consultiva sobre
el elemento para el cual se establece.
Atributos de lenguaje
Vlido para todos los elementos excepto: applet, base, basefont, br, frame, frameset,
iframe, param, script.
Atributos
lang
Valor
cdigo de lenguaje
Descripcin
Especifica el idioma base de los valores de los
atributos y del texto contenido en un elemento.
El atributo lang es til para:
Ayudar a los motores de bsqueda.

Ayudar a los sintetizadores de voz.
Ayudar al agente de usuario a hacer
decisiones sobre separacin de palabras,
ligaduras, y espaciado.
Ayudar a los verificadores de ortografa y
gramtica.
ltr
dir
Especifica la direccin del texto.

Valores posibles:
rtl
ltr : De izquierda a derecha (left to right).

rtl : De derecha a izquierda (right to lleft).
Atributos del teclado

Vlido para los elementos: a, area, button, input, label, legend, textarea.
Atributos
Valor
accesskey
caracter
tabindex
nmero
Descripcin
Asigna una tecla de acceso a un elemento. Al
pulsar esa tecla el foco se dirige hacia ese
elemento.
Especifica el orden de tabulacin del elemento
dentro del documento actual
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
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>
Resultado
Esta tabla es Sin bordes
</table>
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
<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
Garcia
Juan
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>
<td>Pedro</td>
<td>Garcia</td>
Resultado
Nombre
Apellido
Pedro
Garca
</tr>
</table>
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.
left
align
Desaprobado
center
Alnea las tablas. Use la propiedad

position de CSS en su lugar.
right
<table>
rgb(x,x,x)
bgcolor
Desaprobado
#xxxxxx
nombre_color
Color de fondo de las tablas. Use la

propiedad background de CSS en su lugar.
Ej
border
pixels
Espesor del borde de la tabla.
pixels
Espacio entre la pared de la celda y el

contenido.
cellpadding
%
pixels
cellspacing
Espacio entre celdas.

%
void
above
below
hsides
frame
lhs
Especifica cual de los bordes alrededor de

la tabla ser visible.
rhs
vsides
box
border
none
groups
rules
rows
Especifica las lneas divisorias horizontales

y verticales.
cols
all
summary
texto
Resumen del contenido de la tabla para

navegadores sin visualizador.
%
width
Especifica el ancho de la tabla.

pixels
Define una fila.
right
left
<tr>
align
center
justify
char
Alnea horizontalmente el texto en la

celda.
rgb(x,x,x)
bgcolor
Desaprobado
#xxxxxx
Color de fondo de las celdas. Use la

nombre_color
char
carcter
pixels
charoff
%
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.
top
middle
valign
bottom
Especifica la posicin vertical de los datos

dentro de la celda.
baseline
Define una celda.
Define los encabezados de una tabla.
abbr
texto abreviado
Especifica una versin abreviada del

contenido de una celda.
left
right
align
center

celda.
justify
<td>
<th>
char
axis
nombre de la
categora
Sita una celda en categoras

conceptuales.
rgb(x,x,x)
bgcolor
Desaprobado
#xxxxxx
Color de fondo de las celdas. Use la

nombre_color
char
carcter
Especifica que un carcter acte como eje

de alineacin.
charoff
pixels

lnea.
colspan
nmero
Indica el nmero de columnas que esta

celda debe anexar.
headers
Lista de celdas de encabezado que

lista de nombres
proporcionan informacin de encabezado
de celdas
para la celda de datos actual.
height
Desaprobado
pixels
Especifica la altura de la celda. Use la

propiedad height de CSS en su lugar.
nowrap
Desaprobado
nowrap
Si est presente, deshabilita el ajuste

automtico de lneas. Use CSS en su lugar.
rowspan
nmero
Indica el nmero de filas que esta celda

debe anexar.
col
colgroup
scope
row
Este atributo especifica el conjunto de

celdas de datos para las cuales la celda de
encabezado actual proporciona
informacin de encabezado.
rowgroup
top
middle
valign
bottom

dentro de una celda.
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
Ubicacin del ttulo con respecto a la

tabla. Use la propiedad caption-side de
CSS en su lugar.
right
Crea un grupo explcito de columnas.
<colgroup>
<col>
Permite a los autores compartir atributos

entre varias columnas.
align
right
Alnea horizontalmente el contenido en el
left
grupo de columnas.
center
justify
char
char
carcter
pixels
charoff
%
span
nmero

de alineacin.
lnea.
Especifica el nmero de columnas de un
grupo de columnas.
top
middle
valign
bottom
Alnea verticalmente el contenido en el

grupo de columnas.
baseline
%
width
pixels
Define el ancho del grupo de columnas.
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
<thead>
<tbody>
<tfoot>
align
center

celda.
justify
char
char
character
pixels
charoff
%

de alineacin.
lnea.
top
middle
valign
bottom

dentro de la celda.
baseline
Etiqueta <div>
Etiqueta de apertura: <div> Etiqueta de cierre: </div>
Definicin
La etiqueta <div> se utiliza para definir una seccin dentro del documento.
Esta etiqueta se usa comunmente para agrupar un bloque de elementos, para luego
aadirle un estilo determinado.
Ejemplo
Cdigo
<div style="color:red">
<h3>Grupo 1</h3>
<p>Este bloque tiene definido el texto de color
rojo.</p>
</div>
<div style="color:green">
<h3>Grupo 2</h3>
<p>Este bloque tiene definido el texto de color
verde.</p>
</div>
Resultado
Grupo 1
Este bloque tiene definido el texto de
color rojo.
Grupo 2
Este bloque tiene definido el texto de
color verde.
Posibles Atributos de la Etiqueta <div>

Referencias:
DTD nos indica en que DTD se permite cada atributo. S=Strict, T=Transitional, and
F=Frameset.
: Internet Explorer
: Firefox
Atributos
Valor
align
left
: Google Chrome
: Opera
Descripcin
Desaprobado
: Safari
Soportado por: DTD Ej.

TF
center
right
justify
Especifica la alineacin
horizontal del contenido del
elemento div.
Atributos Estndard de la Etiqueta <div>

Estos atributos son soportados por todos los navegadores
: Internet Explorer
Atributos
class
: Firefox
Valor
nombre de la
clase
: Google Chrome
: Opera
: Safari
Descripcin
Asigna un nombre de clase.
El atributo class acta:
Como selector para las hojas de estilo(CSS), cuando

se asigna informacin de estilo a un conjunto de
elementos.
Para procesos generales por parte del usuario.
Asigna un nombre a un elemento.

El atributo id acta:
id
nombre
style
estilo
title
nombre
dir
ltr o rtl
Como selector para las hojas de estilo(CSS).

Como vnculo destino para vnculos de hipertexto.
Como medio de hacer referencia a un elemento en
particular desde un script.
Como nombre de un elemento object declarado.
Para procesos generales por parte del usuario.
Este atributo especifica informacin de estilo para el

elemento actual.
Este atributo ofrece informacin consultiva sobre el
elemento para el cual se establece.
Especifica la direccin del texto.
Valores posibles:
ltr : De izquierda a derecha (left to right).

rtl : De derecha a izquierda (right to left).
Especifica el idioma base de los valores de los atributos y

del texto contenido en un elemento.
El atributo lang es til para:
lang
cdigo de
lenguaje
Ayudar a los motores de bsqueda.

Ayudar a los sintetizadores de voz.
Ayudar al agente de usuario a hacer decisiones sobre
separacin de palabras, ligaduras, y espaciado.
Ayudar a los verificadores de ortografa y gramtica.

Introducción Al HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introducción Al HTML

Cargado por

Copyright:

Formatos disponibles

Introduccin al HTML

Qu significa HTML? y un primer ejemplo de sitio.

HTML (HyperText Markup Language) o "Lenguaje para Marcado de

Qu conocimientos previos debes poseer?

Los archivos HTML

Vamos a hacer nuestro primer sitio!

Abre el navegador Internet(Internet Explorer, Firefox, Chrome, etc.).

La estructura del sitio

Elementos y etiquetas de HTML

Las etiquetas estn encerradas entre los signos "<" y ">".

Esta es una etiqueta HTML:

El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos

Otro elemento HTML en el ejemplo es:

EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define

Qu son los atributos de las etiquetas?

Los atributos siempre van con la estructura: nombre="valor".

Un ejemplo de los atributos sera:

Un consejo con respecto al uso de minsculas.

Etiquetas bsicas de HTML

Este es el primer prrafo.

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

Trazar una lnea

Tabla con las etiquetas bsicas

<h1> a <h6> Define el tamao de los encabezados

Define un salto de lnea

Define una lnea horizontal

Los Enlaces o Links

...texto antes del destino de vnculo...

Creando un enlace a un email

Un enlace a partir de una imagen

Etiquetas y atributos de los enlaces

Especifica la relacin entre el documento actual

Especifica la relacin entre el destino del

Especifica las coordenadas de la superficie que

Define la forma del rea.

Atributos estndard de HTML

Como selector para las hojas de

Asigna un nombre de clase.

Como selector para las hojas de

Este atributo especifica informacin de estilo para

Ayudar a los motores de bsqueda.

Especifica la direccin del texto.

ltr : De izquierda a derecha (left to right).

Atributos del teclado

Caractersticas de las tablas

<td>contenido celda 2</td>

Bordes de las tablas

Veamos un ejemplo sin bordes

Encabezados de las tablas

La etiqueta <th> siempre muestra los encabezados remarcados.

Mrgenes de las celdas

Espaciado entre celdas

Etiquetas y atributos de las tablas

Alnea las tablas. Use la propiedad

Color de fondo de las tablas. Use la

Espesor del borde de la tabla.

Espacio entre la pared de la celda y el

Espacio entre celdas.

Especifica cual de los bordes alrededor de

Especifica las lneas divisorias horizontales

Resumen del contenido de la tabla para

Especifica el ancho de la tabla.

Alnea horizontalmente el texto en la

Color de fondo de las celdas. Use la