Vamos a revisar a continuación en laboratorio caso de estudio proyectos SST
el objetivo se solicita analizar el Proyecto Laboratorio CCS el cual contiene la siguiente salida y
el objetivo es entender cómo se crearon los tabuladores y analizar los estilos que se aplicaron en este
proyecto web con ayuda de los estilos CSS
como primer paso vamos a crear nuestro proyecto en nombre del proyecto se llama laboratorios CCS 1 lo
depositamos en la ruta mostrada y damos clic en Finalizar
posteriormente vamos a crear algunos archivos en este caso un archivo llamado contenido 1 punto HTML
así que este es un archivo de tipo HTML el nombre del archivo entonces se llama contenido 1 lo depositamos
en un folder esto para que estos archivos no estén directamente al nivel raíz de nuestro proyecto así
que vamos a empezar a organizar de mejor manera nuestras páginas HTML.
Para ello vamos a depositar esta página dentro del folder páginas y damos clic en Finalizar y podemos
observar que la ruta de este archivo entonces quedaría dentro del nivel raíz.
Posteriormente dentro de un folder llamado páginas y posteriormente directamente a la página contenido
1 punto HTML van a ser tres páginas en total y esas tres páginas se van a depositar dentro de este mismo
folder llamado páginas
creamos un segundo archivo llamado contenido 2.
De igual manera lo depositamos en el folder páginas y damos clic en Finalizar
y creamos un tercer archivo llamado contenido 3 puntos HTML cada archivo va a hacer referencia a un
tabulador y son tres tabuladores.
Por ello es que estamos agregando tres archivos en este caso al archivo se llama contenido 3 lo depositamos
también dentro del folder páginas y damos clic en Finalizar
y finalmente vamos a crear un archivo llamado estilos puntos CSS el nombre del archivo se llama estilos
y lo depositamos dentro de un folder llamado CSS así que ya no va a estar al nivel raíz sino que también
ya vamos a empezar a separar nuestras hojas de estilo de nuestro código HTML y posteriormente también
veremos cómo separar nuestro código JavaScript.
Sin embargo hasta este momento hemos estudiado únicamente páginas HTML y contenido CSS así que podemos
observar que dentro de nuestra carpeta de públic HTML se está creando un folder llamado CSS y dentro
de ese folder es que se deposita el archivo estilos puntos CSS y damos clic en Finalizar
posteriormente vamos a modificar nuestro archivo índex punto HTML
agregamos el Doctrine.
Posteriormente las etiquetas HTML Get y el meta de charged VF 8 y en este archivo vamos a agregar una
referencia a nuestro archivo estilo CSS.
Sin embargo podemos observar que ya no se encuentra directamente a nivel raíz sino que debemos especificar
el folder donde se encuentra este archivo diagonal.
El nombre del archivo estilos puntos CSS y con esto ya podemos hacer referencia a este documento ya
que este archivo índex punto HTML se encuentra a nivel raíz de nuestro proyecto HTML agregamos un título
llamado Laboratorio CSS y cerramos nuestro cabecero.
Posteriormente agregamos nuestra etiqueta de Bodhi también un título de tipo H1 llamado Laboratorio
CSS y vamos a agregar una referencia a la página 1 en este caso a la página contenido 1.La HTML.
Para ello hacemos uso de la etiqueta de hipervínculo llamado a posteriormente por medio del atributo
HR-V indicamos la página donde se encuentra nuestro documento HTML y recordemos que esta página la hemos
agregado dentro del folder llamado páginas.
Posteriormente diagonal indicamos el nombre del archivo contenido 1 punto HTML y el texto que va a visualizar
el usuario es página de contenido.
Así que cuando dé clic a ese nombre de la página de contenido nos va a llevar al archivo de contenido
1 punto HTML.
Cerramos el cuerpo del documento HTML y cerramos la etiqueta HTML.
Esto es todo lo que va a tener nuestra página de índex punto HTML
posteriormente vamos a agregar el contenido a nuestro documento contenido 1.La HTML y agregamos el siguiente
código según se muestra la etiqueta de Doctrine el elemento HTML y agregamos el cabecero.
El meta de hecharse F8 y vamos a agregar un link a nuestro estilo CSS debido a que ahora vamos a centralizar
los estilos que vamos a aplicar en estas páginas.
Entonces todos los estilos van a estar definidos dentro del archivo estilos puntos CSS.
Sin embargo recordemos que este archivo contenido 1.La HTML se encuentra dentro de una carpeta por lo
tanto debemos de subir un nivel para que lleguemos al nivel raíz de nuestro proyecto web y posteriormente
entramos a la carpeta CSS y así es como ya podemos encontrar la ruta correcta del archivo estilos puntos
CSS.
Recordemos que esto ya lo hemos visto cuando trabajamos las rutas relativas y absolutas cuando hacemos
referencia a nuestros documentos HTML y en este caso aplica de manera similar cuando estamos trabajando
con archivos de tipo CSS o incluso archivos de tipo JavaScript.
Así que con esta notación encontramos de manera adecuada el archivo estilo CSS.
Posteriormente agregamos un título contenido 1 y cerramos el cabecero agregamos el body de nuestro documento
HTML y un título el título sitio web con tabuladores.
Para ello utilizamos las etiquetas H1 y posteriormente vamos a agregar algunos tips para manejar cada
uno de los tabuladores.
Vamos a agregar tres tips este primer tip va a ser el tabulador que hace referencia al tabulador que
tiene el contenido 1 por lo tanto en este Dir. vamos a aplicar dos estilos.
En este caso se van a aplicar los estilos definidos por una clase llamada Tab.
Esta clase recordemos que se va a agregar dentro del archivo estilos CSS por medio de la notación punto
Tab y esto es lo que se va a agregar en este archivo y se van a agregar algunos estilos a esta clase
y todos estos estilos que se definan se van a aplicar directamente a este.
Pero también vamos a agregar ahora algo nuevo que no hemos aplicado pero es un identificador recordamos
que para definir una clase se va a utilizar el punto pero para definir un Heydi vamos a utilizar el
símbolo de número.
Así que se va a definir una clase pero por medio de esta notación para definirlo de manera única y aunque
se puede aplicar a varios elementos dentro de nuestro documento HTML la idea es que cuando definimos
un estilo de tipo único precisamente únicamente lo utilicemos en este caso en un tabulador.
Este ejercicio se trata precisamente de que tenemos tres tabuladores en nuestra página HTML y donde
demos clic se va a aplicar un estilo como si estuviera activo.
Este tabulador por lo tanto únicamente va a estar activo un tabulador a la vez y en este caso debido
a que estamos dentro del contenido 1 esta página va a aplicar el estilo actual al tabulador 1 y los
siguientes tabuladores van a estar apagados pero en la siguiente página HTML llamada contenido 2 el
tabulador que va a estar activo va a ser el segundo tabulador.
Por lo tanto este estilo de identificador único se va a aplicar al segundo tabulador y ya no al primero
ni tampoco al tercero así que esto lo vamos a ir viendo poco a poco.
Sin embargo así es como vamos a empezar a trabajar tanto las clases como los estilos definidos de manera
única.
Todo esto con ayuda de nuestro archivo estilos puntos CSS y posteriormente agregamos un segundo Dip
más interno y posteriormente un link en este caso un hipervínculo al documento contenido 1 punto HTML.
Es decir un link hacia este mismo documento ya que es el tabulador actual posteriormente cerramos nuestro
más interno y cerramos el más interno.
Estamos trabajando de esta manera el elemento de tabulador debido a que vamos a aplicar un estilo de
la siguiente manera vamos a tener un DIV que como hemos comentado es una sección HTML dentro de nuestro
documento posteriormente tenemos otro DIV y posteriormente tenemos un link y lo que vamos a hacer es
que al Dib más externo le vamos a asignar una imagen para que dibuje este tabulador.
La imagen que le vamos a asignar es una imagen redondeada la cual va a asignar la imagen de la parte
izquierda de este tabulador es decir que a este DIV va a asignar la imagen de la parte izquierda.
Posteriormente este Dib más interno le vamos a asociar una imagen que va a completar el tabulador pero
de la parte derecha y finalmente dentro del link lo que vamos a hacer es asignarle el resto de la imagen
es decir que los estilos los vamos a ir aplicando poco a poco.
Por ello es que vamos a combinar esta técnica para ir combinando las imágenes a cada uno de los elementos
HTML.
Esto lo vamos a ir viendo poco a poco conforme armemos nuestro proyecto pero básicamente esta es la
razón por la cual estamos utilizando tres elementos a cada elemento le vamos a asignar un pedazo de
una imagen para que se forme la imagen del tabulador y tenga esquinas redondeadas
y básicamente aunque va a aparecer una sola imagen en sí van a ser tres imágenes una imagen izquierda
con las esquinas redondeadas izquierda.
Posteriormente una imagen con la esquina redondeada derecha y una imagen central la cual se puede extender
todo lo necesario a la izquierda o a la derecha según se necesite hacia el tamaño de la imagen central
del tabulador puede ocupar un tamaño mayor o menor según se necesite.
Por ello este es un ejercicio de laboratorio no es necesario que entendamos a detalle todos los elementos.
Sin embargo sí es importante que empecemos a darnos cuenta cómo es que se aplican estos elementos CSS
y se combinan con nuestros elementos HTML.
Posteriormente agregamos nuestro segundo tabulador en el documento HTML y podemos observar que aquí
ya no vamos a aplicar el estilo de Airy actual ya que debido a que estamos en la página de contenido
uno únicamente el primer tabulador va a ser el tabulador actual y los siguientes tabuladores que va
a ser el tabulador dos y tres no se van a considerar como elementos actuales y únicamente se van a aplicar
los estilos de la clase tab que se defina en el archivo estilos puntos CSS de igual manera para ir aplicando
la técnica de las imágenes la imagen de la esquina izquierda redondeada esquinera de derecha redondeada
y la imagen central.
Entonces también vamos a manejar estos tres elementos un nivel externo un divi interno y un elemento
interno que es un hipervínculo en este caso este hipervínculo va a hacer referencia al documento contenido
2.El HTML y debido a que este archivo contenido 2.La HTML se encuentra dentro de la misma carpeta donde
está el archivo contenido 1.No HTML.
Podemos hacer referencia directamente al archivo contenido 2 punto HTML sin necesidad de subir o bajar
en carpetas únicamente poniendo directamente el nombre del archivo y cerramos nuestros dips y hacemos
lo mismo para el tercer tabulador en este caso este tercer tabulador va a hacer referencia al link de
contenido 3.La HTML damos un salto de línea abrimos un párrafo y en este caso únicamente agregamos un
contenido simple para que sepamos que estamos dentro del contenido de la página 1 hacemos un salto de
línea y agregamos un link para la página de inicio.
Recordemos que debido a que estamos dentro de una carpeta necesitamos subir un nivel para que lleguemos
al nivel raíz del proyecto.
Por ello es que utilizamos dos puntos posteriormente diagonal índex punto HTML y con esto podemos regresar
y encontrar correctamente el archivo de índex punto HTML.
Cerramos el cuerpo de nuestro documento y cerramos nuestro código HTML para cualquier duda recuerden
que pueden dar clic en el nombre del archivo.
Vamos a detener hasta aquí este video y en la siguiente idea vamos a continuar codificando los demás
archivos.