🔵 Curso Google Sites ✅ Estructura y elementos de una web (header y footer)

Introduction to Google Sites

Overview of the Course

• This video marks the beginning of a course on Google Sites, aimed at beginners with little to no web development experience.

• The instructor clarifies that while Google Sites is user-friendly for simple websites, it may not be suitable for more complex projects.

Structure and Purpose

• The course will eventually transition to WordPress for more advanced website creation involving hosting, plugins, and templates.

• Google Sites serves as an excellent starting point for those new to web design.

Creating a Website in Google Drive

Setting Up Your Workspace

• The instructor demonstrates how to create a folder in Google Drive specifically for the website project.

• To start building a site, users can right-click within their folder and select "Google Sites."

Understanding Web Page Structure

Typical Layout of a Web Page

• A standard webpage consists of three main sections: header (GIDER), body, and footer (FÚTER).

• Header: Usually contains the logo and navigation menu.

• Body: Contains the main content of the webpage.

• Footer: Often includes links to privacy policies or social media.

Importance of Structuring Content

• The body should be organized using heading tags (H1, H2, H3) which help search engines understand page content.

• H1 is reserved for the main keyword; only one per page is recommended.

• Multiple H2 headings can derive from the H1 keyword.

• H3 headings provide additional information related to H1 and H2.

Editing Header and Footer

Customizing Page Elements

• Focus shifts to editing the header (GIDER) and footer (FÚTER) elements of the webpage.

• Options are available in the header section to adjust its size or style according to preference.

Managing Headings Correctly

• Users must ensure that only one title corresponds with an H1 tag; otherwise, it disrupts proper structure.

Inserting Images into Header

Adding Visual Elements

• The instructor explains how to replace text titles with images as headers by selecting images stored in Google Drive.

Logo Configuration

How to Add a Footer in Google Sites

Selecting and Inserting Elements

• The speaker discusses selecting an icon for insertion, noting that the icon appears white and is not visible. They revert to the original logo of "aula en la nube" before proceeding to add a footer.

Adding a Footer

• Upon clicking to add a footer, the speaker types "esto es el pie de página." They explain that editing options appear on the left side, including buttons for deleting sections, duplicating, and modifying styles.

Customizing Background and Themes

• The speaker describes changing the background style by selecting from different phases or even choosing an image. They mention how themes can be adjusted from the right panel, allowing color selection associated with each theme.

• If none of the preset colors are satisfactory, users can select custom shades. The speaker demonstrates adjusting text size while preparing to insert a smaller logo on the right side.

Inserting Images into Footer

• To insert an image, they navigate to "insert" then "images," selecting one saved in their Google Drive. This action creates a new section below the footer.

• The inserted image initially appears too large; thus, they resize it by dragging corners. If part of the icon is cropped out during resizing, they utilize an option to undo cropping for better visibility.

Final Adjustments and Text Formatting

• After successfully adding text alongside the logo in the footer ("aula en la nube.com"), they introduce a copyright symbol using emoji search functionality.