Curso de HTML y CSS

Anatomía de una etiqueta

Dando por entendido que html es un lenguaje de marcado, en el que el contenido que ha de ser modificado visualmente ha de estar encerrado en una etiqueta, lo siguiente es hacer una “disección” de la etiqueta, a través de la cual podremos ver las distintas maneras que tenemos de apuntar a ella para darle formato.

Este es un texto de ejemplo en el que solamente <div id=”destacado” class=”botón destacado”>esta parte está encerrada en una etiqueta</div> y el resto no.

La etiqueta tiene:

Un nombre (en este caso div).
Los nombres de etiquetas pueden separarse en 2 grandes grupos: los que tienen una clara apariencia predefinida (diferente a “la nada”) y los que solo sirven para informar al navegador de qué parte de nuestra web estamos codificando.
En el primer grupo se encuentran (entre otras) todas las etiquetas destinadas a pre-formatear texto, como a, p, h1, h2, h3
En el segundo grupo podríamos incluir un montón de etiquetas html5 destinadas solo a informar al navegador de que el contenido al que estamos dando formato es parte del header, footer, nav, etc. Su uso no es “obligatorio” (podríamos codificar toda una página sin ellas, pero posicionaría peor, dado que que ayudan a los indexadores a entender mejor nuestra página)
De hecho (y aunque no es una práctica recomendada porque los Explorer antiguos no representan visualmente las etiquetas desconocidas) podríamos codificar nuestra página utilizando etiquetas inventadas y cualquier navegador moderno representaría su apariencia correctamente.

Una apertura
Que consiste en el nombre de la etiqueta encerrado entre mayor y menor: <div> y que puede tener distintos atributos que se representan como: <div nombreDelAtributo=”valorDelAtributo”>.

Hay unos cuantos atributos predefinidos.
Los dos más importantes son ID y CLASS

ID
Por convención ID es único, por tanto, no habrá en una web bien codificada dos etiquetas con el mismo ID, ni habrá una etiqueta con más de un id, puesto que no tendría ningún sentido.
Para dar formato a una etiqueta con el id nombreDeID (Por ej: <div id=”nombreDeID”>Texto del título</div>) escribiremos una “regla” en nuestra hoja de estilos que “apunte” a dicha etiqueta utilizando el símbolo numeral, seguido del ID, por ej: #nombreDeID{ }

CLASS
La clase es un atributo genérico, es normal codificar varias etiquetas con la misma clase, e incluso aplicarle más de una clase a una misma etiqueta (separandolas con espacios)
Por ejemplo, podemos destacar todos los textos de una sección con la clase “destacado”.

Un texto

otro texto

Para dar formato a una etiqueta con la clase “destacado” escribiremos una “regla” en nuestra hoja de estilos que apunte a dicha etiqueta utilizando el punto, seguido de la clase, por ej: .destacado{ }

Otros atributos
Algunas etiquetas con un nombre específico, tienen atributos predefinidos que extienden su funcionalidad, por ejemplo: la etiqueta a (que se utiliza para señalizar enlaces) tiene el atributo href que indica a donde enlaza esa etiqueta y el atributo target, que indica en qué ventana va a abrirse el enlace señalado.
Otro atributo conocido es el atributo src de la etiqueta img (que marca la ruta que utilizará el navegador para insertar la imagen).

Un cierre
El cierre marca el final de la zona etiquetada. Está compuesto por una barra que precede el nombre de la etiqueta a cerrar y no tiene identificadores, ni clases ni atributos (muy pocas etiquetas pueden expresarse cerrándose y abriendo a la vez, o dejándose sin cerrar y son las que no pueden contener nada dentro, por ejemplo o e input).

Crear la estructura HTML
http://www.idepbarcelona.com/info/estructura-html/

Etiquetas y atributos de vinculación de ficheros (imágenes, js, css y tipografías)
En un ejemplo previo hemos visto que la vinculación de imágenes se hace utilizando una etiqueta concreta (img) a través de su atributo src

La vinculación de SVG es muy similar pero el atributo es diferente (poneos de acuerdo!)

Utilizando el mismo atributo (src), pero para una etiqueta diferente podemos vincular ficheros Javascript a la página HTML

En cuanto a las hojas de estilo, no están incrustadas sino vinculadas, y aunque el concepto es similar, el atributo es el mismo que se utiliza para los enlaces

La tipografía en particular se vincula, conceptualmente, de un modo totalmente diferente. Si bien se asigna como una propiedad más desde cualquier regla CSS, disponer de la tipografía seleccionada para poder utilizarla en nuestra página implica vincularla.

Cuando añadimos tipografía a traves de Google Fonts (o a traves de cualquiera de los otros proveedores de fuentes, incluyendo el haberla generado nosotros mismos con Fontsquirrel, Fontello o similar) lo que hacemos es vincular una hoja de estilos extra a nuestro html, y es esta hoja de estilos la encargada de vincular las tipos que necesitamos.
Todas las vinculaciones (ya sea a fuentes o a imágenes que utilicemos como fondo) que hagamos desde la hoja de estilos tienen una peculiaridad, y es que se hacen en función de la ubicacion del fichero css.
Cuando la página html y el css estan en una misma carpeta este efecto no se aprecia, pero si por ejemplo, los css de nuestra página están en la carpeta “css” y las fuentes de nuestra página están dentro de una carpeta llamada “font” que a su vez está al lado de la carpeta css, la vinculación que hagamos deberá tener en cuenta el orden de los ficheros, y en este caso “salir” de la carpeta css, y entrar en la carpeta font. Por ejemplo: ../font/

@font-face {
font-family: ‘../font/jellyka_western_princessRg’;
src: url(‘../font/jellyka_western_princess-webfont.eot’);
src: url(‘../font/jellyka_western_princess-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘../font/jellyka_western_princess-webfont.woff2’) format(‘woff2’),
url(‘../font/jellyka_western_princess-webfont.woff’) format(‘woff’),
url(‘../font/jellyka_western_princess-webfont.ttf’) format(‘truetype’),
url(‘../font/jellyka_western_princess-webfont.svg#jellyka_western_princessRg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

Modificar la apariencia de una etiqueta
Modificar la apariencia visual de una etiqueta en particular encierra dos retos: Saber “apuntar” a la etiqueta que queremos modificar y conocer las propiedades debemos utilizar para conseguir la estética que queremos lograr.

Mas allá de un puñado de propiedades básicas que hemos visto (color, background-color, margin, padding, float, border) en los que la unica dificultad residia , si acaso, en usar valores porcentuales (o cálculos) para hacer paginas “flexibles”, hay una larga lista de propiedades que podemos utilizar para modificar la apariencia visual de una etiqueta. Para ver unas cuantas más:
http://www.mclibre.org/consultar/htmlcss/css/css_propiedades.html
http://www.virtualnauta.com/css-ejemplos
Además hay una gran cantidad de herramientas visuales útiles para generar propiedades CSS, por ejemplo:
http://css3gen.com/
Con el inspector de elementos es relativamente sencillo deducir e investigar cuáles son las propiedades que debemos aplicar a un elemento para que este se visualice como nosotros pretendemos:
http://www.idepbarcelona.com/info/inspector-de-elementos

Si acaso, la propiedad mas difícil de comprender es la de flotación (pero indispensable para hacer paginas responsivas), porque es la que hace que unos elementos se apoyen contra otros, posicionándose (si caben, y si no hay una orden como clear:both que lo impida) unos al lado de los otros en el orden que la flotación lo indique.

Por lo tanto, sabemos que podemos apuntar a una etiqueta utilizando:
El nombre de la etiqueta
El id de la etiqueta si lo tuviese
La clase de la etiqueta si la tuviese
La ruta de la etiqueta, es decir una suma de todo lo anterior, por ejemplo nav a { /*solo dará formato a los enlaces q están dentro de nav*/

Esto enlaza a la wikipedia

Estilos en cascada, agrupados, herencia, orden e important (new concept!)
Mas allá de “cómo apuntar” a una etiqueta conviene recordar algunas reglas propias del html y el css.
En mi primera instrucción defino que tanto los H1, como los p se verán en 12px y en verde.
Las órdenes aplicadas desde distintas reglas a una misma etiqueta, se suman o se sobreescriben dependiendo del orden en que hayan sido escritas estas reglas.
h1, p{
font-size=”12px”;
color=”green”;
}
p{
color=”red”;
}
Dará como resultado que los párrafos de nuestra web se verán a 12 pixeles y en rojo, sólo porque la orden “rojo” fue dada después. Esto, que es bastante sencillo de entender, se complica cuando la instrucción que está escrita antes posee una ruta mas específica (por ejemplo #idQueContieneMisP p { } es una orden mas “importante” aunque esté escrita antes que la que define a los textos en rojo sólo porque la ruta es más específica).

Para controlar esto sólo hay 2 trucos: el orden (el orden es el bueno) y la etiqueta “important” (important es el diablo, pero cuando lleguen a wordpress lo van a necesitar).
p{
color=”green !important”;
}
Important hace que esta orden sea prioritaria sin importar en qué orden está definida. Esto es peligroso porque las órdenes que escribamos después no la sobreescribirán, y si nuestra hoja css tiene muchos important podemos tener problemas al no seguir una lógica clara.

Estados
Además de los métodos tradicionales de apuntar a una etiqueta, tenemos selectores especiales que permiten seleccionar un estado, un número de nodo, o un nodo con unos valores de atributos específicos.
El primer selector de estado que vimos es también el mas antiguo, y es el que permite seleccionar un elemento, cuando estamos encima.
a:hover{
}
input:focus{
}

El auténtico reto esta en apuntar a una etiqueta cuando esta no tiene una clase o un identificador que podamos utilizar.

Selectores avanzados
Preparándonos para WordPress hicimos especial hincapié en los casos en los que intentaríamos apuntar a una etiqueta que no pueda ser identificada.
http://librosweb.es/css/capitulo_2/selectores_avanzados.html

Media Querys
Una vez hemos controlado cómo dar apariencia a nuestras etiquetas, sólo nos queda ajustar la visualización de nuestra página responsiva utilizando MediaQuerys. (lo que en la práctica es como tener estilos diferentes).
http://www.idepbarcelona.com/info/mediaquery/
http://www.idepbarcelona.com/info/emular-una-web-en-varios-dispositivos/


Víctor Maciel – Tel: +34 686378371 – www.bancodepruebas,de