En este tutorial práctico, explicaremos qué es una sección en HTML y desarrollaremos un ejemplo práctico para entender el cómo usarla las etiquetas <section> de HTML, asimismo, desarrollaremos los estilos CSS para controlar los bloques de las etiquetas section.
Requisitos:
- Visual Studio Code
- HTML y CSS
Lo que veremos en este tutorial:
- ¿Que es una sección en HTML?
- Cómo usar la etiqueta section en HTML y CSS.
- Principales sections (seccciones) para nuestro sitio web.
- Agregando etiqueta section desde el código HTML y CSS.
- Aplicando modificaciones al CSS y HTML del sitio web.
- Conclusiones y Referencias.
1. ¿Que es una sección en HTML?
El elemento section (<section>) de HTML representa una sección o bloque genérica de una determinada página web teniendo en cuenta el tema a tratar, es decir, establecemos los bloques de una página web, imaginemos que nuestra página web está orientado al desarrollo de software y ciertas bloques o section tratan de ofertar o hacer visible sus servicios (section de servicios) y/o mostrar sus proyectos desarrollados (section de proyectos), estos bloque serán de al guna maneta como el índice de acceso al contenido que se pretende mostrar teniendo en cuenta a un tema en común y determinar subsecciones relacionadas a dicho tema.
El elemento section de HTML esta catalogada como una etiqueta semántica teniendo en cuenta que su principal funcionalidad es estructurar semánticamente un documento a la hora de ser representada al web/IU. Por ejemplo, Servicios representa en el documento (sitio web), que se podría exponer al usuario en el índice de contenido por niveles (menú del sitio web) para navegar rápidamente por las distintas partes.
2. Cómo usar la etiqueta section en HTML y CSS.
Para usar section (<section>) en código HTML, se encierra los elementos relacionados que deseamos agrupar entre etiquetas <section> determinando un encabezado (opcional). Se puede definir los estilos CSS desde el código HTML (declarado en el bloque head) o desde una achivo de extensión CSS. Veamos un bloque de section (<section>) en código HTML.
<section>
<header>
<h1>Home</h1>
<p>Cupidatat adipisicing Lorem cillum.</p>
</header>
<p>Commodo qui ipsum nostrud consequat labore minim exercitation sint. Labore irure reprehenderit consequat ut velit sunt voluptate ut ea exercitation magna magna occaecat. Reprehenderit ut aute est anim velit. Exercitation ea quis sit cillum occaecat enim. Lorem do adipisicing nulla et occaecat eu ex est consequat sit. Aliquip qui duis ullamco sint. Ad sunt Lorem nostrud proident.</p>
</section>
Veamos cómo definir los estilos CSS para section (<section>) declarado en el bloque head del código HTML:
/* 4. Definiendo estilos CSS para las secciones de sitio web */
/* 4.1. Definiendo los espacios al rededor de las secciones */
section {
padding: 50px;
}
/* 4.2. Definiendo el estilo del header para nuestras secciones */
section header{
text-align: center;
padding-bottom: 30px;
}
3. Principales sections (seccciones) para nuestro sitio web.
Para definir los principales sections, tomaremos como ejemplo el desarrollo de un landing (sitio web) orientado al desarrollo de software, sus principales secciones agrupadas serán Home, About, Services, Projects y Contact:
4. Agregando etiqueta section desde el código HTML y CSS.
Para el desarrollo de nuestro landing (sitio web) tomaremos el archivo HTML elaborada en el tutorial Cómo crear un menú desplegable con HTML y CSS; seguidamente agregamos las siguientes etiquetas HTML y definimos los estilos CSS:
<main>
<section>
<header>
<h1>Home</h1>
<p>Cupidatat adipisicing Lorem cillum.</p>
</header>
<p>Velit voluptate in laboris aliquip ut ad reprehenderit pariatur irure nostrud.</p>
</section>
<section>
<header>
<h1>About</h1>
<p>Cupidatat adipisicing Lorem cillum.</p>
</header>
<p>Duis et do reprehenderit laboris aute pariatur elit occaecat consequat.</p>
<h3>Mission:</h3>
<p>Dolor voluptate anim ad ex eiusmod non eu adipisicing minim aute deserunt irure. Aute qui do qui aute veniam. Labore minim consectetur ad irure et. Officia reprehenderit aliquip do qui elit culpa commodo ea tempor.</p>
<h3>Vission:</h3>
<p>Quis pariatur veniam cupidatat proident. Eiusmod sint dolor ut dolore dolore labore nostrud irure Lorem. Ullamco labore est irure cupidatat sunt sunt et sit duis commodo ullamco sunt tempor. Qui sint mollit esse consequat aute laborum anim est.</p>
<h3>Values:</h3>
<h4>Value 1</h4>
<p>Lorem culpa dolor laborum eu ea eiusmod proident ut aliquip non reprehenderit irure.</p>
<h4>Value 2</h4>
<p>Lorem culpa dolor laborum eu ea eiusmod proident ut aliquip non reprehenderit irure.</p>
<h4>Value 3</h4>
<p>Lorem culpa dolor laborum eu ea eiusmod proident ut aliquip non reprehenderit irure.</p>
</section>
<section>
<header>
<h1>Services</h1>
<p>Cupidatat adipisicing Lorem cillum.</p>
</header>
<p>Voluptate tempor aute et fugiat culpa commodo Lorem nulla qui elit elit velit consequat.</p>
<h4>Services 1</h4>
<p>Lorem culpa dolor laborum eu ea eiusmod proident ut aliquip non reprehenderit irure.</p>
<h4>Services 2</h4>
<p>Lorem culpa dolor laborum eu ea eiusmod proident ut aliquip non reprehenderit irure.</p>
<h4>Services 3</h4>
<p>Lorem culpa dolor laborum eu ea eiusmod proident ut aliquip non reprehenderit irure.</p>
</section>
<section>
<header>
<h1>Project</h1>
<p>Cupidatat adipisicing Lorem cillum.</p>
</header>
<p>Do ad consequat nulla minim est duis pariatur culpa fugiat deserunt. Aliqua minim est minim excepteur consectetur aute labore culpa incididunt tempor ea aliqua. Irure eu veniam laborum nostrud pariatur irure sunt excepteur commodo. Proident aute labore ullamco anim labore dolor. Deserunt labore id irure velit ad consequat pariatur consequat consectetur adipisicing reprehenderit et anim non.</p>
<h4>Project 1</h4>
<p>Lorem culpa dolor laborum eu ea eiusmod proident ut aliquip non reprehenderit irure.</p>
<h4>Project 2</h4>
<p>Lorem culpa dolor laborum eu ea eiusmod proident ut aliquip non reprehenderit irure.</p>
<h4>Project 3</h4>
<p>Lorem culpa dolor laborum eu ea eiusmod proident ut aliquip non reprehenderit irure.</p>
</section>
</main>
Seguidamente agregamos los siguientes bloques de código CSS con la finalidad de definir cada estilo agregada a las sections (<section>):
/* 4. Definiendo estilos CSS para las secciones de sitio web */
/* 4.1. Definiendo los espacios al rededor de las secciones */
section {
padding: 50px;
}
/* 4.2. Definiendo el estilo del header para nuestras secciones */
section header{
text-align: center;
padding-bottom: 30px;
}
/* 4.3. Definiendo el estilo del h1 de nuestro header para nuestras secciones */
section header h1{
font-size: 24px;
letter-spacing: 5px;
margin: 0;
color: blueviolet;
text-transform: uppercase;
}
/* 4.4. Definiendo el estilo del p (párrafo) de nuestro header para nuestras secciones */
section header p {
margin: 10px 0 0 0;
padding: 0;
font-size: 28px;
line-height: 42px;
font-weight: 700;
color: darkmagenta;
}
/* 4.5. Definiendo el estilo del h3 para nuestras secciones */
section h3{
font-size: 24px;
margin: 0;
color: darkmagenta;
text-transform: uppercase;
padding: 15px 0px 15px 0px;
}
/* 4.6. Definiendo el estilo del h4 para nuestras secciones */
section h4{
font-size: 20px;
margin: 0;
color: blueviolet;
}
/* 4.6. Definiendo el estilo del p (párrafo) para nuestras secciones */
section p{
font-size: 18px;
font-weight: 500;
color: rgb(42, 40, 40);
padding-bottom: 20px;
}
5. Aplicando modificaciones al CSS y HTML del sitio web.
Realizamos algunas modificaciones y/o agregamos nuevo bloque de estilo CSS para mejorar el diseño y control del menú de nuestra sitio web teniendo en cuenta al archivo HTML elaborados en el tutorial Cómo crear un menú desplegable con HTML y CSS, seguidamente realizamos las siguientes modificaciones:
/*4.5. Retiramos todos los espacios y margenes a 0 con el selector universal "*" (asterisco) */
*{
padding: 0;
margin: 0;
}
/* 1. Definiendo los estilos CSS para el menú principal */
/* 1.1. Definiendo los espacios al rededor del menú principal */
.menu{
position: fixed;/*4.7. Posicionamos de manra fija el menú*/
z-index: 100; /*4.7. Fijamos el menú sobre encima de cualquier otro elemento de la página web*/
width: 100%; /*4.7. Definamos el ancho al 100% de la pantalla*/
background-color: blueviolet; /*4.7. Definamos el color fondo de menú*/
}
/* 1.2. Ocultando las viñetas de la lista y definiendo los
margenes y espacios del menú principal */
.menu ul{
list-style: none;
margin: 0;
padding: 0;
float: right ; /*4.8. Desplazamos el nav hacia la derecha */
margin-right: 50px; /*4.9. Desplazamiento a la decha con un margen de 50px*/
}
Finalmente, agregamos el bloque de estilo CSS para generar el logo de nuestro sitio web (landing), precisar, que el logo será un link (texto) que nos direcciona a la misma página:
CSS Logo:
/*4.6. Definiendo estilos CSS para el logo principal de sitio web */
.menu .logo a{
color: #fff;
margin-left: 50px;
position: absolute;
padding-top: 10px;
text-decoration: none;
font-family:"Times New Roman", Times, serif;
font-size: 20px;
font-weight: 700;
}
HTML Logo (se agrega la etiqueta <header> para encapsular en menú)
<header>
<nav class="menu">
<div class="logo">
<a href="section-html-css.html">Section - HTML & CSS</a>
</div>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
</ul>
</li>
<li>
<a href="#">Projects</a>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
6. Conclusiones y Referencias.
Conclusiones:
En este tutorial práctico revisamos que es la etiqueta <section> en HTML y aplicamos la etiqueta en nuestro desarrollo para separar las diferentes secciones que del sitio web (landing). Asimismo, elaboramos los principales estilos CSS para las secciones; finalmente, modificamos los estilos CSS y HTML del menú principal del sitio web.
Referencias:
0 Comentarios