Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Lenguaje de Marcado.
HTML
Introduccion html
La estructura bsica de una pgina HTML es:
LISTAS
TABLAS
Contenido de la cabecera de la pgina.
Sintaxis para caracteres especiales.
Formularios.
Frames
Anidamiento de frameset
Iframes
Doctype
Elementos y propiedades de HTML que no se deben
usar
Pgina 1
Unidad II.
Lenguaje de Marcado.
Introduccion html
HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.
Este lenguaje est constituido de elementos que el navegador interpreta y las
despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos
para disponer imgenes sobre una pgina, hipervnculos que nos permiten
dirigirnos a otra pgina, listas, tablas para tabular datos, etc.
Para poder crear una pgina HTML se requiere un simple editor de texto
(utilizaremos notepad) y un navegador de internet (IExplorer, FireFox etc.),
Lo ms importante es que en cada concepto desarrollemos los ejercicios
propuestos y modifique los que se presentan ya resueltos.
Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca
antes trabaj con el mismo.
Las instrucciones HTML estn encerradas entre los caracteres: < y >.
Muchos elementos HTML requieren una marca de comienzo y otra de finalizacin.
Todo aquello que est fuera de las marcas del lenguaje se imprime en la pantalla
(dentro del navegador).
Pgina 2
Unidad II.
Lenguaje de Marcado.
Pgina 3
Unidad II.
Lenguaje de Marcado.
<body>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un
lenguaje de programacin para trabajar con base de datos relacionales como
MySQL, Oracle, etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br>
MySQL permite crear base de datos y tablas, insertar datos, modificarlos,
eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc.,
resumiendo: administrar bases de datos.
</p>
<p>
En este curso utilizaremos MySQL embebido en PHP para explotar bases de
datos.
</p>
</body>
</html>
Tenemos en esta pgina HTML dos prrafos, cuando el navegador interpreta esta
pgina, separa los contenidos de los dos prrafos con un espacio horizontal.
Adems el primer prrafo contiene varios saltos de lnea. Normalmente uno
agrupa en prrafos para dar ms sentido a nuestro escrito.
Cuando modificamos la ventana del navegador los prrafos se acomodan
automticamente de acuerdo al ancho de la ventana.
<h1>Titulo</h1>
Otros elementos HTML muy utilizados son para indicar los ttulos, para esto
contamos con los elementos:
<h1><h2><h3><h4><h5><h6>
El ttulo de mayor nivel es <h1>, es decir el que tienen una fuente mayor (veremos
que es el navegador el responsable de definir el tamao de la fuente, ms
adelante podr ver que uno puede modificar la fuente, tamao, color etc.)
Segn la importancia del ttulo utilizaremos alguno de estos elementos HTML.
Requiere la marca de cerrado del ttulo con la barra invertida como hemos visto.
Confeccionaremos una pgina que contenga un ttulo de primer nivel <h1> y luego
dos ttulos de nivel <h2>. Definiremos un prrafo para cada ttulo de segundo
nivel.
Programacin Web. ISC
Pgina 4
Unidad II.
Lenguaje de Marcado.
<html>
<head>
</head>
<body>
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
<p>
se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de
caracteres.
Se coloca entre comillas (simples): 'Hola'.<br>
El tipo "varchar" define una cadena de longitud variable en la cual determinamos
el mximo de caracteres. Puede guardar hasta 255 caracteres. Para almacenar
cadenas de hasta 30 caracteres, definimos un campo de tipo varchar(30).
</p>
<h2>int</h2>
<p>
Se usa para guardar valores numricos enteros, de -2000000000 a 2000000000
aproximadamente.
<br> Definimos campos de este tipo cuando queremos representar cantidades.
</p>
</body>
</html>
Cada ttulo aparece siempre en una lnea distinta, no importa si lo tipiamos
seguido en el archivo, es decir el resultado ser igual si hacemos:
<strong>resaltado fuerte</strong>
<em>resaltado dbil </em>
Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una
palabra o conjunto de palabras.
As como tenemos seis niveles de ttulos para enfatizar un bloque contamos con
dos elementos que son (<em> <strong>)
El elemento de mayor fuerza de nfasis es strong y le sigue em
Veamos un ejemplo del empleo de estos dos elementos HTML:
<html>
Programacin Web. ISC
Pgina 5
Unidad II.
Lenguaje de Marcado.
<head>
</head>
<body>
<p><strong>Instituto Tecnologico de Hermosillo</strong> en MySQL</p>
<p><em>Fundacin </em>: El Instituto se fundo en el ao de 1975.</p>
<p><em>Mision</em>: Su Mision es la de ofrecer educacin de calidad a nivel
superior en el area de ciencias exactas, en las ingenierias.</p>
<p><em>Vision</em>: Ser una Institucin de Calidad a nivel mundial, ofertando
educacin a nivel superior de calidad.</p>
</body>
</html>
<a href="hipervinculopagina.html">Etqueta</a>
El elemento ms importante que tiene una pgina de internet es el hipervnculo,
estos nos permiten cargar otra pgina en el navegador. Esto es lo que hace
diferente la pgina de un libro con la pgina de un sitio en internet. Normalmente
un libro lo recorremos en forma secuencial, pero un sitio de internet podemos
disponer estos enlaces entre un conjunto de pginas y luego tener distintas
alternativas de recorrido.
Normalmente un navegador al encontrar esta marca muestra un texto subrayado,
y al hacer clic con el mouse sobre ste el navegador carga la pgina indicada por
dicho hipervnculo.
Primero veremos cul es la sintaxis para disponer un hipervnculo a una pgina
que se encuentra en el mismo sitio (es decir otra pgina que hemos desarrollado
nosotros).
La marca de hipervnculo a otra pgina del mismo sitio tiene la siguiente sintaxis:
<a href="pagina2.html">Noticias</a>
Como vemos, se trata de otro elemento HTML que tiene comienzo de marca y fin
de marca. Lo que se encuentra entre el comienzo de marca y el fin de la marca es
el texto que aparece en la pgina (normalmente subrayado).
Lo nuevo que aparece en este elemento es el concepto de una propiedad. Una
propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor.
Programacin Web. ISC
Pgina 6
Unidad II.
Lenguaje de Marcado.
Pgina 7
Unidad II.
Lenguaje de Marcado.
Pgina 8
Unidad II.
Lenguaje de Marcado.
En la propiedad src indicamos el nombre del archivo que contiene la imagen (en
un servidor Linux es sensible a maysculas y minsculas por lo que recomiendo
que siempre utilicen minsculas para los nombres de archivos).
Como la imagen se encuentra en el mismo directorio donde se almacena la pgina
HTML, con indicar el nombre de archivo basta (no es necesario indicar ninguna
ruta de carpetas).
Otra propiedad obligatoria es alt, donde disponemos un texto que vern los
usuarios que visiten el sitio con un navegador que slo permite texto (o con un
navegador que tenga desactivada la opcin de descarga de imgenes). El texto
debe describir el contenido de la imagen.
Confeccionemos una pgina que muestre una imagen llamada foto1.jpg (La
imagen se encuentra almacenada en el servidor en la misma carpeta donde se
localiza esta pgina)
<html>
<head>
</head>
<body>
<img src="ith.jpg" alt="Instituto Tecnolgico de Hermosillo">
</body>
</html>
Si la imagen se encuentra en una subcarpeta llamada imgenes, luego la sintaxis
para recuperarla ser:
<img src="imagenes/ith.jpg" alt=" Instituto Tecnolgico de Hermosillo ">
Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /
Si la imagen se encuentra en una carpeta padre de donde se encuentra la pgina
HTML luego la sintaxis ser:
<img src="../ith.jpg" alt=" Instituto Tecnolgico de Hermosillo ">
Es decir, le antecedemos .. y la barra / al nombre de la imagen
Si queremos subir dos carpetas luego escribimos:
<img src="../../ ith.jpg " alt=" Instituto Tecnolgico de Hermosillo ">
Programacin Web. ISC
Pgina 9
Unidad II.
Lenguaje de Marcado.
Por ltimo, si queremos acceder a una imagen que se encuentra en una carpeta
llamada imagenes pero que est al mismo nivel:
<img src="../imagenes/ ith.jpg " alt=" Instituto Tecnolgico de Hermosillo ">
Como ya conocemos los hipervnculos y como insertar imgenes en nuestra
pgina, ahora podemos implementar un hipervnculo pero en vez de mostrar un
texto mostraremos una imagen.
La solucin es simple y consiste en disponer la marca <img> encerrada entre la
marca de comienzo y fin del enlace (<a>)
Confeccionemos una pgina que muestre dos imgenes (ith.jpg y ith1.jpg) como
hipervnculos. Al ser presionados llamar a otra pgina.
Las imgenes se encuentran en una carpeta llamada imgenes que depende
directamente de la raz del sitio:
<html>
<head>
</head>
<body>
<h2>Presione la imagen del escudo del ith o la del edificio principal.</h2>
<a href="paginah1.html"><img src="/imagenes/ith.jpg"
alt="Escudo del ITH"></a>
<br>
<a href="paginag2.html"><img src="/imagenes/logo.jpg"
alt="Logo del ITH"></a>
</body>
</html>
Como podemos observar insertamos la marca HTML img en el lugar donde
disponamos el texto del hipervnculo. Eso es todo.
Lo que debe quedar bien en claro es que las imgenes se encuentran en un
directorio llamado imgenes en la raz del sitio (luego para indicar la referencia al
archivo lo hacemos antecediendo la barra invertida / con lo que hacemos
referencia a que partimos desde la raz del sitio) en una carpeta llamada imgenes
(/imagenes/ith.jpg)
Programacin Web. ISC
Pgina 10
Unidad II.
Lenguaje de Marcado.
El elemento "a" tiene una propiedad target que nos permite indicar que la
referencia del recurso sea abierto en otra pgina.
Esta propiedad se llama target y debemos asignarle el valor "_blank" para indicar
que el recurso sea abierto en otra ventana.
Confeccionemos una pgina que contenga dos hipervnculos, el primero abra el
sitio en el mismo navegador y el segundo en otra instancia del navegador:
<html>
<head>
</head>
<body>
<h1>Apertura de enlaces en el mismo navegador y en otra instancia del
navegador</h1>
<p>
<a href="http://www.ith.mx">Instituto tecnolgico de Hermosillo</a>
<br>
<a href="http://www.dgest.gob.mx/" target="_blank">Direccin General de
Educacin Superior </a>
</p>
</body>
</html>
<a name="nombreancla"></a>
Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de la
pgina para poder posteriormente disponer un hipervnculo a dicha marca.
Es una prctica comn cuando queremos desplazarnos dentro de una pgina de
gran tamao. Se disponen hipervnculos a diferentes anclas.
La sintaxis para definir un ancla es:
<a name="nombreancla"></a>
No debemos confundir un ancla con un hipervnculo, ms all que se utiliza el
mismo elemento a. Para un ancla inicializamos la propiedad name con el nombre
del ancla.
Programacin Web. ISC
Pgina 11
Unidad II.
Lenguaje de Marcado.
Un ancla se la define en una parte de la pgina que queremos que el cliente llegue
a partir de un hipervnculo.
Ahora la sintaxis para ir a un ancla desde un hipervnculo es la siguiente:
<a href="#nombreancla">Introduccin</a><br>
Vemos que en la propiedad href indicamos el nombre del ancla.
Haremos un ejemplo, donde dispondremos una lista de hipervnculos que llaman a
una serie de anclas dispuestas en la misma pgina:
<html>
<head>
</head>
<body>
<h1>Tutorial de MySQL</h1>
<a href="#introduccion">Introduccin</a><br>
<a href="#mostrarbasedatos">show databases</a><br>
<a href="#creaciontabla">Creacin de una tabla y mostrar
sus campos</a><br>
<a href="#cargarregistros">Carga de registros a una tabla y su
recuperacin</a><br>
<a name="introduccion"></a>
<h2>Introduccin</h2>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un
lenguaje de programacion para trabajar con base de datos relacionales como
MySQL, Oracle, etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br>
MySQL permite crear base de datos y tablas, insertar datos, modificarlos,
eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc.,
resumiendo: administrar bases de datos.<br>
Ingresando instrucciones en la lnea de comandos o embebidas en un lenguaje
como PHP nos comunicamos con el servidor. Cada sentencia debe acabar con
punto y coma (;).<br>
La sensibilidad a maysculas y minsculas, es decir, si hace diferencia entre ellas,
depende del sistema operativo, Windows no es sensible, pero Linux si. Por
ejemplo Windows interpreta igualmente las siguientes sentencias:<br>
Programacin Web. ISC
Pgina 12
Unidad II.
Lenguaje de Marcado.
Pgina 13
Unidad II.
Lenguaje de Marcado.
Pgina 14
Unidad II.
Lenguaje de Marcado.
Paginah3.html
<html>
<head>
</head>
<body>
<a name="introduction"></a>
<h2>Introduccin</h2>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un
lenguaje de programacion para trabajar con base de datos relacionales como
MySQL, Oracle, etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br>
MySQL permite crear base de datos y tablas, insertar datos, modificarlos,
eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc.,
resumiendo: administrar bases de datos.<br>
Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje
como PHP nos comunicamos con el servidor. Cada sentencia debe acabar con
punto y coma (;).<br>
La sensibilidad a maysculas y minsculas, es decir, si hace diferencia entre ellas,
depende del sistema operativo, Windows no es sensible, pero Linux
si. Por ejemplo Windows interpreta igualmente las siguientes sentencias:<br>
create database administracion;<br>
Create DataBase administracion;<br>
Pero Linux interpretar como un error la segunda.<br>
Se recomienda usar siempre minsculas. Es ms el sitio mysqlya.com.ar est
instalado sobre un servidor Linux por lo que todos los ejercicios debern
respetarse maysculas y minsculas.
</p>
<a href="pagina1.html">Retornar</a><br>
<a name="mostrarbasedatos"></a>
<h2>show databases</h2>
<p>
Una base de datos es un conjunto de tablas.<br>
Una base de datos tiene un nombre con el cual accederemos a ella.<br>
Vamos a trabajar en una base de datos ya creada en el sitio, llamada
"administracion".<br>
Para que el servidor nos muestre las bases de datos existentes, se lo solicitamos
enviando la instruccin:<br>show databases;<br>
Programacin Web. ISC
Pgina 15
Unidad II.
Lenguaje de Marcado.
Nos mostrar los nombres de las bases de datos, debe aparecer en este sitio
"administracion".<br>
</p>
<a href="pagina1.html">Retornar</a><br>
<a name="creaciontabla"></a>
<h2>Creacin de una tabla y mostrar sus campos</h2>
<p>
Una base de datos almacena sus datos en tablas.<br>
Una tabla es una estructura de datos que organiza los datos en columnas y filas;
cada columna es un campo (o atributo) y cada fila, un registro. La interseccin de
una columna con una fila, contiene un dato especfico, un solo valor.<br>
Cada registro contiene un dato por cada columna de la tabla.<br>
Cada campo (columna) debe tener un nombre. El nombre del campo hace
referencia a la informacin que almacenar.<br>
Cada campo (columna) tambin debe definir el tipo de dato que almacenar.<br>
</p>
<a href="pagina1.html">Retornar</a><br>
<a name="cargarregistros"></a>
<h2>Carga de registros a una tabla y su recuperacin</h2>
<p>
Usamos "insert into". Especificamos los nombres de los campos entre parntesis y
separados por comas y luego los valores para cada campo, tambin entre
parntesis y separados por comas.<br>
Es importante ingresar los valores en el mismo orden en que se nombran los
campos, si ingresamos los datos en otro orden, no aparece un mensaje de error y
los datos se guardan de modo incorrecto.<br>
Note que los datos ingresados, como corresponden a campos de cadenas de
caracteres se colocan entre comillas simples. Las comillas simples son
OBLIGATORIAS.
</p>
<a href="pagina1.html">Retornar</a><br>
</body>
</html>
Pgina 16
Unidad II.
Lenguaje de Marcado.
<li>informacion</li>
</ol>
Este elemento HTML es til cuando debemos numerar una serie de objetos.
Veamos con un ejemplo una lista ordenada para conocer su sintaxis. Mostraremos
la lista de alumnos:
<html>
<head>
</head>
<body>
<ol>
<li>AGUILA ZAZUETA JAVIER ALFONSO</li>
<li>ANDRADE CAMPILLO ALLAN RAYMUNDO</li>
<li>ARVIZU BEJARANO CASSANDRA LIZETH</li>
</ol>
</body>
</html>
La marca <ol> y su correspondiente marca de cerrado es </ol>
En su interior cada uno de los items se los dispone con el elemento li, que tambin
tiene la marca de comienzo <li> y la marca de fin de item </li>
Luego se encarga el navegador de numerar cada uno de los items contenidos en
la lista, tengamos en cuenta que se numeran porque se trata de una lista
ordenada.
Lista no ordenada
Una lista no ordenada como su nombre lo indica no utiliza un nmero delante de
cada items sino un pequeo smbolo grfico.
La forma de implementar este tipo de listas es idntica a las listas ordenadas.
Veamos un ejemplo donde implementamos una lista no ordenada:
<html>
<head>
</head>
Programacin Web. ISC
Pgina 17
Unidad II.
Lenguaje de Marcado.
<body>
<h2>Lenguajes de programacin.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
</html>
Lista de definicin
Como su nombre lo indica se utiliza para asociar un trmino y la definicin del
mismo. El navegador se encarga de destacar y separa el trmino y su definicin.
Crearemos una lista con la definicin de varios lenguajes de programacin:
<html>
<head>
</head>
<body>
<dl>
<dt>C++</dt>
<dd>Es un lenguaje de programacin, diseado a mediados de los aos 1980, por
Bjarne Stroustrup, como extensin del lenguaje de programacin C.</dd>
<dt>Java</dt>
<dd>Es un lenguaje de programacin orientado a objetos desarrollado por Sun
Microsystems a principios de los 90.</dd>
<dt>JavaScript</dt>
<dd>Es un lenguaje interpretado, es decir, que no requiere compilacin, utilizado
principalmente en pginas web, con una sintaxis semejante a la del lenguaje
C.</dd>
</dl>
</body>
</html>
Como podemos observar intervienen ms marcas que en los otros dos tipos de
listas. Las marcas que encierran a la lista son <dl> (Definition List) y </dl>
Programacin Web. ISC
Pgina 18
Unidad II.
Lenguaje de Marcado.
Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd>
(Definition Description)
Listas anidadas.
El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar
listas de distinto tipo, por ejemplo podemos tener una lista no ordenada y uno de
los item puede ser una lista ordenada.
Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y
cerrado de las marcas
Implementaremos una pgina que enumere una serie de paises en una lista
ordenada y luego en cada pais dispondremos una lista de hipervnculos de
peridicos de dicho pais:
<html>
<head>
</head>
<body>
<ol>
<li>Sonora
<ul>
<li><a href="http://www.ith.mx">Tecnologico de Hermosillo</a></li>
<li><a href="http:// www.itnogales.org"> Tecnologico de Nogales</a></li>
<li><a href="http://www.ithua.edu.mx">Tecnologico de Huatabampo</a></li>
</ul>
</li>
<li>Baja California
<ul>
<li><a href="http://www.itmexicali.edu.mx">Tecnologico de Mexicali</a></li>
<li><a href="http://www.tectijuana.mx">Tecnologico de Tijuana</a></li>
<li><a href="http://www.itensenada.edu.mx">Tecnologico de Ensenada</a></li>
</ul>
</li>
<li>Sinaloa
<ul>
<li><a href="http://www.itmochis.edu.mx">Tecnologico de los Mochis</a></li>
<li><a href="http://www.itculiacan.edu.mx">Tecnologico de Culiacn</a></li>
</ul>
Programacin Web. ISC
Pgina 19
Unidad II.
Lenguaje de Marcado.
</li>
</ol>
</body>
</html>
Pgina 20
Unidad II.
Lenguaje de Marcado.
<head>
</head>
<body>
<table border="1">
<tr>
<td>Tecnolgico de Hermosillo</td><td>3800 Alumnos</td>
</tr>
<tr>
<td>Tecnolgico de Nogales</td><td>1080 Alumnos</td>
</tr>
<tr>
<td>Tecnolgico de Huatabampo</td><td>795 Alumnos</td>
</tr>
</table>
</body>
</html>
Lo primero que aparece es la apertura del elemento table, donde inicializamos la
propiedad border con el valor 1, con esto el contorno de cada celda ser visible
(pruebe de asignarle el valor cero y otros valores superiores a 1)
<table border="1">
Seguidamente viene la apertura de la primera fila de la tabla con el elemento tr:
<tr>
Continuamos con la apertura de la primera celda de la primera fila de la tabla:
<td>
Luego el dato propiamente dicho de la celda:
La primer caracterstica que le vamos a agregar a una tabla son las celdas de
encabezado. Normalmente la primer fila de una tabla puede representar los ttulos
para cada columna.
Para indicar que se trata de una celda de encabezado utilizamos el elemento <th>
en lugar de <td>
El navegador representa distinto las celdas de datos y las celdas de
encabezamiento.
Programacin Web. ISC
Pgina 21
Unidad II.
Lenguaje de Marcado.
Pgina 22
Unidad II.
Lenguaje de Marcado.
Pgina 23
Unidad II.
Lenguaje de Marcado.
Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad
rowspan con el valor 3:
<td colspan="3">Facturacin de los ltimos tres meses</td>
Si por el contrario queremos que una celda se extienda a nivel de filas luego
hacemos:
<td rowspan="3">Secciones</td>
Veamos un ejemplo empleando el concepto de combinacin de celdas:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturacin de los ltimos tres
meses</th>
</tr>
<tr>
<td>Discos Duros</td><td>$ 23,000</td><td>$27,200</td><td>$ 26,000</td>
</tr>
<tr>
<td>CPU</td><td>$ 73,000</td><td>$ 67,300</td><td>$ 51,000</td>
</tr>
<tr>
<td>Monitores</td><td>$ 53,000</td><td>$ 72,000</td><td>$ 88,000</td>
</tr>
</table>
</body>
</html>
Veamos como definimos la primera fila de la tabla:
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturacin
de los ltimos tres meses</th>
</tr>
Programacin Web. ISC
Pgina 24
Unidad II.
Lenguaje de Marcado.
Pgina 25
Unidad II.
Lenguaje de Marcado.
Paginah4.html
<html>
<head>
<title>Ttulo de la segunda pgina</title>
</head>
<body>
<h1>Prueba del elemento title (segunda pgina)</h1>
<a href="pagina19.html">Ir a la primer pgina</a>
</body>
</html>
Contenido de la cabecera de la pgina
Un elemento que no se visualiza es el meta, que tiene por objetivo especificar
informacin sobre el propio documento.
Veamos las dos propiedades fundamentales de la marca meta y los valores ms
comunes con lo que podemos inicializarlos:
<meta name="nombre de la propiedad" content="valor de la propiedad">
Name almacena el nombre de la propiedad y content el valor de la propiedad.
No existe ninguna especificacin de la W3C que defina los valores posibles para el
atributo name, si bien existen algunos que son estandares de facto (description,
keywords, author etc.)
Veamos las propiedades y valores ms comunes
<meta name="keywords" content="html, Instituto Tecnolgico de Hermosillo">
Los buscadores tienen en cuenta los metadatos. Si en la pgina inicializamos la
propiedad name del elemento meta con el valor keywords luego buscar en la
propiedad content las distintas palabras claves ms representativas para dicha
pgina. Esto es muy til para posicionar nuestra pgina segn el contenido que
provee.
Veamos otras inicializaciones del elemento meta:
Programacin Web. ISC
Pgina 26
Unidad II.
Lenguaje de Marcado.
Pgina 27
Unidad II.
Lenguaje de Marcado.
<body>
<!-- Corresponden a datos del ao 2010. Modificar a principios de 2011-->
<table border="6">
<tr>
<th rowspan="4">Recursos</th><th colspan="4">Facturacin de los ltimos tres
meses</th>
</tr>
<tr>
<td>Discos Duros</td><td>$ 23,000</td><td>$27,200</td><td>$ 26,000</td>
</tr>
<tr>
<td>CPU</td><td>$ 73,000</td><td>$ 67,300</td><td>$ 51,000</td>
</tr>
<tr>
<td>Monitores</td><td>$ 53,000</td><td>$ 72,000</td><td>$ 88,000</td>
</tr>
</table>
</body>
</html>
Un comentario puede abarcar varias lneas:
<!-comentarios - comentarios - comentarios
comentarios - comentarios - comentarios
comentarios - comentarios - comentarios
comentarios - comentarios - comentarios
comentarios - comentarios - comentarios
comentarios - comentarios - comentarios
comentarios - comentarios - comentarios
comentarios - comentarios - comentarios
-->
De todos modos hay que tener en cuenta que cuando un navegador pide la pgina
a un sitio el servidor enva el archivo HTML completo, es decir con los
comentarios. Los comentarios consumen ancho de banda del servidor.
Pgina 28
Unidad II.
Lenguaje de Marcado.
Como escribir dentro de una pgina los caracteres: < y >. Veremos que no los
podemos colocar directamente ya que el navegador los confundira con los
caracteres que se utilizan para las marcas HTML.
Marca registrada
Derecho de autor
Euro
minscula
mayscula
Nombre
<
>
&
"
¡
¿
®
©
€
á
é
í
ó
ú
ñ
ü
Á
É
Í
Ó
Ú
Ñ
Ü
Nmero
 
<
>
&
"
¡
¿
®
©
€
á
é
í
ó
ú
ñ
ü
Á
É
Í
Ó
Ú
Ñ
Ü
Pgina 29
Unidad II.
Lenguaje de Marcado.
<html>
<head>
<title>Ttulo de la primer pgina</title>
</head>
<body>
<h1>
10+x*y < 12*z
</h1>
</body>
</html>
Pgina 30
Unidad II.
Lenguaje de Marcado.
Para crear un formulario debemos utilizar el elemento form, que tiene marca de
comienzo y fin. Dentro de la marca form veremos otros elementos para crear
botones, editores de lnea, cuadros de chequeo, radios de seleccin etc.
Confeccionaremos un formulario para el ingreso de nuestro nombre y un botn
para el envo del dato ingresado al servidor:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Veamos detenidamente la estructura de un formulario elemental, lo primero la
apertura de la marca form donde debemos definir dos propiedades (action y
method):
<form action="/registrardatos.php" method="post">
La propiedad action se inicializa con el nombre de la pgina que procesar los
datos en el servidor. Como no conocemos la sintaxis de un lenguaje de servidor
almacen en la raiz de este sitio una pgina codificada en PHP que recibe los
datos del formulario y los imprime en una nueva pgina (recordar que en este
unidad no se ve como programar en el servidor)
Todo los formularios que usted implementar como ejercicios deben llamar a esta
pgina: "/registrardatos.php" ms adelante cuando conozca un lenguaje de
servidor podr almacenarlos en una base de datos, consultar otros datos,
modificar datos existentes etc.
La segunda propiedad que debemos inicializar es method. Esta propiedad puede
almacenar nicamente dos valores (post o get)
Programacin Web. ISC
Pgina 31
Unidad II.
Lenguaje de Marcado.
Pgina 32
Unidad II.
Lenguaje de Marcado.
Pgina 33
Unidad II.
Lenguaje de Marcado.
Luego para definir un botn que permita borrar todos los datos ingresados hasta el
momento lo hacemos mediante:
<input type="reset" value="borrar">
Es decir inicializamos la propiedad type con el valor "reset", con esto sabe el
navegador que cuando dicho botn sea presionado debe borrar todos los
controles de ingreso de datos de dicho formulario.
Otra cosa que hay que tener en cuenta que la propiedad name de cada elemento
input debe tener un nombre distinto (esto debido a que en el servidor se lo rescata
a partir de este nombre)
Formulario - textarea
El elemento de tipo textarea nos permite el ingreso de varias lneas a diferencia
del cuadro de texto (input/text)
Es muy utilizado cuando queremos ingresar un comentario de una longitud de
caracteres grande.
Confeccionemos un formulario para que un visitante pueda ingresar su nombre, su
mail y un comentario del sitio, empleando para este ltimo dato a ingresar un
elemento de tipo textarea:
<html>
Programacin Web. ISC
Pgina 34
Unidad II.
Lenguaje de Marcado.
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="pagina1.html " method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Ingrese su mail:
<input type="text" name="mail" size="50"><br>
Comentarios:<br>
<textarea name="comentarios" rows="5" cols="60"></textarea>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
La sintaxis para definir un rea de texto para el ingreso de mltiples lneas es:
<textarea name="comentarios" rows="5" cols="60"></textarea>
Es un elemento que requiere una marca de comienzo y una de finalizacin.
Adems de tener la propiedad name similar a los otros elementos relacionados a
formularios tiene dos propiedades llamadas rows y cols. Estas dos propiedades
indican la cantidad de filas y columnas que visualiza el rea de texto.
Pgina 35
Unidad II.
Lenguaje de Marcado.
<body>
<form action="pagina1.html" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione los lenguajes que conoce:
<br>
<input type="checkbox" name="java">Java<br>
<input type="checkbox" name="cmasmas">C++<br>
<input type="checkbox" name="c">C<br>
<input type="checkbox" name="csharp">C#<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Veamos la sintaxis para definir controles de formulario de tipo checkbox:
<input type="checkbox" name="java">Java<br>
Como vemos tambin utilizamos el elemento HTML input, donde inicializamos la
propiedad type con el valor checkbox.
Un control checkbox no muestra texto, solo una casilla que el operador puede
tildar o destildar.
Si queremos que aparezca un mensaje junto al checkbox solo lo agregamos
seguido al elemento input.
Es importante hacer notar que los caracteres permitidos de la propiedad name son
los caracteres alfabticos y los nmeros siempre y cuando no sea el primero.
Pgina 36
Unidad II.
Lenguaje de Marcado.
Pgina 37
Unidad II.
Lenguaje de Marcado.
Pgina 38
Unidad II.
Lenguaje de Marcado.
<option value="17">Chile</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Pgina 39
Unidad II.
Lenguaje de Marcado.
Pgina 40
Unidad II.
Lenguaje de Marcado.
Pgina 41
Unidad II.
Lenguaje de Marcado.
</body>
</html>
Como podemos observar para agrupar una serie de opciones dentro de un select
debemos encerrarlas con el elemento optgroup:
<optgroup label="Frutas"> <option value="1">Naranjas</option> <option
value="2">Manzanas</option>
<option
value="3>Sandia</option>
<option
value="4">Frutilla</option>
<option
value="5">Durazno</option>
<option
value="6">Ciruela</option> </optgroup>
La propiedad label del elemento optgroup aparece dentro del control select pero
no se puede seleccionar, es un ttulo.
La propiedad label del elemento optgroup es el texto que se debe mostrar dentro
del select.
Se puede hacer agrupamiento de opciones y permitir selecciones mltiples.
Formulario - button
El elemento button es un control visual que se puede utilizar para sustituir los
controles:
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
Entre otras las ventajas de este elemento es que podemos agregar imgenes
dentro del botn.
La sintaxis de este elemento es la siguiente:
<button type="submit">
Texto a mostrar dentro del botn.
</button>
Todo lo que est contenido entre las marcas de comienzo y fin del elemento button
aparece dentro del botn, como por ejemplo una imagen, un prrafo, enfatizado de
una palabra etc.
La propiedad type se puede inicializar con alguno de estos tres valores: "submit",
"reset" y "button". Los dos primeros cumplen las funciones que ya conocemos es
decir envo de los datos al servidor y borrado del contenido de los controles. En
Programacin Web. ISC
Pgina 42
Unidad II.
Lenguaje de Marcado.
Este tipo de botn no se lo puede hacer que acte como los botones de tipo
submit o reset, su actividad depender de un programa desarrollado generalmente
en JavaScript.
Si bien no podemos ver su funcionamiento ya que no conocemos JavaScript si
podemos implementar una pgina que muestre este control. Confeccionaremos
una pgina que muestre el teclado de una calculadora:
<html>
<head>
<title>Prueba de formulario</title>
</head>
Programacin Web. ISC
Pgina 43
Unidad II.
Lenguaje de Marcado.
<body>
<form action="pagina.html" method="post">
<h1>Resultado:<h1>
<input type="button" name="boton7" value=" 7 ">
<input type="button" name="boton8" value=" 8 ">
<input type="button" name="boton9" value=" 9 ">
<input type="button" name="botondiv" value=" / ">
<br>
<input type="button" name="boton4" value=" 4 ">
<input type="button" name="boton5" value=" 5 ">
<input type="button" name="boton6" value=" 6 ">
<input type="button" name="botondiv" value=" * ">
<br>
<input type="button" name="boton1" value=" 1 ">
<input type="button" name="boton2" value=" 2 ">
<input type="button" name="boton3" value=" 3 ">
<input type="button" name="botonmas" value=" + ">
<br>
<input type="button" name="boton0" value=" 0 ">
<input type="button" name="botonigual" value=" = ">
<input type="button" name="botonmenos" value=" - ">
</form>
</body>
</html>
Como ver cuando se presiona el botn no sucede nada. Esto es as porque no
hemos asignado ninguna actividad cuando sea presionado. Recordemos que
HTML solo tiene Contenido, si queremos funcionalidad deberemos definir los
eventos para dichos botones.
Pgina 44
Unidad II.
Lenguaje de Marcado.
Nuevamente utilizamos el elemento HTML input para definir este tipo de control.
En la propiedad type inicializamos con el valor file. Inicializar la propiedad name
tambin es importante ya que mediante este nombre se lo recupera en el servidor.
Otra cosa muy importante a tener en cuenta cuando hacemos upload de archivos
al servidor es inicializar la propiedad enctype del elemento form:
<form method="post" action="/registrardatos.php" enctype="multipart/form-data">
Con esto indicamos al navegador que el formulario almacena uno o ms archivos
que deben ser enviados al servidor.
Confeccionemos una pgina que solicite el ingreso de un nombre y la foto de la
persona:
<html>
<head>
<title>Formulario File </title>
</head>
<body>
<form action="pagina.html" method="post" enctype="multipart/form-data">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione la foto:
<input type="file" name="foto">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Recordemos siempre inicializar la propiedad enctype del elemento form:
<form action="/registrardatos.php" method="post" enctype="multipart/form-data">
Tenga en cuenta que si no se hace nign programa en el servidor el archivo no se
almacena.
Pgina 45
Unidad II.
Lenguaje de Marcado.
Pgina 46
Unidad II.
Lenguaje de Marcado.
Pgina 47
Unidad II.
Lenguaje de Marcado.
</body>
</html>
Podemos ver que cada grupo de controles est encerrado con el elemento
fieldset:
<fieldset>
<legend>Datos personales</legend>
Apellido y nombre:
<input type="text" name="nombre" size="30"><br>
Identificacin:
<input type="text" name="dni" size="8"><br>
Fecha de nacimiento:
<input type="text" name="fechanacimiento" size="12"><br>
Direccin:
<input type="text" name="direccionpersona" size="30"><br>
</fieldset>
Luego el ttulo de cada fieldset lo disponemos con:
<legend>Datos personales</legend>
Pgina 48
Unidad II.
Lenguaje de Marcado.
Pgina 49
Unidad II.
Lenguaje de Marcado.
Para inicializar un control de tipo select con seleccin mltiple debemos definir la
propiedad selected de varios elementos option:
<select name="colores[]" size="4" multiple="multiple">
<option value="1" selected>Rojo</option>
<option value="2">Verde</option>
<option value="3" selected>Azul</option>
<option value="4">Amarillo</option>
<option value="5" selected>Blanco</option>
<option value="6">Negro</option>
<option value="7">Naranja</option>
<option value="8">Violeta</option>
</select>
En este ejemplo los items Rojo,Azul y Blanco aparecen seleccionados desde un
comienzo.
Confeccionaremos como ejemplo un formulario que solicite el ingreso del nombre
de una persona. Luego que seleccione si es mayor de edad o no (por defecto
inicializar en si),seguidamente el telfono (cargar por defecto 453-) y por ltimo en
un textarea solicitar que ingrese comentarios.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="pagina25.html" method="post">
Apellido y nombre:
<input type="text" name="nombre" size="30"><br>
Es mayor de edad?:<br>
<input type="radio" name="radio1" checked
value="si">Si<br>
<input type="radio" name="radio1" value="no">No<br>
Telefono:
<input type="text" value="453-" name="telefono"
size="15"><br>
<textarea name="comentarios" rows="5" cols="40">Ingrese
aqui sus comentarios</textarea><br>
Programacin Web. ISC
Pgina 50
Unidad II.
Lenguaje de Marcado.
Pgina 51
Unidad II.
Lenguaje de Marcado.
Como podemos observar los valores definidos para la propiedad tabindex para la
primera fila de controles text es:
<input type="text" name="text1" size="5" tabindex="1">
<input type="text" name="text2" size="5" tabindex="4">
<input type="text" name="text3" size="5" tabindex="7">
Podemos observar que la propiedad tabindex no tiene valores consecutivos. Pero
si vemos los text por columna podremos observar que si van en forma secuencial.
Todos los controles de formularios pueden definir la propiedad tabindex para
indicar el orden de activacin o foco del control.
Pgina 52
Unidad II.
Lenguaje de Marcado.
Pgina 53
Unidad II.
Lenguaje de Marcado.
<br>
Ingrese su clave:
<input type="password" name="clave" maxlength="12"
size="12">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Cuando ejecute esta pgina no podremos cargar un nombre de usuario de ms de
20 caracteres, el teclado se inhabilita cuando se han ingresado 20 caracteres en el
primer control.
Pgina 54
Unidad II.
Lenguaje de Marcado.
Pgina 55
Unidad II.
Lenguaje de Marcado.
La desventaja del envo de datos mediante mail es que la persona no puede hacer
el envo del formulario desde una mquina ubicada en lugares donde no nos dejen
configurar un cliente de mail.
Formulario - label
Una ltima etiqueta relacionada con los formularios es la label.
Hasta este momento siempre que queramos disponer un mensaje antes o
despus de un control de formulario lo escribamos sin ms.
Existe en HTML un elemento que permite asociar un texto con un control de
formulario. Esto ser muy til si se accede desde un navegador no grfico o una
persona ciega que utiliza un programa que lee en voz alta el contenido de la
pgina.
Veamos como lo hacamos hasta ahora:
Ingrese su nombre:
<input type="text" name="nombre" size="20">
Utilizando el elemento label podemos hacer una referencia entre el texto y el
control de entrada de datos:
<label for="nombre">Ingrese su nombre:</label>
<input type="text" name="nombre" size="20" id="nombre">
Veamos que hemos agregado:
* Hemos definido la propiedad id a la marca input.
* El elemento label tiene su marca de comienzo y fin, entre medio se dispone el
texto a mostrar.
* Para vincular esta label con el elemento input debemos inicializar la propiedad
for con el nombre asignado a la propiedad id del elemento input. Ms adelante
veremos que la propiedad id la pueden tener todos los elementos HTML y es de
vital importancia para CSS (Hojas de Estilo) y JavaScript
Confeccionemos un ejemplo completo:
Pgina 56
Unidad II.
Lenguaje de Marcado.
<html>
<head>
<title>Formulario Label</title>
</head>
<body>
<form action="pagina30.html " method="post">
<fieldset>
<legend>Formulario de comentarios.</legend>
<label for="nombre">Ingrese su nombre:</label>
<input type="text" name="nombre" size="30" id="nombre"><br>
<label for="mail">Ingrese su mail:</label>
<input type="text" name="mail" size="50" id="mail"><br>
<label for="comentarios">Comentarios:</label><br>
<textarea name="comentarios" rows="5" cols="60"
id="comentarios"></textarea>
<br>
<input type="submit" value="Enviar">
</fieldset>
</form>
</body>
</html>
Como podemos ver asociamos cada etiqueta con el correspondiente control de
entrada de datos:
*<label for="nombre">Ingrese su nombre:</label>
<input type="text" name="nombre" size="30" id="nombre"><br>
* <label for="mail">Ingrese su mail:</label>
<input type="text" name="mail" size="50" id="mail"><br>
* <label for="comentarios">Comentarios:</label><br>
<textarea name="comentarios" rows="5" cols="60"
id="comentarios"></textarea>
Normalmente las propiedades id y name de los controles de entrada de datos
(input, textarea etc.) se les asigna el mismo nombre, de todos modos no es
obligatorio.
Pgina 57
Unidad II.
Lenguaje de Marcado.
Pgina 58
Unidad II.
Lenguaje de Marcado.
Pgina 59
Unidad II.
Lenguaje de Marcado.
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h2>Frame 2</h2>
</body>
</html>
Pgina 60
Unidad II.
Lenguaje de Marcado.
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h2>Enlaces.</h2>
<ul>
<li><a href="pagina32b.html" target="ventanadinamica">Enlace
1</a></li>
<li><a href="pagina32c.html" target="ventanadinamica">Enlace
2</a></li>
</ul>
</body>
</html>
Este archivo es el frame de la izquierda, que contiene los hipervnculos a dos
pginas. Para indicar que frame debe mostrar las pginas de estos hipervnculos
agregamos la propiedad target inicializndola con el valor del name definido para
el frame (en nuestro caso es "ventanadinamica")
Tengamos en cuenta que el frame de la derecha comienza mostrando el archivo
pagina32a.html y luego segn que hipervnculo se seleccione mostrar el archivo:
pagina32b.html o pagina32c.html
Los contenidos de los dos archivos pagina32b.html y pagina32c.html no tienen
nada nuevo:
pagina32b.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina A</h1>
<h2>Este es el contenido de pgina del archivo:pagina32b.html</h2>
</body>
</html>
Pagina32c.html
Programacin Web. ISC
Pgina 61
Unidad II.
Lenguaje de Marcado.
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina B</h1>
<h2>Este es el contenido de pgina del archivo:pagina32c.html</h2>
</body>
</html>
Pgina 62
Unidad II.
Lenguaje de Marcado.
Pagina33.html
<html>
<head>
<html>
<head>
<title>prueba de frames</title>
</head>
<frameset cols="200,*,200">
<frame src="pagina33a.html">
<frame src="pagina33b.html">
<frame src="pagina33c.html">
<noframes>
<p>El navegador no soporta frames</p>
</noframes>
</frameset>
</html>
Pagina33a.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina A</h1>
</body>
</html>
pagina33b.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina B</h1>
</body>
</html>
Programacin Web. ISC
Pgina 63
Unidad II.
Lenguaje de Marcado.
Pagina33c.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina C</h1>
</body>
</html>
Veamos algunas variantes para utilizar el astersco:
* La primer columna es de 200 pxeles y los pxeles restantes se destribuyen
entre el segundo y tercer frame.
<frameset cols="200,*,*">
* Con esta sintaxis los pxeles que restan luego de aplicar los 200 pxeles del
primer frame se asignan 2/3 partes al frame central y 1/3 al frame de la derecha.
<frameset cols="200,2*,*">
* Podemos mezclar las unidades de medida. Con esta sintaxis el 50%
corresponde al frame central, 200 pxeles al frame de la izquierda y los pxeles
restantes se asignan al frame de la derecha.
<frameset cols="200,50%,*;>
Pgina 64
Unidad II.
Lenguaje de Marcado.
Pgina 65
Unidad II.
Lenguaje de Marcado.
</noframes>
</frameset>
</html>
Pagina34a.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina A</h1>
<h1>Pgina A</h1>
<h1>Pgina A</h1>
<h1>Pgina A</h1>
<h1>Pgina A</h1>
<h1>Pgina A</h1>
</body>
</html>
pagina34b.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
Programacin Web. ISC
Pgina 66
Unidad II.
Lenguaje de Marcado.
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
Programacin Web. ISC
Pgina 67
Unidad II.
Lenguaje de Marcado.
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
<h1>Pgina B</h1>
Programacin Web. ISC
Pgina 68
Unidad II.
Lenguaje de Marcado.
<h1>Pgina B</h1>
</body>
</html>
Anidamiento de frameset
El lenguaje HTML nos permite definir un frameset en la ubicacin de un frame,
esto se logra anidando frameset.
Vamos a crear una pgina que contenga dos columnas. La segunda columna la
dividimos en dos filas:
------------------------------------------|
|
|
|
|
|
|
|-----------------------------------|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
------------------------------------------Para resolver este formato de pgina tenemos que plantear los frameset de la
siguiente manera:
Pagina35.html
<html>
<head>
<title>prueba de frames</title>
</head>
<frameset cols="200,*">
<frame src="pagina35a.html" noresize>
<frameset rows="70,*">
<frame src="pagina35b.html" noresize>
Programacin Web. ISC
Pgina 69
Unidad II.
Lenguaje de Marcado.
Pgina 70
Unidad II.
Lenguaje de Marcado.
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina B</h1>
</body>
</html>
Pagina35c.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
Programacin Web. ISC
Pgina 71
Unidad II.
Lenguaje de Marcado.
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
<h1>Pgina C</h1>
</body>
</html>
iframes
El HTML dispone de un elemento llamado iframe que permite disponer un frame
con el flujo de la pgina, similar a disponer una imagen en la pgina.
Veamos un ejemplo como disponer este tipo de frame tan particular:
Pagina36.html
<html>
<head>
<title>prueba de iframes</title>
</head>
<body>
<h1>Esto es una prueba de un iframe</h1>
<iframe src="pagina36a.html" width="400" height="200">
No tiene disponible el navegador la capacidad de iframe
</iframe>
<h2>Esto ya est fuera del iframe</h2>
</body>
</html>
Como podemos ver cuando necesitamos agregar el iframe dentro de la pgina
disponemos:
Programacin Web. ISC
Pgina 72
Unidad II.
Lenguaje de Marcado.
Pgina 73
Unidad II.
Lenguaje de Marcado.
Declaracin DOCTYPE.
Hasta ahora no hemos hablado de un concepto de vital importancia que es la
utilizacin de elementos HTML estndares. De todos modos no hemos introducido
elementos HTML propietarios o desaprobados (ej. font, center etc.)
La organizacin que define los estndares para la web es W3C.
Utilizar en lo posible las directivas de este comit de estndares nos traer como
ventaja que nuestras pginas en un futuro sigan vindose correctamente en las
nuevas versiones de navegadores.
La versin ms actual de HTML es la 4.01.
Ahora introduciremos una nueva seccin de nuestra pgina que es la declaracin
del tipo de documento (DTD Document Type Declaration), esta seccin se ubica
en la primera lnea del archivo HTML, es decir antes de la marca html.
Segn el rigor de HTML 4.01 utilizado podemos declararla como:
Programacin Web. ISC
Pgina 74
Unidad II.
Lenguaje de Marcado.
Declaracin transitoria:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Declaracin estricta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Veamos la sintaxis para definir la seccin del DOCTYPE, la primera diferencia con
cualquier otro elemento HTML es que el carcter siguiente del < es el signo de
admiracin (!), luego debe ir la palabra DOCTYPE indicando que se trata de un
archivo HTML. Ms adelante debemos indicar la versin de HTML y si se trata de
HTML transitorio o estricto:
Si es HTML transitorio disponemos:
"-//W3C//DTD HTML 4.01 Transitional//EN"
Si es HTML estricto
"-//W3C//DTD HTML 4.01//EN"
Es decir que cuando es HTML estricto no disponemos la palabra Transitional
Por ltimo se define la direccin de internet donde se encuentra un archivo que
enuncia los elemento y propiedades permitidos en el HTML 4.01, discriminando
entre HTML estricto y transitorio.
Porqu utilizar HTML transitional, si lo ms correcto sera utilizar HTML estricto?
Puede ser que tengamos muchas pginas desarrolladas en el pasado y nos lleve
un tiempo hacerlas compatible con el HTML estricto.
Para ver si una pgina cumple el estndar especfico podemos acceder a un
programa validador que se encuentra en validator.w3.org
Pgina 75
Unidad II.
Lenguaje de Marcado.
Pgina 76
Unidad II.
Lenguaje de Marcado.
Pgina 77
Unidad II.
Lenguaje de Marcado.
Pgina 78
Unidad II.
Lenguaje de Marcado.
Pgina 79
Unidad II.
Lenguaje de Marcado.
<h1>Pgina principal.</h1>
<a href="pagina2.html">Noticias</a>
</body>
</html>
Con los cambios para que valide:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Pgina de prueba del DTD</title>
</head>
<body>
<h1>Pgina principal.</h1>
<p><a href="pagina2.html">Noticias</a></p>
</body>
</html>
Que modificaciones hemos hecho?
1. Definimos el DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
3. Definimos el elemento title:
<title>Pgina de prueba del DTD</title>
4. Definimos el hipervnculo de la pgina dentro de un prrafo (no puede un
hipervnculo depender directamente del body):
<p><a href="pagina2.html">Noticias</a></p>
Problema 3: Confeccionar un formulario que solicite el ingreso del nombre de un
usuario y su clave. Mostrar asteriscos donde se ingresa la clave. Disponer dos
botones, uno para el envo de datos al servidor y otro para borrar el contenido de
todos los controles (editores de texto) que contiene el formulario.
<html>
<head>
Programacin Web. ISC
Pgina 80
Unidad II.
Lenguaje de Marcado.
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
Ingrese su clave:
<input type="password" name="clave" size="12">
<br>
<input type="submit" value="enviar">
<input type="reset" value="borrar">
</form>
</body>
</html>
Con los cambios para que valide:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Pgina de prueba del DTD</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<p>
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
Ingrese su clave:
<input type="password" name="clave" size="12">
<br>
<input type="submit" value="enviar">
<input type="reset" value="borrar">
</p>
</form>
</body>
</html>
Programacin Web. ISC
Pgina 81
Unidad II.
Lenguaje de Marcado.
1. Definimos el DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
3. Definimos el elemento title:
<title>Pgina de prueba del DTD</title>
4. Definimos todos el contenido del form dentro de un prrafo. No se puede
disponer texto o controles de formulario que dependan directamente del elemento
form.:
<p> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br>
Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input
type="submit" value="enviar"> <input type="reset" value="borrar"> </p>
Todos estos cambios son obligatorios para que valide como HTML 4.01 estricto.
Pgina 82
Unidad II.
Lenguaje de Marcado.
Pgina 83
Unidad II.
Lenguaje de Marcado.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina B</h1>
<h2>Este es el contenido de pgina del archivo:pagina4.html</h2>
</body>
</html>
pagina4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>prueba de frames</title>
</head>
<body>
<h1>Pgina B</h1>
<h2>Este es el contenido de pgina del archivo:pagina4.html</h2>
</body>
</html>
Pgina 84
Unidad II.
Lenguaje de Marcado.
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Mi primer pagina</title>
</head>
<body>
<p>PHP - Java - JavaScript - C - C++</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</p>
</body>
</html>
Solamente agregamos el prrafo que contiene el hipervnculo al sitio que realiza la
validacin. Gran cantidad de sitios tienen este cono o alguno similar para indicar
que sus pginas cumplen con el HTML Transitional o estricto.
Pgina 85
Unidad II.
Lenguaje de Marcado.
Pgina 86