Bienvenidos a este mini-vídeo
cuyo título es "CSS: ejemplo básico".
Mi nombre es Emilio Letón
y pertenezco al departamento de Inteligencia Artificial de la UNED.
En este mini-vídeo se trata de dar a conocer la tecnología CSS,
"Cascading Style Sheets" u "Hojas de estilo en cascada",
que permite dar estilo a un documento HTML
separando su contenido de la forma en qué va a ser visualizado.
Imaginemos que tenemos la estructura tipo HTML
dada por la etiqueta de inicio html, ,
y la etiqueta de cierre html, ,
por la etiqueta de inicio head,
y de cierre head,
y por la etiqueta de inicio body,
y de cierre body, .
Para que la página web no esté completamente vacía,
escribiremos en la zona head un título descriptivo
dado por "CSS: ejemplo básico",
delimitado por la etiqueta de inicio title (título),
es decir,
y la etiqueta de cierre title, .
También escribiremos un pequeño texto en la zona body
dado por el texto "La ecuación de",
delimitado por la etiqueta de inicio p de "paragraph" (párrafo"),
,
y por la etiqueta de cierre p, .
Ahora en esta nueva transparencia añadiremos información adicional
dentro de la etiqueta de inicio body, para dar un color azul a la página.
Para ello escribimos
Donde el atributo bgcolor,
significa background color, color de fondo.
En este momento es bueno parar el mini-vídeo,
grabar el código escrito hasta ahora
en un archivo con extensión htm o html
y abrirlo con un navegador, para visualizar lo realizado.
En esta nueva transparencia que hemos llamado Body con estilo,
vamos a ver otra forma de conseguir el mismo efecto.
Para ello sustituimos la etiqueta de inicio de body por otra nueva
dada por <body style= "background-color:blue">
Esta forma es la que se va a generalizar
para separar la presentación del contenido utilizando CSS.
En esta transparencia que hemos llamado Body con hoja de estilo
escribimos, dentro de la zona head,
una etiqueta de inicio style con ,
a continuación body {background-color:blue}
y la etiqueta de cierre de style,
Con estas órdenes ya se puede dejar la etiqueta de inicio body
sin información adicional con ,
y así se ha conseguido separar la presentación del contenido.
Ahora vamos a practicar CSS sobre un párrafo.
Empezaremos primero sin estilo.
Imaginemos que el párrafo
está dado por el texto "La ecuación de 2º está dada por"
Delimitada por la etiqueta de inicio de párrafo
y por la etiqueta de cierre .
Sin utilizar estilo podemos dar a este párrafo una fuente,
por ejemplo, helvética.
Para ello delimitamos todo el texto anterior
por la etiqueta de inicio font dada por
y por la etiqueta de cierre font dada por .
En esta nueva transparencia vamos a ver
otra forma de conseguir el mismo efecto,
utilizando párrafos con estilo.
Para ello borramos la etiqueta de inicio de font
y la etiqueta de cierre de font de la transparencia anterior.
Y la etiqueta de inicio de párrafo
la sustituimos por ,
donde estamos usando el atributo estilo para indicarle la fuente.
Esta forma es la que se va a generalizar
para separar la presentación del contenido utilizando CSS.
En esta transparencia que llamamos Párrafos hoja de estilo (1/2)
escribimos dentro de la etiqueta style
que habíamos creado antes en la zona head,
y a continuación de body {bakground-color:blue}
lo siguiente p.normal{font-family:helvetica}
En esta segunda transparencia dedicada a Párrafos con estilo,
sustituimos la etiqueta de inicio de párrafo por esta nueva
Con este atributo class
se está diciendo que en este párrafo
el estilo va a ser el definido en p.normal
dentro de la hoja de estilo,
definida en la etiqueta style de la transparencia anterior.
De nuevo vemos
cómo hemos sonseguido separar la presentación del contenido.
En este momento es bueno volver a parar el mini-vídeo,
y grabar el código escrito hasta ahora
en un archivo con extensión htm o html
y abrirlo con un navegador, para visualizar lo realizado.
Para terminar vamos a ver
qué es lo que hemos visto en este mini-vídeo.
Intentad vosotros pararlo y escribid en esta transparencia
lo que hemos visto en él.
Yo voy a seguir, pero, repito, intentad pararlo y hacerlo vosotros.
Hemos visto que el lenguaje CSS se escribe dentro de la etiqueta style,
dentro, a su vez, de la zona head.
Hemos visto que con las hojas de estilo
se consigue separar la presentación...
del contenido.
Lo hemos visto aplicado a body
y, también, a un párrafo.
Por último recordaos que es conveniente ver
la información complementaria en la web asociada a este mini-vídeo.