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 COLORCOD HEX DEL COLORCOD RGB DEL COLORNEGRO #000000RGB(0, 0, 0)AZUL OSCURO #000080RGB(0, 0, 128)AZUL #0000FFRGB(0, 0, 255)VERDE #008000RGB(0, 128, 0)VERDE AZULADO #008080RGB(0, 128, 128)LIMA #00FF00RGB(0, 255, 0)AGUA #00FFFFRGB(0, 255, 255)GRANATE #800000RGB(128, 0, 0)PÚRPURA #800080RGB(128, 0, 128))OLIVA #808000RGB(128, 128, 0)GRIS #808080RGB(128, 128, 128)PLATA #C0C0C0RGB(192, 192, 192)ROJO #FF0000RGB(255, 0, 0)FUCSIA #FF00FFRGB(255, 0, 255))AMARILLO #FFFF00RGB(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.
