Tema: 6-CSS en la Programación de Páginas Web | Programación de Páginas Web | AulaVirtualTrust

Página Principal

Menú del curso

SV-Conexion SB

Diagrama de temas

CSS: Mas allá del blanco y negro. A partir de este momento ya debe tener un código básico para visualizar una página web, sin embargo, es muy posible que ésta se vea muy sencilla y sin color. Pues bien, los magos de la informática han determinado que el código HTML tiene funciones estructurales, pero el CSS tiene características presentacionales. Esto significa que, si bien el primero podría asemejarse a las columnas y vigas de una casa, el segundo podría referirse a la pintura y los acabados. De esta forma el código CSS es el encargado de hacer mas amigable la visualización del contenido de la página web.

NOMBRE COLOR	COD HEX DEL COLOR	COD RGB DEL COLOR
NEGRO	#000000	RGB(0, 0, 0)
AZUL OSCURO	#000080	RGB(0, 0, 128)
AZUL	#0000FF	RGB(0, 0, 255)
VERDE	#008000	RGB(0, 128, 0)
VERDE AZULADO	#008080	RGB(0, 128, 128)
LIMA	#00FF00	RGB(0, 255, 0)
AGUA	#00FFFF	RGB(0, 255, 255)
GRANATE	#800000	RGB(128, 0, 0)
PÚRPURA	#800080	RGB(128, 0, 128))
OLIVA	#808000	RGB(128, 128, 0)
GRIS	#808080	RGB(128, 128, 128)
PLATA	#C0C0C0	RGB(192, 192, 192)
ROJO	#FF0000	RGB(255, 0, 0)
FUCSIA	#FF00FF	RGB(255, 0, 255))
AMARILLO	#FFFF00	RGB(255, 255, 0)
BLANCO	#FFFFFF	RGB(255, 255, 255)

Le invitamos a mirar el siguiente video para la creación de una cuenta en WordPress

Ejercicio de repaso:

Para demostrar la utilidad del código CSS en el diseño de páginas web, por favor incluya en el código HTML diseñado anteriormente, las siguientes sentencias:

<html>

<head>

<style type="text/css">

body {background-color: yellow}

h1 {background-color: #00ff00}

h2 {background-color: transparent}

p {background-color: rgb(250,0,255)}

</style>

</head>

<body>

<h1>Este es el encabezado 1</h1>

<h2>Este es el encabezado 2</h2>

<p>Este es un párrafo</p>

</body>

</html>

Utilice Plunker para visualizar en tiempo real los siguientes cambios:

1. ¿Qué sucede al incluir la sentencia <p><a href="http://trustfortheamericas.org/"> Trust for the Americas </a></p>?

2. Intente describir lo que sucede cuando reemplaza body {background-color: yellow} por body { width: 600px; margin: 0 auto; background-color: red; padding: 0 20px 20px 20px; border: 80px solid yellow;}

A medida que se visualiza cada cambio en el visor web, imagine el ilimitado número de posibilidades disponibles para innovar en el contenido de una página web.