Lenguaje CSS
El lenguaje CSS es un lenguaje que determina el estilo de los documentos HTML. Abarca
opciones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo,
entre otros.
Los lenguajes de hojas de estilo surgieron con la introducción de Internet y el crecimiento
exponencial del lenguaje HTML para la creación de documentos electrónicos.
El organismo W3C (World Wide Web Consortium) es el encargado de crear todos los estándares relacionados
con la web y fue el que propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML.
Se escogieron dos propuestas: la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet
Proposal).
La adaptación del lenguaje CSS por parte de los navegadores ha sido progresiva y ha requerido un largo tiempo.
En la actualidad todos lo reconocen.
Importancia del uso del lenguaje CSS
El lenguaje CSS se ha convertido en una revolución en el ámbito del diseño web especialmente. Entre los
beneficios que se encuentran al utilizar éste se destacan los siguientes:
Más precisión: Cuando se utiliza CSS, el tamaño y posicionamiento de los elementos que conforman las web
será exacto. Se le puede indicar al navegador en qué píxel colocar una determinada imagen, así como las
medidas de éstas.
El CSS da mejor accesibilidad y estructura. Al combinar el lenguaje CSS y los marcadores descriptivos se
posibilita que una web se vea correctamente puesto que la información se mantendrá estructurada y ordenada.
Mejora los tiempos de carga: Con la introducción del CSS se ha dividido contenido y apariencia, por lo que
se obtienen archivos más ligeros. Esto es ventajoso para reducir los tiempos de carga del sitio en el navegador
y bajar el volumen de tráfico del servidor que se ha escogido.
Cascade Style Sheet u hojas de estilo en cascada, es un lenguaje de diseño que se utiliza para definir y
establecer el aspecto visual de un código web escrito en un lenguaje de marcado, como HTML o XHTML. Es
una forma de aportar efectos y ‘belleza’ a los elementos diseñados.
Para implementar el CSS en alguna página HTML, debemos escribirlo dentro del elemento style:
<style type=»text/css»>
//Estilo CSS aquí
</style>
o mediante el atributo class de los elementos HTML:
<p class=»estilo-css»>Texto de prueba</p>
Fundamentos de programación
6to cuatrimestre
Ejemplos de CSS
Colocar una imagen de fondo:
<html>
<head>
<style type=»text/css»>
body {background-image: url(‘TU_IMAGEN.jpg’)}
</style>
</head>
<body>
</body>
</html>
Con este extracto de código añadimos una imagen al elemento body (cuerpo de la página), por medio de la
URL de origen de la imagen, la cual aparecerá las veces que usemos la etiqueta <body> en todo el desarrollo
web.
Cambiar el color de varios elementos de la página:
<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>
Fundamentos de programación
6to cuatrimestre
<h1>Título 1</h1>
<h2>Título 2</h2>
<p>Texto de ejemplo.</p>
</body>
</html>
Aquí estaremos cambiando el color de fondo de las fuentes utilizadas con las etiquetas h1, h2, p. Luego se crea
elcuerpo deldocumento web y se realiza el llamado a esas etiquetas que ya tendrán los atributos de color antes
descritos en style.
Resaltar los enlaces con CSS:
El elemento ‘a’ se usa para colocar un enlace. Este elemento tiene tres estados:
a:link, cuando el enlace no ha sido clicado
a:hover, cuando estamos encima del enlace
a:visited, cuando el enlace ha sido clicado
<html>
<head>
<style type=»text/css»>
a:hover { font-size:20px; color:#100;}
</style>
<body>
< a href= «[Link] clave o nombre de enlace</a>
</body>
</head>
</html>
Fundamentos de programación
6to cuatrimestre
Lenguaje JavaScript
JavaScript (JS) es un lenguaje de programación ligero, interpretado, o compilado justo-a-tiempo (just-in-time)
con funciones de primera clase. Si bien es más conocido como un lenguaje de scripting (secuencias de
comandos) para páginas web, y es usado en muchos entornos fuera del navegador, tal como
Node El lenguaje CSS es un lenguaje que determina el estilo de los documentos HTML. Abarca
opciones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo,
entre otros.
JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como
orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.
JavaScript es el lenguaje de programación encargado de dotar de mayor interactividad y dinamismo a las
páginas web. Cuando JavaScript se ejecuta en el navegador, no necesita de un compilador. El navegador lee
directamente el código, sin necesidad de terceros.
JavaScript es un lenguaje de programación que se utiliza principalmente para
crear páginas web dinámicas. Una página web dinámica es aquella que
incorpora efectos como texto que aparece y desaparece, animaciones, acciones
que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.
Ejemplos de código JavaScript
Visualizar por pantalla un mensaje de bienvenida
En nuestro primer ejemplo, simplemente, crearemos un Javascript que lo que hará es visualizar
un mensaje de bienvenida cuando el usuario entre a la página Web. Cada vez más, las páginas
Webs muestran un mensaje de este tipo para dar la bienvenida cuando se entran en ellas.
Como se puede apreciar el código Javascript se coloca (o se embebe) dentro de uno de HTML,
encerrándolo entre las etiquetas < script>< /script>.
Abre el bloc de Notas, copia el código anterior y guárdalo como [Link]. (Si no te apetece
hacer esto puedes abrir el mismo desde el directorio Ejemplos I). Después, ejecútalo pulsando doble
clic con el ratón.
Fundamentos de programación
6to cuatrimestre
Botón para volver hacia atrás
Se trata de un botón para volver hacia atrás, a semejanza del que tenemos en la barra de
herramientas del navegador. Al pulsar el botón se realiza una instrucción Javascript.
Dicha instrucción Javascript, llamada [Link](-1), se encuentra dentro de un atributo de HTML,
onclick, lo cual indica que esa instrucción SOLAMENTE se ejecutará cuando se realice la pulsación
del botón, representado por la etiqueta HTML INPUT. Un poco más técnico, el evento es pulsar el
botón (onclick) y la acción ([Link](-1)) es volver a la página anterior en el historial de
navegación. Para verlo correctamente, ejecuta primero [Link]! (Necesita el Ejemplo02
alguna página para volver para atrás).
Imprimir una página Web
Este ejemplo es tan sencillo como práctico. Con Javascript también podemos imprimir una página
Web. Simplemente ejecutando la función "[Link]()" se imprimirá todo el contenido de la página
actual.
En este caso, hemos incluido un botón INPUT que al pulsarlo (onClick) se realiza la acción de
imprimir la página.
Este ejemplo es muy útil para incluir en páginas que no incluyen las barras típicas del explorador
(por decisión del diseñador) y que por lo tanto en ellas no se puede ejecutar la opción típica de
Archivoà Imprimir…propia del Navegador. De esta forma se podría meter un botón que imprimiera el
contenido de dicha página tal como muestra el ejemplo.
Fundamentos de programación
6to cuatrimestre