Los webmaster deben usar el DTD Estricto siempre que sea posible, pero pueden usar el DTD Transicional si es necesario el soporte de elementos y atributos de presentación. Prácticamente todas las páginas que hemos desarrollado debemos hacerle algunos retoques para que cumplan con la validación de HTML estrícta. Veremos varias de las páginas desarrolladas y los cambios que debemos hacer para que pasen la validación:
Problema 1:Confeccionar una página que muestre los nombres de 5 lenguajes de programación separados por un guión:
<html>
<head>
</head>
<body>
PHP - Java - JavaScript - C - C++
</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=UTF-8">
<title>Página de prueba del DTD</title>
</head>
<body>
<p>PHP - Java - JavaScript - C - C++</p>
</body>
</html>
Que modificaciones hemos hecho?
- Definimos el DOCTYPE
- Agregamos el meta:
- Definimos el elemento title:
- Página de prueba del DTD Definimos el texto de la página dentro de un párrafo (no puede un texto depender directamente del body): <p>PHP - Java - JavaScript - C - C++</p>
Todos estos cambios son obligatorios para que valide como HTML 4.01 estricto.
Problema 2:Confeccionar una página principal que tenga un hipervínculo a otra página secundaria.
<html>
<head>
</head>
<body>
<h1>Página 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>Página de prueba del DTD</title>
</head>
<body>
<h1>Página principal.</h1>
<p><a href="pagina2.html">Noticias</a></p>
</body>
</html>
Que modificaciones hemos hecho?
-
Definimos el DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-
Definimos el elemento title:
<title>Página de prueba del DTD</title>
-
Definimos el hipervínculo de la página dentro de un párrafo (no puede un hipervínculo 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 envío de datos al servidor y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario.
<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>
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>Página 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>
Que modificaciones hemos hecho?
-
Definimos el DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
-
Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-
Definimos el elemento title:
<title>Página de prueba del DTD</title>
-
Definimos todos el contenido del form dentro de un párrafo. 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>