Tutorial de HTML - 5 - Adjuntar una hoja de estilo
Quienes sigan este tutorial de HTML, hasta ahora habrán creado una página que puede tener párrafos comunes, listas, tablas, imágenes. Sin embargo, nunca elegimos en qué formato queremos que se muestren cada uno de estos elementos.
Habitualmente entre todos estos elementos suelen intercalarse códigos para negrita, cursiva, definición de colores, etc.
Sin embargo, para que un sitio sea accesible una característica muy importante es que pueda ser leída por un lector de pantallas, y esto es mucho más sencillo y ordenado si se utilizan hojas de estilo en lugar de dar formato entre los párrafos directamente.
Vamos a crear un nuevo archivo HTML, nuevamente utilizando un editor de textos cualquiera (como la Libreta de Notas, Notepad, en Windows), que contenga este código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con formato</title>
<link rel="stylesheet" href="primerestilo.css">
</head>
<body>
<h1>Este es el título principal</h1>
<h2>Este es el subtítulo</h2>
<h3>Este es el subtítulo</h3>
<h4>Este es el subtítulo</h4>
<p>Este texto se va a ver en el contenido de la ventana. <br>Es un párrafo.</p>
<p>Para que esto tenga algún contenido vamos a alentar a la selección argentina que está a unas horas de jugar su partido contra Alemania... ¿Quién ganará?</p>
</body>
</html>
La única línea no conocida por quienes fueron siguiendo este tutorial es la que indica cuál será la hoja de estilo que se adjuntará a esta página web.
Ahora definiremos el contenido de esa hoja de estilo. En un nuevo archivo pegaremos el siguiente código:
body { font-family: Georgia, "Times New Roman", Times, serif;
color: gray;
background-color: #ffffdd }
h1 { color: orange;
border-left: 0.2em solid black;
border-bottom: 0.2em solid black;
border-top: 0.2em solid gray;
border-right: 0.2em solid gray;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
h2 { color: orange;}
h3 { border-left: 1em solid gray }
h4 { border-left: 1em solid green}
Cuando visualicemos nuestro archivo HTML en un navegador, si el archivo primerestilo.css se encuentra en la misma carpeta, ¡oh sorpresa! Lo podremos ver con un aspecto bien diferente.
Analizando nuestra hoja de estilo, podemos aprender que:
- Dentro del archivo se definen formatos para diferentes elementos (o regiones) de la página web: body, h1, h2, h3, h4.
- Para definir el formato del cuerpo principal de la página utilizamos la etiqueta body y definimos entre llaves las características del texto:
font-familiy: familia de tipos de letra que se utilizará (no se define un único tipo de letra porque el usuario puede no tener el archivo correspondiente).
color: el color del texto
background-color: el color del fondo
border:left: el estilo del borde izquierdo (right, top, bottom: derecha, arriba, abajo respectivamente)
- De la misma forma procederemos con H1 para el encabezado principal, H2, etc.
Para seguir practicando:
- Probar crear una nueva hoja de estilo llamada segundoestilo.css y definir diferentes colores (en principio utilizar green, black, gray, purple, orange, white...) y diferentes marcos para cada parte de la página. También se pueden usar números de seis cifras en sistema hexadecimal (que explicaremos en otra entrega de este tutorial).
- Cambiar entre uno y otro estilo modificando el renglón que indica qué hoja de estilo adjuntar: <link rel="stylesheet" href="segundoestilo.css">
El presente pertenece a una serie de posts con la intención de brindar un tutorial para crear sitios web accesibles, comenzando desde el principio: el lenguaje HTML
posted by Fernández at
4:30 p. m.
0 Comments:
Publicar un comentario
<< Home