HTML

Introduccin
El HTML es un lenguaje de marcado para construir pginas web. Son las siglas de Hyper
Text Markup Language (Lenguaje de Marcado de Hipertexto)
Un lenguaje de marcado es la forma de codificar un documento para verlo en navegadores
como Internet Explorer, Firefox, Opera, Safari y otros.
No es igual hablar de un lenguaje de marcas que de un lenguaje de programacin, ya que
el primero no tiene funciones aritmticas ni variables.
Cada etiqueta muestra de una forma distinta el texto que es interpretado por un
navegador.
Pongamos un ejemplo:
Si el cdigo fuente de un prrafo es:
<p>Aqu se escribe el texto que se mostrar en el navegador.</p>
El navegador muestra de la siguiente manera:
Aqu se escribe el texto que se mostrar en el navegador.
Entonces <p>...</p> es una marca o etiqueta que muestra al texto en el navegador con
caractersticas especficas.
Color negro,
Tamao de 12 pixeles
Tipo de fuente Times; y,
Presentacin en bloques.
Las Etiquetas
Una etiqueta es una marca que el navegador reconoce e interpreta:
Una etiqueta tiene dos partes:
La primera abre y se representa de la siguiente manera:
<etiqueta>
La segunda cierra y se interpreta de la siguiente manera:
</etiqueta>
El smbolo / significa que corresponde a la segunda parte de la etiqueta y es donde se
cierra.
Estructura Bsica
La estructura bsica del cdigo de una pgina HTML es la siguiente:
<html>
<head>
</head>
<body>
</body>
</html>
Es como tener una estructura de conjuntos:
{ [ ][ ] }
Donde { representa a <html> y el signo [ representa <head> o <body>
Y el signo } est representando a </html> y ] a </head> o </body>
Es importante que notemos que es una estructura de afuera hacia adentro.
Siempre que vemos una etiqueta que abre, debe cerrarse en el mismo nivel (luego
veremos casos de etiquetas que no tienen las dos partes). No puede cerrarse en otro nivel
que no le corresponda ya que pierde su estructura.
Significado de las etiquetas bsicas
<html></html>, Esta etiqueta determina que se esta utilizando cdigo HTML para mostrar
mi pgina web.
<head></head>, Es la cabeza de mi pgina, aqu encontramos referencias del tipo HTML
que estemos utilizando, el ttulo del documento, enlaces a mis hojas de estilo, llamados a
pginas con programacin especfica como javaScript. Es decir, aqu se encuentra todo lo
que no vemos en el navegador.
Para nuestro trabajo vamos a utilizar XHTML 1.0. Esta es la versin que la w3.org
recomienda para la creacin de pginas Web. Posteriormente hablaremos de este punto.
<body></body>, Es el cuerpo de mi pgina HTML. Se encuentra todo lo que el navegador
muestra: imgenes, textos, tablas, animaciones flash, etc.
Nuevo Documento con Dreamweaver

Es necesario que tengamos instalado en nuestro computador el programa Dreamweaver.
Este es un editor de cdigo HTML que para metas didcticas va a ser necesario. Sin
embargo, si alguno de ustedes trabaja con otro editor, no hay problema. Todos los
editores HTML cumplen bien esta funcin.
En la flecha roja creamos un nuevo documento o en File/New y seleccionamos HTML
En Dreamweaver, cuando creamos un nuevo documento HTML, seleccionamos SPLIT para

dividir la regin de edicin en cdigo y diseo. Cdigo es la parte superior y diseo la
parte inferior.
En Dreamweaver, cuando creamos un nuevo documento HTML, seleccionamos SPLIT para

dividir la regin de edicin en cdigo y diseo
Como podemos observar tenemos una estructura base de cdigo HTML que es la
siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Ahora veamos qu significa cada etiqueta:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
Esta lnea nos indica que estamos utilizando XHTML 1.0 para la escritura de nuestro cdigo
y que podemos validarla en la pgina w3.org. Para validacin es importante dejar esta
programacin.
La etiqueta <html> tiene en su interior el parmetro xmlns que llama a la pgina w3.org
para su validacin.
HEAD
Dentro de <head> encontramos dos etiquetas:
Tiene informacin de codificacin de idioma. Es importante para mantener las tildes y
caracteres latinos de la escritura del espaol.
<title>Untitled Document</title>
Aqu debemos colocar el ttulo del documento que estamos creando. Por ejemplo
<title>Mi primer documento HTML</title>
Tambin es importante ya que los buscadores como Google buscan el ttulo del
documento para indexarlo en los resultados de las bsquedas que se realicen.
Las otras etiquetas ya las conocemos.
Podemos dar una estructura ms marcada si respetamos los niveles de cada etiqueta con
sangras:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title> Mi primer documento HTML </title>
</head>
<body>
</body>
</html>
Podemos ver como <meta> y <title> se encuentran al mismo nivel dentro de la etiqueta
<head>
BODY
El cuerpo del documento, <body></body>
Para poder ver informacin dentro del cuerpo tambin utilizamos marcas o etiquetas..
Iniciaremos con etiquetas para texto y la ms utilizada es la etiqueta <p></p>.
Esta etiqueta se utiliza para los prrafos. Escriban dos prrafos en la zona de diseo.
Cada vez que damos un ENTER se genera automticamente la etiqueta <p> (utilizaremos
solo la primera parte de la etiqueta para nombrarlas)
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
<head>
<title> Mi primer documento HTML </title>
</head>
<body>
<p>Este es mi primer parrafo</p>
<p>Este es mi segundo parrafo </p>
</body>
</html>
Etiquetas Fundamentales
Etiqueta p
La etiqueta <p> es interpretada por el navegador como texto de color negro, con letra
Times, de tamao 12px y su display en bloque. Esto significa que se ve cada prrafo con
una separacin de una lnea entre ellos.
Etiquetas h
Ahora revisemos las etiquetas de encabezamiento. Se utilizan para ttulos, subttulos o
pies de pgina. Tiene las mismas caractersticas que la etiqueta <p> pero cambia su
tamao y su grosor, as:<h1>, Bold de 36px
<h2>, Bold de 24px
<h3>, Bold de 18px
<h4>, Bold de 16px
<h5>, Bold de 12px
<h6>, Bold de 9px
El cdigo sera el siguiente:

<h1>Encabezado 1</h1>
Etiquetas para Listas

Para crear listas, escriba en el espacio de diseo los tems como si fueran prrafos; esto
es, dando Enter luego de cada tem.
Luego, seleccione los tems y en la barra de propiedades seleccione el tipo de lista que
necesitamos. Hay dos: Listas con vieta y las listas ordenadas.
Para mostrar la ventana de propiedades, vaya a Windows / Properties.
Podemos ver que el cdigo para listas con vieta es el siguiente:

La etiqueta <ul> determina que las listas son de vieta.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4 </li>
</ul>
La etiqueta <ol> Determina que las listas son de ordenadas.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4 </li>
</ol>
La etiqueta <li> pertenece a cada uno de los tems.
Hay otro tipo de listas que son las de definicin. No son muy utilizadas, sin embargo
conozcamos su estructura:
<dl>
<dt>Casa </dt>
<dd>Lugar donde las personas viven en familias o ncleos similares</dd>
<dt>Silla</dt>
<dd>Objeto de cuatro patas para sentarse que adems tiene un espaldar para arrimar
la espalda.</dd>
</dl>
Encontramos tres etiquetas:
<dl> es la etiqueta padre, es la que indica que vamos a construir una lista de definicin
<dt> es la que determina el trmino que va a ser explicado
<dd> es la definicin del trmino y cuenta con una sangra.
Para crear estas listas con Dreamweaver escriba el trmino, luego mrquelo y
posteriormente vaya a Insertar / HTML / Text Objects / Definition List. Cada Enter pasa a la
siguiente etiqueta.
Tablas Filas y Columnas

Las tablas son estructuras que se utilizan para tabular datos. Antiguamente se usaban para
que sean la estructura de las pginas Web. Pero la Maquetacin Web solamente se debe
realizar con CSS y no con tablas. Cualquier consulta sobre las razones de esto, por favor
comntelas en el Foro.
La estructura es la siguiente:
<table width="500" border="0">
<tr>
<td></td>
</tr>
</table>
Esta es la estructura de una tabla de una fila y una columna.
<table> es la etiqueta padre y determina su naturaleza.
<tr> corresponde a la fila
<td> corresponde a la columna
Hay que tomar en cuenta que las filas son antes que las columnas
Cada fila tiene el nmero de columnas que necesitemos en la tabla. Esto quiere decir que
si cre una tabla de dos filas y cuatro columnas, cada fila tendr cuatro columnas que
formarn las ocho celdas.
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
<td> Celda 4</td>
</tr>
<tr>
<td> Celda 5</td>
<td> Celda 6</td>
<td> Celda 7</td>
<td> Celda 8</td>
</tr>
</table>
Fjense en la distribucin de las celdas, en el cdigo y en la zona de diseo. Podemos ver

que cada columna es la celda misma. Cada vez que nos refiramos a una celda, estaremos
hablando de la etiqueta <td>.
Tambin existe la etiqueta <th>. Es un encabezamiento de celda, esto quiere decir que el
navegador va a reconocer el texto de esta etiqueta centrado en la celda y con negrilla.
<tr>
<th>Celda 1</th>
<th>Celda 2</th>
<th>Celda 3</th>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
En este ejemplo la etiqueta <th> se encuentra en toda la primera fila.
Podemos tener etiquetas <th> en la primera fila, en la primera columna y en la primera

fila y primera columna.
Para crear tablas en Dreamweaver debemos ir a Insert / Table
Aparecer el siguiente cuadro:

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

Introduccin

Nuevo Documento con Dreamweaver

En Dreamweaver, cuando creamos un nuevo documento HTML, seleccionamos SPLIT para

En Dreamweaver, cuando creamos un nuevo documento HTML, seleccionamos SPLIT para

El cdigo sera el siguiente:

Etiquetas para Listas

Podemos ver que el cdigo para listas con vieta es el siguiente:

Tablas Filas y Columnas

Fjense en la distribucin de las celdas, en el cdigo y en la zona de diseo. Podemos ver

Podemos tener etiquetas <th> en la primera fila, en la primera columna y en la primera

Vous aimerez peut-être aussi