Sesion03 - Web PDF

UNIVERSIDAD CESAR VALLEJO
Escuela Profesional de Ingeniera de Sistemas
Sesin 03: Hojas de estilo en cascada (CSS)
CSS nos permite controlar el estilo y el formato de mltiples pginas Web a la vez
CSS nos ayuda a separar el contenido de la presentacin.
Mg. Orleans Moiss Glvez Tapia

CIP: 171497
CURSO: INGENIERA WEB UCV 1

3 FORMAS DE INSERTAR UNA HOJA DE ESTILOS EN UN DOCUMENTO
1. Entre lneas
2. Hojas de estilo interna
3. Hojas de estilo externas
http://localhost/ejemplo.html
Este prrafo es de color rojo

<p style=color:red; margin-left:30px >
y se encuentra a 30 pixeles del
Este prrafo es de color rojo y se encuentra a 30 margen izquierdo.
pixeles del margen izquierdo.
</p>
Debemos usar esta forma cuando un nico estilo es aplicado a un solo elemento.
Su uso est dado por el atributo style que se encuentra en casi todas las etiquetas.
1. Entre lneas
<head>
<style type="text/css"> Fuentes blancas sobre fondo azul

body {background-color:blue}
p {color:white}
</style>
</head>
<body>
<p>Fuentes blancas sobre fondo azul</p>
</body>
Las hojas de estilo interna deben usarse cuando una sola pgina tiene un estilo nico
1. Entre lneas
<head>
<style type="text/css"> Fuentes blancas sobre fondo azul

p {color:white}
</style>
</head>
<body>
</body>
estilos.css
body {background-color:blue} <link rel="stylesheet" type="text/css" href="estilos.css">
p {color:white}
1. Entre lneas
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
Fuentes blancas sobre fondo azul
</head>
<body>
</body>
estilos.css
p {color:white}
EJEMPLO 02 (separando el contenido de la presentacin)
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
<html>
<head>
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">UCV LIMA NORTE</font></h1>
<p> <font color="gray" face="Verdana" size="2">Curso: Web</font></p>
</body>
</html>
font = fuente (Indica el tamao, color, o fuente del texto que contiene)
estilos.css

<html>
<head>
</head>
<body>
<h1><font color="red" face="Arial" size="5">UCV LIMA NORTE</font></h1>
<p> <font color="gray" face="Verdana" size="2">Curso: Web</font></p>
</body>
</html>
estilos.css

<html>
<head>
</head>
<body>
<h1>UCV LIMA NORTE</h1>
<p> Curso: Web</p>
</body>
</html>
estilo.css
body { background-image:url('fondo.jpg') }
Regla CSS
h1 { color : black; }
Selector Propiedad valor

CMO INSERTAMOS IMGENES EN UN ARCHIVO HTML?
WWW
La siguiente pgina muestra una imagen llamada foto1.jpg (La

imagen se encuentra almacenada en el servidor en la misma
carpeta donde se localiza esta pgina)
<html>
<head>
</head>
<body>
<img src="foto1.jpg" alt="Pintura geomtrica">
</body>
</html>
Si la imagen se encuentra en una subcarpeta llamada WWW

imagenes, luego la sintaxis para recuperarla ser:
<img src="imagenes/foto1.jpg" alt="Pintura geomtrica">
Es decir, antecedemos al nombre de la imagen el nombre de la
imagenes
carpeta y la barra /
WWW
Si la imagen se encuentra en una carpeta padre de donde se

encuentra la pgina HTML luego la sintaxis ser:
<img src="../foto1.jpg" alt="Pintura geomtrica">
Es decir, le antecedemos .. y la barra / al nombre de la imagen.
Si queremos subir dos carpetas luego escribimos:

<img src="../../foto1.jpg" alt="Pintura geomtrica">
WWW
si queremos acceder a una imagen que se encuentra
en una carpeta llamada imagenes pero que est al
mismo nivel:
<img src="../imagenes/foto1.jpg" alt="Pintura geomtrica">
imagenes
Primero le indicamos que subimos al directorio padre
mediante los dos puntos ../ y seguidamente indicamos el
nombre de la carpeta y la imagen a mostrar.
WWW
EJERCICIO
A Pagina01.html
Crear la estructura de directorios (de la figura),

Imagen01.jpg
Imagen02.jpg
pginas html e imgenes.
Se pide:
B Imagen03.jpg
Implementar el cdigo html de la pgina1.html

B1 Pagina02.html aadiendo referencias (HIPERVNCULOS) a las
imgenes y pginas de tal manera que se observe
en el navegador web un listado de todas las
Pagina03.html imgenes:
C
Imagen04.jpg
Imagen01.jpg
C1 Imagen05.jpg Imagen02.jpg
Imagen03.jpg
Imagen04.jpg
D Pagina04.html
Imagen05.jpg
Imagen06.jpg;
D1 Imagen06.jpg Y debajo un enlace a cada una de las pginas html.

Ejercicios en PHP
EJERCICIO 01
Usando arreglos y funciones se pide implementar una pgina php que genere
nmeros aleatorios entre -10 y 5000000. Luego debe mostrar la sumatoria de los
dgitos de la siguiente forma:
SOLUCIN - EJERCICIO 01
EJERCICIO 02
Aadir una tabla html con border=1 al ejercicio anterior de tal manera
que el resultado se muestre de la siguiente forma:
http://localhost/ejercicio02.php
Nmero aleatorio: 4630584
4 + 6 + 3 + 0 5 + 8 + 4 = 30
EJERCICIO 03
Usando arreglos y funciones, generar un nmero aleatorio entre 1 y 9, luego mostrar la tabla
de multiplicar hasta el 12 del nmero generado. Asumiendo que el nmero generado es 8,
entonces el aspecto de la pgina sera:

EJERCICIO 04
Modificar el ejercicio anterior de tal manera que los resultados se visualicen en una tabla:

Sesion03 - Web PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Sesion03 - Web PDF

Загружено:

Авторское право:

Доступные форматы

UNIVERSIDAD CESAR VALLEJO

Escuela Profesional de Ingeniera de Sistemas

Sesin 03: Hojas de estilo en cascada (CSS)

CSS nos ayuda a separar el contenido de la presentacin.

Mg. Orleans Moiss Glvez Tapia

CURSO: INGENIERA WEB UCV 1

Este prrafo es de color rojo

<style type="text/css"> Fuentes blancas sobre fondo azul

<style type="text/css"> Fuentes blancas sobre fondo azul

h1 { color: red; font-family: Arial; font-size: large; }

<link rel="stylesheet" type="text/css" href="estilos.css">

h1 { color: red; font-family: Arial; font-size: large; }

<link rel="stylesheet" type="text/css" href="estilos.css">

Selector Propiedad valor

La siguiente pgina muestra una imagen llamada foto1.jpg (La

Si la imagen se encuentra en una subcarpeta llamada WWW

<img src="imagenes/foto1.jpg" alt="Pintura geomtrica">

Es decir, antecedemos al nombre de la imagen el nombre de la

Si la imagen se encuentra en una carpeta padre de donde se

<img src="../foto1.jpg" alt="Pintura geomtrica">

Es decir, le antecedemos .. y la barra / al nombre de la imagen.

Si queremos subir dos carpetas luego escribimos:

<img src="../imagenes/foto1.jpg" alt="Pintura geomtrica">

Crear la estructura de directorios (de la figura),

Implementar el cdigo html de la pgina1.html

D1 Imagen06.jpg Y debajo un enlace a cada una de las pginas html.

Nmero aleatorio: 4630584

CURSO: INGENIERA WEB UCV 19

CURSO: INGENIERA WEB UCV 20

Вам также может понравиться