Prof.

Yadelis Silva
yadelis@gmail.com

Hemos visto varias etiquetas HTML, semnticas, cuyo

objetivo como ya sabes, es aportar informacin sobre el
tipo de contenido de nuestras pginas.
Ahora bien, hay etiquetas que son ms genricas, que no
aportan informacin semntica, pero que son muy
necesarias por ejemplo para la maquetacin de nuestra
pgina.
Estos
elementos
son
los
archiconocidos
<div>.
Si necesitas maquetar un elemento de tu web y no
encuentras una etiqueta semntica que pueda dar
informacin sobre ese contenido: usa un <div>.
De alguna forma,un div es la expresin ms cercana a
una caja.

Hasta ahora hemos utilizado como selector, esto es, como identificacin de
elementos html para asignar estilos css, las propias etiquetas semnticas de los
elementos. Por ejemplo, para estilizar unh1, usbamos como selector elh1, para
estilizar unheader, usbamos como selector elheader.
Pero para poder estilizar elementos ms genricos como losdiv, necesitamos
usar otro tipo de selectores, para poder identificar cada elemento correctamente.
Para ello usamos los atributosid y class.
Tenemos fundamentalmente dos formas de identificar un elemento web que no
tienen informacin semntica:
id: el id es un atributo HTML que sirve paraidentificar inequvocamenteun
elemento en nuestro html, en nuestra pgina. Es decir, un idsolo
puedeidentificar aun elementoy por lo tanto no podemos repetir ese id en
nuestra pgina. Por tanto, los id son tiles cuando necesitamos etiquetar
elementos nicos en nuestro html.
Generalmente los id se usan para interactuar con nuestros elementos html desde
nuestros archivos javascript, o para poder interactuar con nuestros elementos
desde Analytics o Google Tag Manager.
Por ejemplo, si queremos saber si un usuario ha pulsado un botn en concreto de
nuestra web podemos asignar un id para identificar ese botn, que ser nico.

Para crear un atributo id dentro de la etiqueta

de nuestro elemento html, le asignamos un
valor, en este caso un nombre:
HTML:
<div id="caja-roja"></div>
Para referirnos a un id desde nuestro css,
usaremos el smbolo#seguido del nombre del
identificador. En este caso en concreto:
CSS:
#caja-roja {
background-color:red; }

clase:una clase es un atributo HTML que nos permiteidentificar

elementos que tienen caractersticas en comn. Una clase
viene a ser como un molde de galletas, el cual configuramos a
nuestro gusto y con el cual creamos elementos que sern iguales
entre s. Tendrn el mismo molde.
Lasclasesson sin duda,el atributo de html ms frecuenteya
que lo usamos bsicamente para dar estilo a elementos que tienen
las mismas caractersticas.
Una clase se declara en el html como cualquier atributo, asignndole
un valor, que en este caso ser el nombre de la clase:
HTML:
<div class="caja-roja"></div> Para interactuar con las clases que
hemos definido en nuestro html, usamos el.seguido del nombre de
la clase, por ejemplo:
CSS:
.caja-roja { background-color:red; }

Un elemento puede tener varias clasesy as puede adquirir

caractersticas de varios tipos de elemento. Dicho de una forma
simplificada: imagina que tenemos una clase declarada para
elementos que tienen un borde naranja de 2 px, y otra clase diferente
para elementos que tienen color azul.
Si queremos un elemento que tenga esas dos caractersticas, esto es,
fondo azul con borde naranja no tenemos que crear otra clase, sino
quele podemos asignar las dossimplementeseparandoambas
clases en nuestro atributo htmlcon un espacio:
CSS:
.borde-naranja{ border: 1px orange solid; } .fondo-azul{ backgroundcolor: blue; } HTML:
<div class="borde-naranja fondo-azul"></div> Esta es parte de
lamagiay lapotenciadel CSS y de lasclases.Por eso es muy
importante, antes de empezar un proyecto, reflexionar y analizar qu
clases vas a necesitar crear para el mismo.

Ya comentamos que todo elemento web se comporta como una caja, y

tambin vimos lo que es undiv, que no es otra cosa que un elemento
web sin significado semntico, una caja en su sentido ms general.
Algo fundamental en la maquetacin web es poder asignar un tamao
a un elemento web, a una caja. Pues bien,podemos dimensionar
una caja aportndole un ancho y un alto. Esto lo hacemos
asignndole los atributos CSSwidth y heighta dicho elemento.
Para asignar un valor de ancho o de alto a un elemento web, lo ms
sencillo es indicar el valor en pixeles. Pero vamos a ver un ejemplo.
Vamos a crear undiv, de color rojo y de dimensiones 50 px de
alto y 100 px de ancho.
Como un div es un elemento genrico, vamos a utilizar una clase como
selector de CSS:
HTML:
<div class="caja-roja"></div> CSS:
.caja-roja { background-color: red; width: 100px; height: 50px; }

Ahora bien, hoy da, aplicar valores absolutos para dimensionar un

elementono tiene demasiado sentido.
Uno de los requisitos que tiene que cumplir nuestros proyectos
web a da de hoy es que se adapte a cualquier tipo
depantalla.Nuestros diseos deben ser elsticos,
adaptativos.
Por ello tenemos que dimensionar nuestros elementos de forma
dinmica, para que puedan adaptarse a la pantalla de un
dispositivo mvil.
Hay muchas formas dedimensionar nuestros elementos de
forma dinmica, como por ejemplo, los%:
Al div anterior podemos decirle que ocupe la totalidad de la
pantalla independientemente de los pixeles que esta tenga. Basta
con indicarle unwidth del 100%, o indicarle un50%si queremos
que ocupela mitad de la pantalla:

Dimensionando una caja en pixeles o por

porcentaje de forma dinmica.
CSS:
.caja-roja { background-color: red; width:
100%; height: 50px; }

Otra forma de dimensionar un elemento de forma elstica son

losem y los rem. Pero los veremos ms adelante cuando
tratemos la tipografa. No falta mucho.
Bsicamente se basa en la idea de dimensionar nuestros
elementos en base al tamao de la fuente que hemos definido. En
el caso de los em, se trata de la medida de laletra M
mayscula. Por tanto si hemos definido que la fuente del
documento es de 16 px, 1em ser 16 px. Si dimensionamos un
elemento indicando ancho de 2em, sern 32 px. De momento no
te preocupes por esto, slo intentar captar la idea.

Presta atencin a la posicin de la caja roja en nuestro navegador. Porqu,

si no hemos asignado ningn margen a nuestra caja, hay una especie de
margen blanco entre nuestra caja roja y la ventana de nuestro navegador?
La respuesta es muy sencilla: porquelos navegadores vienen con
estilos predeterminados que modifican el comportamiento de
nuestros elementos, y encima, para complicarlo ms, cada navegador
trae estilos diferentes entre s.
Esto produce varios efectos no deseados: el primero es que afecta a cmo
deben relacionarse los objetos de nuestra pgina entre s, ya queaade
mrgenes, paddings y diferentes estilos.
Otro efecto no deseado es que ,como cada navegador viene con sus estilos
predefinidos y son diferentes, nuestras maquetaciones pueden verse
afectados de diferente forma en funcin del navegador con el cual
estamos renderizando nuestra web.Un h1 no tiene el mismo tamao
predeterminado en Safari o en Chrome.

Para solucionar este hay varias opciones. Quiz las ms destacadas

seanreset y normalize.
Resetes un archivo que se enlaza en nuestra pgina como si una hoja
de estilo css se tratara, y lo que hace esresetear todos los estilos.
Es decir, a todos los atributos le asigna un valor de 0.
Debido a que en HTML se ejecuta el cdigo en orden secuencial, cuando
el link de reset lo colocamos antes de nuestro estilo, lo que ocurre es
que todos los estilos, incluidos los del navegador se ponen a cero.
Tras esto se carga nuestro CSS sin que sea interferido por los estilos del
navegador.
El problema de reset es que una vez aplicado, un h1 tiene el
mismo tamao que un p, lo cual es un inconveniente porque
adems nos obliga a sobreescribir todos los elementos
semnticos que utilicemos.
Por ello hay otrasolucin mucho ms optimay que te recomiendo,
que esNormalize.

Lo que hace Normalize eshomogeneizar los estilos de

todos los navegadores. Cuando usamos Normalize, un h1
tiene el mismo estilo predeterminado en todos los
navegadores, tanto en Chrome como en Safari.
Puedes descargarlo deaqu.
Al descargarlo se abre una ventana del navegador con el
cdigo. Simplemente cpialo y pgalo en un archivo CSS en
blanco que creas tu mismo. Enlzalo con tu html, y recuerda
hacerlo siempre antes de tu CSS de estilos:
HTML:
<link rel="stylesheet" href="normalize.css"/> <link
rel="stylesheet" href="style.css"/> Recuerda aadir siempre a
todas tus pginas tu normalize.css. Ahora si te fijas ha
desaparecido ese margen que apareca alrededor de nuestra
caja roja, y adems ha cambiado el tipo de fuente.