Bien vamos a continuar con nuestro proyecto vamos a ver el contenido del archivo contenido 2.La HTML
definimos lo siguiente.
Doctrine HTML también el elemento de G.T y agregamos nuestro meta y todo el código va a ser similar
al archivo contenido 1.La HTML según lo hemos comentado del uso de selectores CSS así que también hacemos
referencia al archivo estilo CSS según se indica agregamos el título contenido 2 y comenzamos con nuestro
body y en este caso este primer DIV podemos observar que ya no tiene el selector de Heydi debido a que
estamos en el contenido 2.La HTML y el tabulador que va a estar activo va a ser el tabulador 2 por lo
tanto en este primer tabulador únicamente se aplica el estilo de Etap pero ya no se va a aplicar el
estilo de Heydi que este selector únicamente debería aplicar a un solo elemento dentro de todo el archivo
HTML.
Por ello es la diferencia entre un selector de tipo Class y un selector de tipo Heidi
así que este es nuestro primer tabulador el cual va a hacer referencia al contenido 1 punto HTML y debido
a que estamos en el segundo tabulador este sí debería ser el tabulador activo.
Por lo tanto además de indicar que vamos a utilizar los estilos de la clase Etap también vamos a indicar
que vamos a utilizar los estilos del selector único llamado Heydi y aunque podamos aplicar a más de
un elemento este estilo de tipo identificador único la idea es que únicamente lo apliquemos a un solo
elemento el navegador no nos va a indicar ningún problema.
Sin embargo a nivel de código nosotros deberemos aplicar estas mejores prácticas y si vamos a utilizar
un selector de tipo Heydi únicamente deberíamos aplicarlo a un solo elemento en toda la página HTML
de manera similar vamos a manejar los tres elementos el más externo más interno y un hipervínculo y
a cada uno de estos elementos por medio de hojas de estilo vamos aplicarles una imagen y un estilo según
corresponda y a cada uno de estos elementos le vamos a aplicar una imagen y también un estilo según
corresponda
y finalmente agregamos el último tabulador que va a corresponder al contenido.
3 agregamos un salto de línea.
También agregamos simplemente un ejemplo de contenido de la página 2 para que sepamos que estamos en
la página 2 y hacemos referencia a un hipervínculo que nos lleva al Index cerramos el body y también
el documento HTML íbamos a codificar ahora el contenido de nuestro documento tres puntos HTML.
Básicamente es lo mismo únicamente vamos a hacer la diferencia del contenido 3 y del tabulador.
En este caso el tercer tabulador es el que se va a activar y por lo tanto podemos observar que en el
tercer tabulador vamos a indicar que vamos a aplicar el estilo único es decir el selector Heydi.
Por lo tanto agregamos el Heydi igual al actual recordemos que estos estilos los vamos a agregar a nuestro
archivo estilos puntos CSS y esto lo vamos a definir a continuación.
Lo demás es lo mismo y agregamos un párrafo donde indiquemos que estamos en la página 3 y también agregamos
un link para regresar al Index.
Con eso terminamos el código de contenido 3.La HTML
bien ahora vamos a agregar el contenido de nuestro archivo estilos puntos CSS.
Aquí una parte interesante es que si no aplicamos este archivo estilo CSS y ejecutamos hasta este momento
el proyecto podremos observar únicamente hipervínculos y texto así que incluso se les invita a ejecutar.
Hasta este momento el proyecto y podrán observar que funciona correctamente pero que visualmente no
se entiende el manejo de tabuladores y es debido a las hojas de estilo que podremos apreciar correctamente.
El manejo de tabuladores y podamos obtener el efecto deseado así que a través de esta hoja de estilo
es que vamos a obtener este efecto.
Vamos a manejar algunas imágenes dentro de nuestro proyecto.
Estas imágenes se pueden descargar directamente en la carpeta CSS y hacer referencia directamente al
nombre de la imagen.
Sin embargo en este momento estamos utilizando rutas absolutas para que no tengan ningún problema en
ejecutar este proyecto.
Pero como estamos comentando se pueden descargar las imágenes a esta carpeta y sólo poner el nombre
de la imagen ya sin la R.L completa.
Como primer paso vamos a agregar el elemento Bodhi así que los siguientes estilos que definamos van
a aplicar a nuestro elemento Bodhi de nuestros documentos HTML.
Recordemos que esta hoja de estilos ya está aplicando a varios documentos y no solamente a un documento
así que el background va a ser el color blanco posteriormente todos los elementos de tipo imagen que
agreguemos a nuestros documentos HTML van a tener el borde igual a cero es decir que no va a tener ningún
marco posteriormente los elementos de tipo H1 van a tener lo siguiente vamos a agregar el atributo de
PADI para quien va a ser un espacio entre el margen de nuestro elemento HTML y el contenido interno
que tiene el elemento HTML es decir que cada uno de los elementos HTML está encerrado como si fuera
dentro de un marco y tenemos dos propiedades que podemos manejar que podemos manipular.
Una es el margen y otra es el concepto de Padín el Padín básicamente es el espacio que tenemos entre
el elemento HTML el contenido y nuestra caja externa o como hemos comentado nuestro marco pero también
tenemos el concepto de margen y el margen también es un elemento que podemos definir.
Así que básicamente estamos indicando que vamos a tener un espacio de 5 píxeles en el padrón y básicamente
el Padín se puede especificar de la siguiente manera vamos a comenzar especificando los espacios primero
en la parte superior.
Después en la parte derecha después en la parte inferior y después en la parte izquierda.
Así cada uno de estos valores lo que se va a hacer es que se van a ir aplicando en cada uno de estos
elementos así que en primer lugar este primer valor corresponde a la parte superior.
Después a la parte derecha a la parte inferior y después a la parte izquierda así que podemos observar
que estamos empezando en la parte superior y en el sentido de las manecillas del reloj estamos especificando
los demás elementos.
Si únicamente especificamos un elemento como puede ser 5 pixeles entonces se aplican los 5 píxeles a
todos los elementos tanto superior derecho inferior e izquierdo.
Se aplican 5 píxeles de separación entre el elemento y la caja que lo rodea.
Eso también es más fácilmente observable si inspeccionamos nuestro elemento ya que al inspeccionarlo
la sección de Inspección de nuestro navegador de Google Crom nos puede ayudar a entender más rápidamente
este elemento.
Así que básicamente este concepto de Padín es un espacio que se va a dejar entre nuestro contenido y
la caja.
El margen del elemento que rodea a cualquier elemento HTML que definamos y como hemos comentado también
no solamente tenemos el Padín sino que también tenemos el concepto de márgen el cual viene posterior
al padre.
El padre es interno y el margen es externo y de igual manera se definen los elementos primero superior
derecho inferior e izquierdo.
En ese orden es que vamos a definir los elementos de nuestro margen posteriormente agregamos el color
que se va a manejar en el texto de nuestro elemento H1 y finalmente el Foncillas.
Así que definimos también este elemento para que manejemos otro tipo de tamaño de fuente en los elementos
de tipo H1 y cerramos los estilos que vamos a aplicar a este elemento H1 posteriormente para crear los
tabuladores se aplica la técnica la cual hemos comentado que es por medio de tres bloques así que vamos
a manejar un hub externo.
Posteriormente un interno y vamos a manejar un elemento más interno que va a ser un hipervínculo así
que vamos a definir este tipo de IP vamos a ir agregando de manera anidada las imágenes hasta formar
todos los elementos de la imagen del tabulador
así que nuestro Dib más externo
le vamos a asignar una imagen llamada izq. Tab punto GIFF que si observamos nuestra imagen del tabulador
vamos a poder observar que en este caso tenemos una imagen izquierda que vendría siendo esta esquina
izquierda redondeada.
También tenemos una imagen del lado derecho que va a ser una imagen derecha redondeada y tenemos la
imagen central que se debería poder extender tanto a izquierda como a derecha así que en este caso esta
primera imagen se está aplicando al Dib más externo.
Posteriormente vamos a definir otro Dib que se va a aplicar al div de la parte derecha que es el interno
y posteriormente vamos a agregar un hipervínculo y le vamos a asignar la imagen central
recordemos que si esta imagen la descargamos y la depositamos dentro de la carpeta CSS entonces simplemente
podemos poner este nombre de la imagen y omitir toda esta ruta como siguiente paso lo que vamos a indicar
por medio de nuestra hoja de estilo es que este elemento se va a desplegar como un bloque es decir que
se debe demostrar ya que un dip que no tiene ningún elemento podría desaparecer de nuestro documento
HTML pero en este caso si deseamos que se muestre y por lo tanto vamos a indicar la opción de display
igual a block y también este tabulador lo vamos a flotar hacia la izquierda
indicamos el alto de la imagen el cual es de 21 píxeles y agregamos el Padín en este caso no vamos a
agregar ningún PADI por lo tanto indicamos que para todos los elementos de tipo Padín va a aplicar el
valor de cero píxeles tanto para el patín superior derecho inferior e izquierdo según hemos comentado
que si únicamente asignamos un valor entonces va a aplicar a las cuatro posiciones
y finalmente agregamos una separación entre tabuladores.
Por lo tanto agregamos la propiedad de márgen y podemos observar que el margen únicamente lo estamos
aplicando en la parte derecha en la parte superior e cero y en la parte derecha es un píxel en la parte
inferior es cero y en la parte izquierda también va a ser el valor de cero.
Por lo tanto esto sí es importante memorizar el orden en que se aplican estos elementos ya que va a
ser como hemos comentado de la parte superior y en el sentido de las manecillas del reloj se van a ir
aplicando los siguientes elementos son siempre cuatro valores que se van a definir en este orden y en
caso de que se defina solamente un valor entonces se va a aplicar ese mismo valor a todos los elementos.
Así que básicamente lo que estamos haciendo es que estamos aplicando lo siguiente tenemos un DIV que
es el más externo.
Posteriormente agregamos un padre si es que tenemos algún valor es decir una separación entre nuestro
contenido del DIV tenemos aquí el Padín y posteriormente tenemos ya el margen y dentro de ese margen
podemos especificar hacia fuera también el espacio en píxeles que debe de ocupar.
Así que de esta manera es que estamos empezando a dar forma a los elementos por medio de las hojas de
estilo vamos a detener hasta aquí este vídeo y en el siguiente vídeo vamos a continuar codificando este
archivo de estilos puntuó CSS.