Tabla de contenido
1 ¿Qué es CSS? ......................................................................................... 2
1.1 ¿Qué significa CSS? ................................................................................ 4
1.2 ¿Para qué sirven los estilos CSS? ........................................................... 4
1.3 ¿Cuándo usar CSS? ................................................................................ 6
1.4 ¿Cómo aplicar CSS a un documento HTML?........................................... 8
2 Estructura de un documento HTML .......................................................... 8
2.1 Estructura del cuerpo ............................................................................. 11
3 Bibliografía.............................................................................................. 21
1 ¿Qué es CSS?
CSS es un mecanismo complementario del lenguaje HTML que permite indicarle al
navegador el estilo que debe darles a los distintos elementos al desplegar la
información de un sitio web.
Mientras que los comandos HTML le indican al navegador que ciertas partes del
texto son títulos, subtítulos, enlaces o párrafos, CSS es lo que le dice, entre otras
cosas, qué fuente, tamaño, color o alineación debe tener un elemento de la página.
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 2
Hay una gran diferencia en la manera como se visualiza un sitio con comandos CSS
y uno que no los tiene:
El sitio de la BBC, con CSS (izquierda) y sin CSS (derecha)
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 3
De hecho, puedes comprobarlo tú mismo. Abre cualquier sitio web y selecciona
“desactivar estilos > Hojas de estilo enlazadas” en el menú de la barra de
herramientas, y verás lo aburrido que se vuelve.
1.1 ¿Qué significa CSS?
CSS significa Cascade Style Sheets, que se traduce al español como “Hojas de
Estilo en Cascada”. Las hojas de estilo son un recurso que existe desde que se
usaba el antecesor del HTML: el SGLM, un lenguaje para crear documentos
electrónicos que nació a inicios de los 70´s.
Con el auge del internet, el HTML y la diversificación de navegadores (que no son
más que programas que permiten interpretar y mostrar la información en los sitios
web), se hizo necesario estandarizar los comandos, y de un esfuerzo de la World
Wide Web Consortium (W3C) surgió el lenguaje CSS actual.
1.2 ¿Para qué sirven los estilos CSS?
Los estilos CSS son algo que puedes agregar de manera individual a cada elemento
de tu plantilla HTML, pero esto resulta engorroso e impráctico. Cuando enlazas una
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 4
página HTML a una hoja de estilos CSS, ésta tiene una serie de comandos que
modifican a todos los elementos que concuerden con determinado criterio.
Dicho de otro modo, es más fácil y rápido enlazar tu plantilla HTML a un archivo
CSS para que el navegador entienda que debe desplegar todos los Títulos H2 en
azul, antes que integrar un comando de estilo independiente para cada H2 que
incluyas en tus páginas.
Otra de las ventajas del CSS es que puedes usar una misma plantilla para darle
formato a varios sitios web, y si necesitas hacer cambios basta con modificar el
elemento en la plantilla y actualizar los sitios vinculados.
Pero el CSS no se limita a darle formato a un texto. En conjunto con Javascript, sus
aplicaciones actuales en un sitio web son muchísimas. Por ejemplo, también sirve
para ordenarle al navegador que cambie el color de un hipervínculo para que el
usuario sepa que ya lo visitó, diseñar menús y listas desplegables o incluso crear
elementos interactivos. Para que te des una idea de lo complejas que pueden ser
las creaciones CSS.
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 5
1.3 ¿Cuándo usar CSS?
Aprender a crear hojas de estilo CSS será fundamental para poder desarrollar una
página web desde cero, o para personalizar cualquier detalle de diseño de una web
con la que trabajes.
Muchos sitios como WordPress te ofrecen la posibilidad de seleccionar entre
plantillas de estilo prediseñadas y construir una página web simplemente
“arrastrando y soltando” sin necesidad de meterte con el código, pero para cualquier
sitio que necesite más personalización, es necesario recurrir a la programación
directa en HTML, y, por consiguiente, aplicar hojas de estilo en cascada.
Componentes de una hoja de estilo en CSS
Una hoja de estilo se compone de un listado de reglas o comandos que constan de
un selector y una declaración:
• Selector: Es el elemento sobre el cuál va a aplicarse cierto estilo, puede ser
un H1, H2, un párrafo, un formulario, etc.
• Declaración: Se compone de una propiedad (color, ancho, fuente, etc) y
un valor (rojo, verdana, alineación izquierda, etc).
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 6
Si tenemos, por ejemplo:
Le estamos indicando al navegador que despliegue el Título 1 del documento en
color rojo y centrado.
Si tenemos:
Le estamos diciendo que despliegue los párrafos con un tamaño de fuente de 60px,
en color negro y con alineación a la izquierda.
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 7
1.4 ¿Cómo aplicar CSS a un documento HTML?
Imaginemos que ya tienes tu documento HTML y quieres aplicarle los comandos de
una hoja de estilos CSS. Tienes dos formas de hacerlo. La primera es enlazar el
HTML al documento CSS mediante un link que se coloca en la sección del head (es
decir, entre <head> y </head> del código HTML) con el elemento:
La otra opción es copiar y pegar los comandos CSS directamente en la sección
<head> con el elemento <style type = “text/css”>.
2 Estructura de un documento HTML
Los documentos HTML se encuentran estrictamente organizados. Cada parte del
documento está diferenciada, declarada y determinada por etiquetas específicas.
La primera etiqueta que debemos encontrarnos SIEMPRE, en la primera línea del
archivo y sin espacios o líneas que la precedan, es el tipo de documento:
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 8
Lo siguiente que debemos hacer es construir la estructura html, en la medida de lo
posible especificando el atributo del idioma lang en el que está escrito la página:
Una vez dentro de la estructura en árbol de html y antes de empezar a escribir el
contenido, debemos declarar la etiqueta head, responsable, entre otras cosas, de
definir:
• el juego de caracteres en el que está escrito el documento, y que en el caso
del idioma español será utf-8 a través de una etiqueta tipo meta charset
• el título, a través de la etiqueta title
• la descripción de nuestro documento, a través de la etiqueta meta description
• las palabras clave de nuestro documento, separadas por comas a través de
la etiqueta meta keywords
• enlaces a archivos CSS y de fuentes, a través de etiquetas tipo link
• código Javascript, a través de la etiqueta script
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 9
Y por fin, declararemos la etiqueta body, correspondiente al cuerpo de nuestro
documento, esto es, la parte visible.
El siguiente código muestra la estructura completa de una página web sencilla:
Otro importante elemento que va dentro de la cabecera del documento es link. Uno
de los usos más comunes para link es la incorporación de archivos con estilos CSS,
donde el atributo rel significa “relación” y es acerca de la relación entre el documento
y el archivo que estamos incorporando por medio de href. En nuestro caso, el
atributo rel tiene el valor stylesheet que le dice al navegador que el archivo [Link]
es un archivo CSS con estilos requeridos para presentar la página en pantalla, algo
que veremos más adelante. También utilizaremos la etiqueta link para añadir
tipografías de fuentes.
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 10
2.1 Estructura del cuerpo
La estructura del cuerpo (el código entre las etiquetas body) generará la parte visible
del documento.
HTML siempre ofreció diferentes formas de construir y organizar la información
dentro del cuerpo de un documento, primero mediante tablas con la etiqueta table,
y posteriormente con el surgimiento de webs más interactivas y la integración de
HTML, CSS y Javascript mediante el uso de etiquetas div o contenedor divisor del
cuerpo.
El problema es que ni table ni div dan información del tipo de contenido, algo poco
importante para el usuario pero necesario para que los navegadores interpreten qué
tipo de información hay en cada bloque del documento.
Poniendo como ejemplo una página de un blog, normalmente nos encontramos con
5 partes diferenciadas, tal y como muestra la siguiente imagen:
1. Cabecera (elemento header): espacio donde usualmente se ubica el logo,
título, subtítulos y una corta descripción del sitio web o la página.
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 11
2. Barra de navegación (elemento nav): menú o lista de enlaces con el propósito
de facilitar la navegación a través del sitio.
3. Información principal (elementos section y article): ubicada en el centro y en
el caso de un blog normalmente con un listado de artículos, productos,
imágenes o similar.
4. Barra lateral (elemento aside): es opcional, y podría mostrar, por ejemplo,
una lista de enlaces apuntando hacia cada uno se esos ítems, un calendario
de eventos o anuncios.
5. Institucional o pie (elemento footer): es el área en donde normalmente se
muestra información acerca del sitio web, el autor o la empresa, además de
algunos enlaces con respecto a reglas, términos y condiciones y toda
información adicional que el desarrollador considere importante compartir.
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 12
Fuente: Juan Diego Gauchat. El gran libro de HTML5, CSS3 y Javascript
De este modo, si el esquema clásico de diseño de una página web es similar al
mostrado en la siguiente figura de la izquierda, HTML5 incorpora nuevos elementos
que proporcionan dicha información, y que convertirían el diseño anterior en la
siguiente estructura HTML5 (figura de la derecha):
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 13
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 14
Dentro del cuerpo
El contenido de nuestra página estará compuesto por diferentes elementos visuales
tales como títulos, textos, imágenes, videos y aplicaciones interactivas, entre otros.
Necesitamos poder diferenciar estos elementos y establecer una relación entre ellos
dentro de la estructura.
Así, del mismo modo que los blogs están divididos en entradas, sitios web
normalmente presentan información relevante dividida en partes que comparten
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 15
similares características. El elemento article, normalmente ubicado dentro de un
elemento de tipo section, nos permite identificar cada una de estas partes.
El elemento article no está limitado por su nombre (no se limita, por ejemplo, a
artículos de noticias). Este elemento fue creado con la intención de contener
unidades independientes de contenido, por lo que puede incluir mensajes de foros,
artículos de una revista digital, entradas de blog, comentarios de usuarios,
productos de una tienda online, etc... Lo que hace es agrupar porciones de
información que están relacionadas entre sí independientemente de su naturaleza.
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 16
Como una parte independiente del documento, el contenido de cada
elemento article tendrá su propia estructura. Para definir esta estructura, podemos
aprovechar la versatilidad de los elementos header y footer estudiados
anteriormente. Estos elementos son portables y pueden ser usados no solo para
definir los límites del cuerpo sino también en cualquier sección de nuestro
documento.
Dentro de cada elemento header, en la parte superior del cuerpo o al comienzo de
cada article, incorporamos elementos h1 para declarar un título. Básicamente, las
etiquetas h1 son todo lo que necesitamos para crear una línea de cabecera para
cada parte del documento, pero es normal que necesitemos también agregar
subtítulos o más información que especifique de qué se trata la página web o una
sección en particular.
Para ello, podemos aprovechar el resto de las etiquetas H, como h1, h2, h3, h4, h5
y h6, pero siempre considerando que por propósitos de procesamiento interno, y
para evitar generar múltiples secciones durante la interpretación del documento por
parte del navegador, estas etiquetas deben ser agrupadas juntas. Por esta razón,
HTML5 provee el elemento hgroup, que nos permite agrupar título y subtítulo para
que los navegadores generen correctamente la estructura:
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 17
Nota: si no tenemos subtítulo, esta etiqueta hgroup no es necesaria.
La etiqueta figure fue creada para ayudarnos a ser aún más específicos a la hora
de declarar el contenido del documento. Antes de que este elemento sea
introducido, no podíamos identificar el contenido que era parte de la información
pero a la vez independiente, como ilustraciones, fotos, videos, etc... Normalmente
estos elementos son parte del contenido relevante pero pueden ser extraídos o
movidos a otra parte sin afectar o interrumpir el flujo del documento. Así, por
ejemplo, la forma correcta de insertar una imagen en nuestra estructura HTML5
sería:
Se detallan a continuación algunas otras etiquetas introducidas en HTML5 y que se
han comentado en el video anterior:
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 18
• La etiqueta mark fue agregada para resaltar parte de un texto que
originalmente no era considerado importante pero ahora es relevante acorde
con las acciones del usuario. El ejemplo que más se ajusta a este caso es un
resultado de búsqueda.
• La etiqueta em es para indicar énfasis, reemplazando la etiqueta i que se
utilizaba antes.
• La etiqueta strong es para indicar importancia, marcando en negrita el texto
dentro de ella, y sustituye a la etiqueta b que se utilizaba antes.
• La etiqueta small tiene el propósito de presentar la llamada letra pequeña,
como impresiones legales, descargos, etc...
• La etiqueta cite se utiliza para presentar títulos de libros, películas, etc.
• La etiqueta address se debe utilizar para encerrar direcciones de correo
electrónico o enlaces a páginas web
• El elemento time nos permite declarar un texto comprensible para humanos
y navegadores que representa fecha y hora
Mi coche es rojo, esto es un texto enfatizado y esto es un texto importante
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 19
Esto es letra pequeña y esto el título de una película
Enlace a Google
publicado el 09-10-2017 a las 12:10:45
Listas y Tablas
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 20
3 Bibliografía
• [Link]
• [Link]
web-con-html5-css3-y-javascript/estructura-de-un-documento-html
CURSO VIRTUAL EN: INTERNET Y ESTRATEGIAS DE DISEÑO DE PÁGINAS
WEB
UNIDAD DIDÁCTICA 1: CONCEPTOS BÁSICOS DE TECNOLOGÍAS WEB
DOCUMENTO: HTML Y CSS
Pág. 21