Colegio Nacional de Educación Profesional Técnica
Lic. "Jesus Reyes Heroles"
Nombre del Alumno: José Guadalupe Martínez Cruz
Módulo: Diseño y Elaboración de Páginas Web
Grupo: INFO-604.
Práctica: N° 10.
Práctica: N° 10.
Introducción
Se crea un archivo con código CSS y HTML especificado en la hoja práctica en la cual se pide una lista no ordena con hipervínculos, un encabezado y cuatro párrafos; a todos estos elementos se aplican algunos estilos.Código HTML
En está práctica se creo el siguiente código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html>
<head>
<title>Practica N. 9</title>
</head>
<!---/// Codigo CSS sugerido por la practica ///-->
<style type="text/css">
body { color: blue }
body { background-color: #F3F781 }
body { font-family: Georgia, “Times New Roman”, Times, serif }
h1 { Font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
</style>
<body>
<ul>
<li><a href="#">Página principal</a></li>
<li><a href="#">Altas</a></li>
<li><a href="#">Bajas</a></li>
<li><a href="#">Modificaciones</a></li>
<li><a href="#">Consultas</a></li>
</ul>
<h1>Uso de herramientas aplicaciones web</h1>
<p>¡En este ejemplo haremos uso de hojas de estilo en cascada! </p>
<p>¡Daremos formato al texto y a los enlaces! </p>
<p> Esta Página no cuenta con imágenes, pero contiene enlaces, aunque no te lleven a ningún sitio… </p>
<p> Debería haber más cosas aquí, pero es suficiente para lo que necesitamos ejemplificar</p>
</body>
</html>
<html>
<head>
<title>Practica N. 9</title>
</head>
<!---/// Codigo CSS sugerido por la practica ///-->
<style type="text/css">
body { color: blue }
body { background-color: #F3F781 }
body { font-family: Georgia, “Times New Roman”, Times, serif }
h1 { Font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
</style>
<body>
<ul>
<li><a href="#">Página principal</a></li>
<li><a href="#">Altas</a></li>
<li><a href="#">Bajas</a></li>
<li><a href="#">Modificaciones</a></li>
<li><a href="#">Consultas</a></li>
</ul>
<h1>Uso de herramientas aplicaciones web</h1>
<p>¡En este ejemplo haremos uso de hojas de estilo en cascada! </p>
<p>¡Daremos formato al texto y a los enlaces! </p>
<p> Esta Página no cuenta con imágenes, pero contiene enlaces, aunque no te lleven a ningún sitio… </p>
<p> Debería haber más cosas aquí, pero es suficiente para lo que necesitamos ejemplificar</p>
</body>
</html>
Explicación del código generado
En el archivo se colocan la lista no ordena con las siguientes viñetas
- Página principal
- Altas
- Bajas
- Modificaciones
- Consultas
Se coloca el siguiente encabezado (<h1>…</h1>):
Uso de herramientas aplicaciones web
Además se colocan los siguientes párrafos los cuales se crean con <p>contenido del párrafo</p>:
¡En este ejemplo haremos uso de hojas de estilo en cascada!
¡Daremos formato al texto y a los enlaces!
Esta Página no cuenta con imágenes, pero contiene enlaces, aunque no te lleven a ningún sitio…
Debería haber más cosas aquí, pero es suficiente para lo que necesitamos ejemplifica
Hasta arriba en el head se coloca <style type="text/css">, seguido se agregan los siguientes estilos:
body { color: blue } que le asigna el color azul a todos los texto que estén dentro del body(cuerpo).
body { background-color: #F3F781 } --- Le da el color de fondo al cuerpo del documento.
body { font-family: Georgia, “Times New Roman”, Times, serif } Le da un tipo de fuente al texto dentro del cuerpo.
h1 { Font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } Este le asigna un tipo de fuente diferente al texto que este dentro de las etiquetas <h1>texto/encabezado afectado</h1>.
Resultado
En la imagen observa el estilo que se le es de declarado al documento:
 |
| Sin CSS |
 |
| Con CSS |
Conclusión
En HTML se puede controlar la forma de cómo se van a ver los elementos de un archivo .html, en CSS se utilizan los selectores de etiqueta que se colocan con mismo nombre que una etiqueta html, <etiqueta></etiqueta> en css se seleccionaría con etiqueta, después se escriben las { } entre las cuales van la propiedades que se le van a dar o modificar a ta elemento: etiqueta {color:#000; fondo:blanco; etc. etc.} .
No hay comentarios:
Publicar un comentario