Hola a todos
HTML Transicional
Hoy vamos a hablar de los validadores, de cómo nos ayudan a cumplir con los estándares y de cómo conseguir a partir de ellos las pegatinas que nos dicen que seguimos los estándares:
Los códigos que vamos a usar para ello son los siguientes:
HTML Transicional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="Estilo5.css" type="text/css" rel="Stylesheet" >
<title>Prueba</title>
</head>
<body>
<h1> Lenguajes de marcas
Con estilo</h1>
A
<h2>Por Alfredo de la Presa Cruz</h2>
</body>
</html>
HTML 4.01 Estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Documento sin título</title>
</head>
<body>
<h1>Prueba cib xhtml1.0 de Alfredo de la Presa</h1>
</body>
</html>
Estos dos elementos se pueden validar en http://validator.w3.org/
CSS
La siguiente prueba es con el validador, pero no ya de html, sino de CSS
h1 {
border : 1px solid black;
font-family : Old English Text MT, Arial;
padding : 10px 10px;
margin : 2px 2px;
font-weight : bold;
font-size : 45px;
text-align : center;
color : green;
text-transform : uppercase;
word-spacing : 12px;
}
h2 {
border : 1px solid black;
font-family : PAlatino Linotype, Arial;
padding : 10px 10px;
margin : 2px 2px;
font-weight : bold;
font-size : 24px;
text-align : center;
color : green;
text-transform : uppercase;
word-spacing : 8px;
}
body {
background-color : rgb(88.0%, 88.0%, 88.0%);
font-size : 4000%;
font-family : Old English Text MT;
color : black;
font-weight : bold;
text-align : center;
}
Y tiene lugar en la dirección http://jigsaw.w3.org/css-validator/
Los resultados de las validaciones anteriores son las siguientes imágenes
Validación HTML 4.01 Transicional
Validación HTML 4.01 Estricto:
Validacion CSS
1- Conseguir que la portada del sitio web se amolde a los parámetros de html 4.01 Estricto y validarla con el servicio de validación de W3C
2- Crear una hoja de estilo que esté validada con el servicio de validación de W3C
3- Dado el siguiente documento HTML base:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.0rg/TR/html4/strict.dtd>
<html>
<head>
<title> Documento HTML Lorem Ipsum</title>
</head>
<body>
<h1> Texto Lorem Ipsum</h1>
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.
</p>
<p>
Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.
<a href=http://es.wikipedia.org/wiki/Lorem_ipsum>Texto original</a>
</p>
</body>
</html>
- Incorpore una imagen con ancho de 200 píxeles
- Cree una nueva cabecera <h1>
- Incorpore un nuevo enlace a una página web
- Bajo esa cabecera cree dos párrafos
- Incorpore una lista ordenada
- Cree una hoja de estilos e incorpórela en el documento HTML. Dar los siguientes estilos:
- Cambiar el tamaño de la fuente de los párrafos a 9 puntos.
- Añadir un borde a la imagen de 5px de color blanco (border: 5px solid #fff ;)
- Asignar un “id” a un párrafo y modificar únicamente el estilo de éste cambiando el color de la fuente a rojo (Color:red;)
- Crear una clase nueva y asignar dos párrafos a esa clase y cambiar el estilo del mismo modificándolo a negrita (font-weight: bold;)
- Valide todos los cambios usando un validador online como el del W3C
Saludos,
Alfredo de la Presa Cruz
No hay comentarios:
Publicar un comentario