Maquetación con HEADER, NAV, MAIN, SECTION, ARTICLE, ASIDE, FOOTER, DIV.☝HTML5 y CSS3⛳ paso a paso
Basic HTML Structure Exercise
Introduction to HTML5 Structuring
- The session begins with a warm welcome and an introduction to a basic practical exercise on structuring web pages using HTML5 tags.
- The instructor mentions the importance of semantic elements in HTML, indicating that while certain tags are preferred for their meaning, alternatives can be used without issue.
Creating the Initial Structure
- The instructor discusses creating sections within the webpage layout, emphasizing that semantic naming is beneficial for readability.
- A new file named "index.html" is created as part of the exercise, along with a CSS file titled "tarea1.css".
Setting Up Files and Linking CSS
- The instructor opens both the HTML and CSS files, preparing to write code. They emphasize proper naming conventions for clarity.
- Basic HTML structure is established by including necessary elements like
<html>,<head>, and<body>. The title is set as "Tarea 1".
Loading Resources
- Instructions are given on how to link images and favicon correctly within the project folder.
- The process of linking CSS stylesheets to the HTML document is demonstrated, ensuring visual styling can be applied.
Applying Basic Styles
- A universal selector (
*) is introduced to reset margins across all elements for consistent styling.
- Discussion shifts towards utilizing various HTML5 tags such as
<header>,<nav>, and<section>to create a structured layout.
Organizing Content Semantically
- Emphasis on using appropriate tags like
<main>for primary content areas; this helps in organizing sections logically within the page structure.
- Sections are defined clearly: left section (for content), right section (for additional information), maintaining semantic integrity throughout.
Finalizing Layout Elements
- Additional classes are assigned to different sections (e.g.,
class="left-section"), enhancing organization and future styling capabilities.
- A footer element is added at the end of the main content area, completing the basic structural framework of the webpage.
Styling Sections with Colors
- Color coding for different sections is discussed; colors like green, red, yellow, etc., are applied for visual differentiation during development.
Layout and Design Adjustments in Web Development
Setting Up the Layout
- The layout includes a left sidebar, right sidebar, and footer, with initial box sizes set to 100% width. Adjustments are made for specific sections to have different widths: one at 70% and another at 25%, while the footer remains at 100%.
Addressing Overlapping Elements
- An issue arises where elements overlap due to incorrect height settings. The text in the right sidebar is not displaying correctly because of this overlap. A height adjustment of 200 pixels is proposed to resolve visibility issues.
Main Section Configuration
- The main section (highlighted in yellow) should extend across the entire visible screen area, from the top header down to the footer. This requires careful calculation of dimensions based on screen size rather than fixed pixel values.
Calculating Dimensions Using Viewport Height
- To ensure that elements adapt responsively, viewport height (vh) units are introduced instead of using percentages or fixed pixel heights. This allows for dynamic sizing based on actual screen dimensions rather than arbitrary values. For example, setting heights as a percentage of viewport height ensures consistency across devices regardless of their size.
Implementing Flexbox for Layout Flexibility
Understanding Flexbox Layouts
Introduction to Flexbox Properties
- The speaker discusses the stacking of boxes in a flex layout, emphasizing that they can be arranged horizontally (left to right) rather than vertically.
- Key properties of display flex are introduced, including
justify-contentfor horizontal alignment andalign-itemsfor vertical alignment.
- The distinction between
justify-content(horizontal distribution) andalign-items(vertical positioning) is clarified, highlighting their respective roles in layout design.
Practical Application of Flexbox
- A practical example demonstrates how changes in CSS affect the layout; elements are now distributed more evenly across the space instead of being tightly packed on one side.