Scribd
Cargar
93 vistas

Guia Lab 04 - Ing - Web - CSS PDF

Este documento presenta un laboratorio sobre el uso de hojas de estilo en cascada (CSS) para dar formato a páginas web. Explica conceptos como estilos en línea, internos y externos, y selectores como clases y IDs. Incluye ejercicios prácticos sobre menús, tablas y diseños con múltiples columnas utilizando CSS.

Cargado por

Linda Sagitario Calderon Arevalo
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
93 vistas

Guia Lab 04 - Ing - Web - CSS PDF

Este documento presenta un laboratorio sobre el uso de hojas de estilo en cascada (CSS) para dar formato a páginas web. Explica conceptos como estilos en línea, internos y externos, y selectores como clases y IDs. Incluye ejercicios prácticos sobre menús, tablas y diseños con múltiples columnas utilizando CSS.

Cargado por

Linda Sagitario Calderon Arevalo
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 12

ESCUELA ACADEMICO PROFESIONAL DE

INGENIERIA DE SISTEMAS

LABORATORIO
Escuela Profesional: Ingeniería de Sistemas. Asignatura: Ingeniería Web.
Ciclo y Turno: Semestre Académico: 2017 - I
Docente: Ing. Víctor Quevedo Dioses Fecha: 27 de Abril del 2017

Sesión 03: Estilos CSS

INTRODUCCION
Un sitio Web es un conjunto de documentos vinculados con atributos compartidos, tales como
temas relacionados, un diseño similar o un objetivo común. HTML, acrónimo inglés de HyperText
Markup Language (lenguaje de marcación de hipertexto), es un lenguaje de marcas diseñado para
estructurar textos y presentarlos en forma de hipertexto, formato estándar de las páginas Web.
 Formularios

I. OBJETIVOS
Codificar y ejecutar los ejercicios de aplicación con Listas, Tablas, Enlaces, Hiperenlaces usando
HTML y

II. EQUIPOS Y MATERIALES


  
Computadora personal.
  
Programa con Notepad++ correctamente instalado
 
Manual de HTML, donde están los ejercicios resueltos en código.

III. METODOLOGIA Y ACTIVIDADES

a) Codificar los ejercicios mostrados en esta guía


b) Presentar avances y ejecución de cada uno de los ejercicios al docente o jefe de práctica
encargado para la calificación correspondiente.
c) Guardar la carpeta de sus archivos a sus memorias.
d) Apagar el computador y dejarla en buen estado al retirarse del laboratorio dejar todo en
orden.

IV. INDICACIONES
La presentación es personal y en el Laboratorio
 Mostrar al Docente el día Día 03/06/2017
 Presentar en formato Word la Pantalla y el código
 Guardar el fuente en Google Drive

Página 1 de 12
Practica Dirigida
Estilos en Línea
• Las hojas de estilo en línea actúan sobre partes individuales del documento, sin
influir en el resto de la pagina

1.-Escriba el siguiente código

Observe el resultado

2.- Escriba el siguiente código

3.- Escriba el siguiente código

Página 2 de 12
Hoja de Estilo interna
Las hojas de estilo interna deben usarse cuando una sola página tiene un estilo único

4.-Escriba el siguiente código

Observe el resultado

Hoja de Estilo Externa

• Las hojas de estilos externas sirven para aplicar los mismos estilos de forma coherente en
algunas o en todas las páginas web de un sitio web.
• Para ello definimos todos los estilos en un documento en común que se utilizará para todas
las páginas del sitio Web

Guardar el archivo estilos.css


body {background-color : blue}
Las hojas de estilo deben llevar la terminación (.css) p
{color:white}

5.-Escriba el siguiente código crear el archivo ejercicioestiloexterno.html

<head>
<link rel=”stylesheet” type=”text/css” href=estilos.css>
</head>
<body>
<p>Fuentes blancas sobre fondo azul</p>
</body>
Ahora bien, imaginemos que tenemos una página web con 3 etiquetas <p> pero no deseamos que todas
tengan la misma presentación. Pues para estas situaciones CSS incorpora los llamados selectores. Estos
selectores, nos indican para qué elementos debemos de adoptar los estilos definidos en ellos.
Principalmente hay 2 tipos de selectores, el punto y la almohadilla:
- .
-#
Ejemplo
  .azul{color:blue;}
  .roja{color:red;}
 #postdata{color:green;font-size:10px;}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01


Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aplicación CSS - aprenderaprogramar.com</title>
<link rel="stylesheet" type="text/css" href="estilos.css"> </head>

<body>
<p class="azul">Texto de ejemplo para visualizar resultados de la class azul </p>
<p class="azul">Este texto también utiliza la clase azul </p>
<p class="roja">Texto de ejemplo para visualizar resultados de la class roja </p>
<p id="postdata">Texto de ejemplo para visualizar resultados de la id postdata
</p> </body>
</html>

Se observa la siguiente pantalla

Normalmente el selector “#” se utiliza para un solo elemento (por ejemplo, el encabezado o el pie) en toda
la página web identificado por su atributo id, mientras que el selector “.” también llamado selector de clase
es utilizado para un grupo más amplio de elementos en concreto todos los que tengan sus atributos class
iguales que los definidos por el selector “.”
El id es único dentro de una página web: no puede haber dos etiquetas cuyo id sea el mismo.

Página 4 de 12
6.- Realice el siguiente menú
Menúes con Estilos

Menú principal

ul{
menu.css list-style: none;
margin: 0;
padding: 0;
}
li{
display: inline-block;
padding: 5px;
border: 2px outset black;
color: yellow;
background-color: brown;
width: 150px;
position: relative;
margin: -1px;
}
#m1{
text-align: center;
}
.m2{
top: 30px;
left: 1px;
position: absolute;
display: none;
}
#m1 li:hover ul{
display: block;
}
#m1 li:hover{
background-color: burlywood;
color: yellow;
}
a{
text-decoration: none;

color: yellow;
}

Página 5 de 12
menu.html

Página 6 de 12
7.-Responda las siguientes preguntas

 Como se cambia el color de las opciones del menú con el color de azul
 Como se cambia el color de fondo de las opciones del menú con el color de amarillo

Escriba el código en donde se realiza el cambio

8.-Cuál es el significado de los siguientes elementos y para que los utiliza


Selector Significado
ul
li
#m1
.m2
Propiedad
list-style
display
padding
position
li:hover
a
valor
inline-block
2px outset black

9.-Realice el siguiente menú

Usuario
Registro Articulo

Registrar Venta
Procesos Registrar Compra

Por Ventas por Producto


Consultas Compras por Fecha

Mensual
Reporte Diario
Anual

Página 7 de 12
LAS CAPAS

Las capas se pueden definir como páginas que se pueden incrustar dentro de otras.

10.-Realice el siguiente ejercicio de la

capa Ejemplo1capa.html

<STYLE TYPE="text/css">
#micapa {position:absolute; top:100px;
left:20px;}
</STYLE>
<head>
<meta charset="utf-8">
<title>Las Capas</title>
</head>
<body>

<DIV ID="micapa">
<H1>El título de la capa</H1>
<P>Aquí es donde iría el texto.
</DIV>
</body>

Página 8 de 12
11.-Realizar el siguiente diseño con dos columnas: izquierda con ancho fijo de 300 px y derecha variable

El código css usado es el siguiente:

maquetas.css
#contenedor2
{
width:80%;
background-color: #f5f5f5; text-align:
center; margin: 0 auto 0 auto;
font-family:Verdana;
}
#cabecera2
{
width:100%; background-
color: green; text-align:
center; overflow:hidden;
padding: 0px 0px0px0px;
margin: 0 auto 10px auto;

#cuerpo2{
width: 100%; margin: 0px auto 0px auto; background-color: #f5f5f5; overflow: hidden; }
#izquierda2{
float: left;
width: 300px;
background-color: red;
font: 10pt Verdana;
text-align: center;
}

Página 9 de 12
#derecha2{
margin: 0px 0px0px
320px; background-color:
#eeffff; font: 12pt Verdana;
text-align: center;
}
#pie2{
background-color: yellow;
margin: 10px 0 0 0; padding: 0 0 0 0px;
text-align:center;
clear: both;
font: 8pt Verdana; }

La estructura es la siguiente

<head>
<STYLE Type="text/css">
@import URL("maquetas.css");
</STYLE>
</head>
<body>
<div id="contenedor2">
<div id="cabecera2"> LA CABECERA </div>

<div id="cuerpo2">

<div id="izquierda2">
LA PARTE IZQUIERDA
</div>

<div id="derecha2">
LA PARTE
DERECHA </div>
</div>

<div id="pie2">
EL PIE
</div>

</div>
</body>

ágina 10 de 12
12-Realizar el siguiente diseño con capas

13.-Realizar el siguiente diseño con estilos

Los estilos deben incluir


 Configuración de las capas
o Color, márgenes
o tamaño, tipo letra
o enlaces, Otros
 Las imágenes de las cabeceras debe
llamarse con estilos

14.-Mostrar en Word la imagen de su plantilla y describa de la página principal el mapa de las capas
principales, el código de sus capas y estilos

Página 11 de 12
Página 12 de 12

También podría gustarte