Con el propósito
de agrupar diferentes contenidos de
una página web con eficiencia,
describiremos el proceso para la definición de clases en documentos HTML. Muchas
páginas de internet con diseños increíbles tienen redundancia en su código
fuente, debido a las repeticiones de estilos en el código, como consecuencia es
difícil realizar modificaciones futuras. Por este motivo, aprenderemos a
utilizar el atributo class y sus
beneficios, según las recomendaciones oficiales de este lenguaje.
El principio de
clases es posible asociarlo con un centro educativo, donde dividen a los
estudiantes para así tener una organización en cuanto al tipo de estudio a
impartir en cada nivel. De igual forma es aplicable al lenguaje HTML a fin de
entender su utilidad en la creación de páginas web. Para la creación de una clase es necesario una etiqueta de
inicio, luego definir class como
atributo, colocar dentro de las comillas el nombre de la clase y, posteriormente,
la etiqueta de cierre.
061-01_0404_ilu01.
Creación de una clase
Para la creación
de una clase con la etiqueta de párrafo, es necesario:
- Especificar el inicio de la etiqueta párrafo.
- Agregar el atributo class,
tanto a párrafos como a encabezados.
- Definir como nombre de la clase en párrafo, texto, y en encabezados, encab.
- Cerrar la etiqueta como normalmente se hace, a fin de
delimitar el punto donde termina la clase creada.
061-01_0404_fot01. Ejemplo de una clase con párrafo
Cuando agregamos
el mismo estilo a diferentes secciones de un documento es uno de los usos del
atributo class. Con la finalidad de
eliminar la repetición de las definiciones de estilos en diferentes etiquetas o
partes del documento, solo se realiza la especificación una vez en la clase y,
posteriormente, todo bloque nombrado de igual forma tendrá el diseño
especificado.
061-01_0404_fot02. Ejemplo de estilo a diferentes secciones
Las clases son
útiles para definir con un mismo nombre diferentes partes de un documento, sin
embargo, al momento de nombrar de forma distinta los bloques de texto es
necesario utilizar un identificador único. El mismo se crea de forma similar a
una clase, debido a su uso como atributo, por lo tanto, solo es necesario
agregar id y entre comillas el nombre
del identificador, el cual debe ser irrepetible. A continuación veremos un
ejemplo:
061-01_0404_ilu02. Creación de identificador único
Los atributos id y class
permiten a nivel semántico especificar con más detalle la utilidad de las
etiquetas, por lo tanto, cuando mostramos en una página web repetidas veces nombres de libros, mediante una clase, podemos
agruparlos para una mejor idexación por parte de los navegadores.
Keynotes
- Para la creación de una clase es necesario una etiqueta de
inicio, luego definir class como
atributo, colocar dentro de las comillas el nombre de la clase y,
posteriormente, la etiqueta de cierre.
- Cuando agregamos el mismo estilo a diferentes secciones de
un documento es uno de los usos del atributo class.
- Con la finalidad de eliminar la repetición de las
definiciones de estilos en diferentes etiquetas o partes del documento, solo se
realiza la especificación una vez en la clase y, posteriormente, todo bloque
nombrado de igual forma tendrá el diseño especificado.
- Las clases son útiles para definir con un mismo nombre
diferentes partes de un documento, sin embargo, al momento de nombrar de forma
distinta los bloques de texto es necesario utilizar un identificador único.
- Los atributos id y
class permiten a nivel semántico
especificar con más detalle la utilidad de las etiquetas.
RetoUbica la página
principal de la universidad y:
- Realiza una división de las clases.
- Nombra cada clase según el contenido englobado.
- Escribe un resumen con las indicaciones del motivo por el
cual decidiste realizar la agrupación elegida.
¡Comparte el
resultado del reto en tu vPages e
invita a tus compañeros a leerla, fin de recibir retroalimentación positiva de
cada uno!
Tiempo
disponible: entre 15 y 30 minutos.
Cierre
Con la implementación de clases en un documento HTML, modificamos con
facilidad códigos de páginas web, debido
a la optimización de sentencias. Además, agrupamos con excelencia diferentes contenidos de proyectos destinados a internet. La paciencia y organización son
determinantes para crear documentos web óptimos.
