2dw9

Tema: Web

Subtema: 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

1. Clic en el botón Inicio y escribir Bloc de notas (Notepad).




2. En la parte superior aparece el programa.

3. Aparecerá una ventana vacía.



4. Escribiremos o copiaremos y pegaremos el siguiente código:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>Hojas de Estilo</title>

</head>

<body>

<!-- Menú de navegación del sitio -->

<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 17 de julio de 2020<br>

mi nombre.</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, prueba1.html.






No olvides escoger la ruta para guardar la página web.

6. En la parte superior aparece el nombre que pusimos.

7. Entonces el archivo quedará de la siguiente manera:

8. Busca el archivo en la ruta en la que lo guardaste y haz doble clic. Entonces, se abrirá en el navegador que tengas predeterminado, como se puede observar a continuación:

Revisa el siguiente enlace:

https://www.mclibre.org/consultar/htmlcss/css/css-color.html


TAREA:
Dato curioso: “Las hojas de estilo utilizan el lenguaje CSS.” 

  • 1. ¿Qué es y para qué sirve una hoja de estilo? 
  • 2. ¿Qué significa CSS? 
  • 3. Investiga y escribe los códigos de los colores para las hojas de estilo CSS.


No hay comentarios:

Publicar un comentario

Publicaciones Populares

Con la tecnología de Blogger.