TUTORIAL HTML y CSS – PARTE I
CONCEPTOS BÁSICOS
HTML: Lenguaje de Marcado de Hipertexto (Hypetext Markup Language). Por medio de
html se generará la estructura de una página web.
CSS: Hojas de Estilo en Cascada (Cascading Style Sheet). Por medio de css se aplicarán
estilos a los objetos que se encuentran en la página web, esto es, los que fueron
creados con html.
Cuando se visita un sitio web, lo que sucede es que un explorador (ej: Chrome) realiza
una petición a un servidor solicitando el acceso a archivos con estructura html. El
servidor enviará esa información por medio del protocolo “http”.
De manera inicial, es clave comprender que un sitio web se constituye de muchos
archivos html. Y que la navegación se da al “saltar” o “visitar” diferentes archivos
html.
▪ Actividad 1: Consulte sobre el protocolo HTTP.
▪ Actividad 2: Exploradores que más se usan actualmente.
PREPARACIÓN DE DOCUMENTOS
a) Descargue e instale el programa SUBLIME TEXT. Link: http://www.sublimetext.com/
b) Crear una carpeta donde se guardarán los archivos a trabajar. Esta carpeta será el
“Sitio Local” el cual contiene todos los archivos (imágenes, estilos, html, videos, etc)
que constituyen el sitio web.
c) Al abrir Sublime Text, guarde el archivo con el nombre “index.html” → NOTA: Debe
digitar literal la extensión del archivo, en este caso .html → Index es el archivo por
defecto que buscará un explorador cuando se digita un
dominio cualquiera (ej: “mineducacion.gov.co”). Sin embargo se puede configurar el
servidor para que dirija la solicitud a otro archivo.
▪ Actividad: Consulte los términos: dominio, servidor, hosting.
d) Cree un nuevo archivo y guárdelo como “estilos.css”
→ NOTA: No olvide digitar literal la extensión del archivo, en este caso .css
Imagen 1. Carpeta Mi Sitio con los archivos "index.html" y "estilos.css"
NOCIONES BÁSICAS HTML
HTML se trabaja con etiquetas (“tag” en inglés). Una etiqueta se abre y se cierra con
los símbolos de menor y mayor respectivamente. Ejemplo: <table>
La mayoría de objetos tienen etiquetas de apertura y etiquetas de cierre. La forma de
escribirlas se muestra a continuación respectivamente: <table> </table>
La estructura básica del html es:
▪ <html>: Esta etiqueta debe abarcar todo lo que constituya el documento.
▪ <head>: Contiene información que caracteriza el documento pero que no incluye
objetos de la interfaz con los que interactuará el usuario.
→ Incluye información como el título del documento <title>
→ Manejo de caracteres especiales para poder escribir en español <meta> →
Enlace de archivos externos como hojas de estilos (css) y programación en
javascript. <link>
▪ <body>: Contiene los objetos donde se dispondrá la información, tales como
imágenes, tablas, videos, bloques, etc.
NOCIONES BÁSICAS CSS
CSS se trabaja con reglas. Una regla busca darle estilos (propiedades) a un objeto. Por
tal motivo debe indicar o seleccionar el objeto al cual se aplicarán las propiedades, las
propiedades y sus valores correspondientes.
Una regla que pretenda estilizar el cuerpo del documento puede contener:
Imagen 2. Ejemplo de una regla en CSS
De manera abstracta una regla CSS está constituida por: selector y propiedades con
sus valores.
Imagen 3. Abstracción de las reglas en CSS. Selectores, propiedades y valores se observan.
TUTORIAL HTML y CSS – PARTE II
PRIMEROS PASOS
1. En sublime inicie con las etiquetas básicas de un documento html tal como se indica a
continuación. Nótese que la etiqueta “html” contiene todo. Que “head” contiene “title”
y es independiente a “body”, esto es, nunca deben cruzarse el “head” y el “body”.
Imagen 4. Estructura básica de un documento html
→ TIP: Este resultado se puede lograr con tan sólo escribir: “html” Seguido por la
tecla tabulador.
2. TITULO DEL HTML: A continuación digite “Ejercicio Diseño Web” entre la etiqueta de
apertura y de cierre del título.
Imagen 5. Ajuste del titulo del documento HTML por medio de la etiqueta <title>
3. PREVISUALIZAR EN EL NAVEGADOR: Haga clic derecho en cualquier lugar del
documento html y a continuación seleccione “Open in Browser”.
Imagen 6. Previsualización en el explorador
4. Como puede notarse la letra “ñ” no es representada adecuadamente, esto se resuelve
con la etiqueta <meta> que posee un atributo “charset” (conjunto de caracteres).
Imagen 7. Etiqueta <meta> para la codificación de caracteres especiales
NOTA: Observe que las etiquetas toman color rojo, los atributos de las etiquetas
color verde y los correspondientes valores a cada atributo, color amarillo. Ejemplo
lúdico: A continuación se observa un objeto, con atributos y sus valores
correspondientes.
Imagen 8. Ejemplo lúdico sobre eiquetas como objetos junto con sus atributos
Al previsualizar los caracteres especiales (como la ñ) deben mostrarse bien.
5. ENLACE DE LA HOJA DE ESTILOS: La siguiente línea de código permitirá incluir la
hoja de estilos que fue creada. Deben incluirse los 3 atributos. Debe incluirse en el
“head”, esto es, antes del cierre </head>.
Imagen 9. Enlace de un hoja de estilos por medio de la etiqueta <link>
rel: Relación del enlace = “hoja de estilos”.
type: Tipo de documento, ¿cómo está escrito? = “texto /css”
href: Ruta o dirección del archivo, respecto al archivo desde donde se enlaza, para
este ejercicio, el .css se encuentra al lado del .html por ende se indica una ruta con
el sólo nombre del archivo pues no se debe dirigir a subcarpetas o carpetas
externas.
Para comprobar el correcto enlace del archivo de estilos al archivo html se comprobará de
la siguiente manera:
6. COMPROBAR EL ENLACE: En el archivo “estilos.css”, generar la siguiente regla:
Imagen 10. Regla generada en estilos.css
La siguiente imagen muestra lo que se obtiene como resultado al previsualizar. Es claro la
modificación de color de fondo así como la aparición correcta de la palabra “Diseño” en el
título.
Imagen 11.
Previsualización final de la preparación de un documento HTML con una hoja de estilos enlazada
Imagen 12. Código final
TUTORIAL HTML y CSS – PARTE III
MAQUETACIÓN - DIAGRAMACIÓN
La maquetación de una página se realiza por medio de bloques. Estos bloques permitan
segmentar o dividir el espacio para su posterior adición de contenido. → TIP: Existen
varios framewoks que agilizan el trabajo de estilización y diagramación de una página
web. Entre otros se destacan: Bootstrap, Foundation, 960 Grid System, Font Awesome.
1. ETIQUETA DIV: La diagramación por bloques se realiza por medio de la etiqueta
<div>. A continuación se abordarán los temas básicos para el trabajo de un div, para
luego comentar los aportes generados por la especificación de html5.
Imagen 13. Etiqueta <div>
El principal atributo, e indispensable, es el “id” el cual permite darle una
identificación única lo que permitirá aplicarle estilos de manera específica.
NOTA 1: La etiqueta <div> por sí sola, sin contenido, no genera ninguna
visualización, es necesario aplicarle estilos a este objeto para poder percibirlo. NOTA
2: Un div se comporta por defecto como un bloque ocupando toda la franja horizontal
que determine su altura. Esto es, que el contenido que continúe irá debajo del div. Se
deberán añadir propiedades para poder romper esta estructura rígida.
2. APLICACIÓN DE ESTILOS A UN DIV: La siguientes líneas de código son los
elementos básicos para poder visualizar el div como un bloque.
Imagen 14. Regla CSS para aplicar de estilos a un objeto cuyo id = contenedor
La forma de referenciar un objeto html cuyo id es contenedor, es con el símbolo
“#”.
Las propiedades siempre están en inglés, las unidades de tamaño en píxeles, los
colores se pueden especificar en inglés, o en RGB o hexadecimal como se verá más
adelante.
Imagen 15. Resultado de estilizar un div
3. MODELO DE CAJAS: Los estilos se aplican a un div teniendo en cuenta el concepto
de “modelo de cajas” que se trabaja en CSS. Esto implica que se tienen las siguientes
propiedades:
Content: Contenido. Comprende el contenido de la caja. Texto o imagen.
Padding: Relleno. Espacio alrededor del Content. Se afecta por el color del
contenido.
Border: Borde. Área que abarca el Padding (relleno) y el Content
(contenido). Puede estilizarse en grosores, tipos y colores.
Margin: Margen. Área alrededor del borde. Genera separación de los
objetos aledaños. Es transparente.
Imagen 16. Modelo de cajas CSS
Los siguientes div’s tienen el mismo “ancho” (width) pero diferentes rellenos y bordes
(padding, border). Esto genera un cambio inesperado en los objetos como se puede
evidenciar aún y cuando se ajusta el mismo ancho.
Imagen 17. Resultado de objetos que difieren en el relleno y el borde.
Imagine dos div’s, cada uno con un ancho del 50%. Debería poder quedar uno al lado
del otro. Sin embargo, por estos efectos se desajusta el ancho especificado. La forma
de solucionar este inconveniente es con la propiedad “box-sizing: border-box” que por
conveniencia se aplica a todos los objetos.
4. BOX-SIZING: Esta propiedad permite resolver el inconveniente que se tiene en tanto
se añade propiedades de relleno y borde a un objeto y esto hace que su tamaño se
agrande. Resultaría incomodo hacer cuentas para restarle esos valores al ancho. Por
lo que esta propiedad permite restringir el ancho de un objeto al valor que se
especifica en su propiedad “ancho” (width). La propiedad es la siguiente:
Imagen 18. Propiedad box-sizing para restringir el efecto del relleno y el borde de un objeto al ancho
especificado.
El selector “*” (asterisco) permite aplicarle las propiedades relacionada a todos los
objetos que existan en el html. Esto es de gran utilidad para no aplicarle a cada
objeto individualmente.
El resultado de aplicar esta propiedad es:
Imagen 19. Comparación de 2 div's con rellenos y bordes diferentes, pero aplicando el box-sizing
NOTA: Se recomienda el uso de esta propiedad, aplicándola a todos los objetos (*)
para el desarrollo de todos los ejercicios.
5. ELEMENTOS FLOTANTES: La propiedad FLOAT permitirá ubicar un div al lado de
otro. Básicamente, se pretende que un elemento “flote” a la izquierda o a la derecha
tanto como su elemento padre le permita. El objeto flotará hacia algún lado, no
flotará hacia arriba o abajo.
Los elementos que se encuentran después del objeto flotante, fluirán alrededor de él.
Los elementos que anteceden el objeto flotante, no se verán afectados.
Imagen 20. Propiedad float
6. ANIDACIÓN DE DIV’s: Un div puede contener otros varios, básicamente habría que
insertarlos entre la etiqueta de apertura y la de cierre del div que funcionará como
“contenedor”. Si las medidas de los objetos “hijos” (internos) se trabajan con
porcentajes, estas serán relativas al objeto “padre” (contenedor).
Imagen 21. Anidación de div's. Un elemento contenedor y dos paneles internos.
El “contenedor” posee fondo azul y borde rojo, tiene el 80% del tamaño del <body>
(que por defecto está determinado por la ventana del explorador, esto significa que si
se redimensiona la ventana del explorador, las dimensiones se ajustarán, caso
contrario a las medidas fijas en píxeles).
Adicionalmente, se añadió la propiedad “margin: auto;” la cual permite centrar
horizontalmente el contenedor.
Los dos elementos “hijos” panelIzquierdo y panelDerecho están flotando a la izquierda.
Por ende, la posición más a la izquierda la ocupará el primer elemento en el html,
panelIzquierdo, que es el que tiene un ancho del 30%.
Las alturas de los dos paneles están en porcentajes, para que sea relativa al elemento
contenedor. Esto significa que con sólo cambiar la altura del contenedor, los dos
paneles se ajustarán al total de esa medida (100%).
Actividad de Maquetación:
Realizar los siguientes ejercicios. Tenga en cuenta que en algunos casos requiere de div’s
anidados, donde el padre básicamente sirva para restringir tamaños, o sea, no existirá
como bloque pero si puede restringir el tamaño de otros div’s.
Maquetación básica 1:
Ajuste las proporciones de alturas aproximadas con un ancho del 90%.
Maquetación básica 2:
Ajuste las proporciones de alturas aproximadas con un ancho del 90%.
Maquetación básica 3:
Ajuste las proporciones de alturas aproximadas con un ancho del
90%.
