Hojas de estilo
Son conocidas como style sheets. Se trata de una serie de conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, alineación y posicionamiento del texto, colores y fondos, etc., de las distintas etiquetas que forman una página.
Se puede crear una sola hoja de estilo y se enlazan algunas o todas las páginas. De esta manera, al hacer el cambio en la hoja de estilo, se cambiarán todas aquellas que estén vinculadas.
Ejemplo práctico para crear mi propia página con hojas de estilo:
- Clic en el botón Inicio y escribir Bloc de notas (Notepad)
- En la parte superior aparece el programa
- Aparecerá una ventana vacía
- Escribiremos o copiaremos y pegaremos el siguiente código:
<!DOTYPE HTML Public"-//WC3//DTD:HTML4.01//EN">
<HTML>
<HEAD>
<TITLE>Hojas estilo</TITLE>
</HEAD>
<BODY>
<!-- MENÚ DE NAVEGACIÓN DEL ESTILO -->
<ul class="navbar">
<li><a href="indice.html">Página principal</a>
<li><a href="contenido.html">Contenidos</a>
<li><a href="trabajos.html">Tareas</a>
<li><a href="evaluaciones.html">Evaluaciones</a>
</ul>
<!-- CONTENIDO PRINCIPAL -->
<H1>Cómo hacer mi página con Hojas de Estilo</H1>
<P>¡Bienvenidos!
<p>Podemos cargar imágenes, aplicar otros estilos. Existe un menú con enlaces, pero aún no están activados.
<!-- FIRMA Y FECHA DE LA PÁGINA -->
<address>Creada el 20 de Abril de 2023<br>mi nombre es ........</address>
</BODY>
</HTML>
5. Luego, escogemos el menú Archivo y la opción Guardar. En la ventana que aparece, se pondrá el nombre. Por ejemplo, Hojas estilo.html.
6. En la parte superior aparece el nombre que pusimos. Pero antes debemos actualizar ya que cada cambio que hagamos en el código no se visualizara si no actualizamos.
Programa en ejecución (resultado):
Recuerda que la hoja de estilos es clave para establecer el diseño de una web. Por lo tanto, se convierte en el principal espacio de trabajo para los diseñadores de estas plataformas.