Ejercicio sobre HTML/CSS (93KBytes).
Anuncio
Pruebas iniciales
●
●
●
●
●
Visualizar en dos navegadores
1a. versión
hola
2a. versión
<p>hola</p>
3a. versión
<html>
<p>hola</p>
4a versión
<html>
<head>
<title>Título</title>
<body>
<p>hola</p>
</body>
</HtMl>
●
Probar validez en la secuencia HTML 2.0, HTML 3.2, HTML 4.01 Strict, XHTML 1.0 Strict
Ejemplo de elementos en HTML
<!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>Título</title>
<link href="queEstilo.css" type="text/css" rel="stylesheet" />
<meta name="generator" content="..." />
<meta name="author" content="." />
<meta name="created" content="." />
<meta name="description" content="." />
</head>
<body>
</body>
</html>
<!-- Fin del fichero de ejemplo de HTML -->
<h1>Título sección</h1>
<p>Contenido de esta sección.</p>
<h2>Título subsección</h2>
<ul>
<li>Estructura.</li>
<li>Presentación.</li>
</ul>
<h3>Título sub-subsección</h3>
<ol>
<li><a href="http://www.w3c.es">W3C</a>. </li>
<li><a href="#finalPag">Ir al final de la página</a>.</li>
</ol>
<h4>Título sub-sub-subsección</h4>
<table>
<caption>Otras etiquetas</caption>
<tr> <th>Etiqueta</th> <th>Significado</th> </tr>
<tr> <td>address</td> <td>Dirección física</td> </tr>
</table>
<h5> <a name="finalPag">Título sub ... subsección</a></h5>
<!-- Incluir aquí una imagen en HTML -->
<div>¿Aquí acaba este documento?</div>
<form action="http://www.google.com/search">
<p> <input name="hl" type="hidden" value="es" />
<input maxlength="2048" name="q" size="55" title="Buscar con
Google" value=""/> </p>
<p> <input name="btnG" type="submit" value="Buscar con Google"
/> </p>
</form>
<p class=”paper”>¿Se ve o no se ve?</p>
Ejemplos de reglas en CSS
/* Reglas de estilo para la visualización del ejemplo de HTML */
@media all /* por ejemplo pantalla */ {
body { font-size: 10pt; background-color: #F0F0F0; }
h1, h2, h3, h4, h5, h6 { clear:both }
p { text-align: justify; }
ol, ul { padding:0; }
* { margin:10%; }
table { border-collapse:collapse; border-spacing:0; empty-cells:show }
th { font-weight: bold; text-align: center; vertical-align:top; }
td { font-style: italic; }
div{ border:4px solid; width: 75%; text-align: right; }
a:link { color: blue }
a:visited { color: purple }
*.paper{ display: none; }
}
@media print {
body { margin-top: 2cm; margin-bottom: 6cm; margin-left: 4cm; margin-right: 2cm; }
a:link { color: blue; text-decoration: none; }
a:visited { color: blue; text-decoration: none; }
*.paper{ display: block; }
}
Ejercicio
●
Publicar en web: http://futura.disca.upv.es/~usuario
✗
✗
●
$HOME/public_html
¿Permisos?
Un index.html que apunte a
✗
✗
La 4a. versión de la trasparencia 1
Sobre la plantilla anterior
✔
✔
Incluir una imagen en el comentario que lo indica
Cambiar el tipo de documento a XHTML 1.0 Strict
●
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
Validar los contenidos de ambos ejemplos
✗
✗
HTML / XHTML <http://validator.w3.org/>
CSS <http://jigsaw.w3.org/css-validator/>
