Curso de HTML Completo: Aula 07 - Links

Summary

In this tutorial, the instructor explains how to create and use links in HTML, focusing on both absolute and relative paths. The video covers creating clickable hyperlinks with the <a> tag, using attributes like href and target to control navigation behavior, such as opening links in new tabs. It also demonstrates how to work with relative links within a project, showing how to navigate between pages and directories. The lesson includes practical examples, including how to create new HTML files, organize them in folders, and link them using relative paths to create seamless navigation in web projects.

Takeaways

• 😀 Links in HTML are crucial for navigating between different web pages.
• 😀 The anchor tag `<a>` is used to create hyperlinks in HTML, and it uses the `href` attribute to specify the destination URL.
• 😀 Absolute links are URLs that include the full path (e.g., `https://google.com`), pointing to an external site.
• 😀 Relative links are used for linking to other pages within the same project directory, making them flexible for local navigation.
• 😀 The `target='_blank'` attribute is used to open links in a new tab, allowing users to stay on the current page.
• 😀 A basic link is structured with an anchor tag `<a>` and an `href` attribute pointing to the target URL.
• 😀 To link between pages within your project, simply reference the file name (e.g., `about.html`), rather than using a full URL.
• 😀 Working with directories and subfolders requires specifying relative paths, like `folder/filename.html` to link to a page inside a folder.
• 😀 The `../` syntax is used to navigate up one directory level when linking to files outside the current folder structure.
• 😀 When organizing a project with multiple folders, ensure links are correctly structured relative to the files' locations to avoid broken links.
• 😀 Practice creating multiple links between different pages in a project to master absolute and relative navigation within HTML.

Q & A

What is the main focus of this HTML tutorial?

The tutorial focuses on teaching HTML links, including how to create links using absolute and relative paths, and how to navigate between documents within a project.

What are the two types of paths discussed in the tutorial?

The two types of paths discussed are absolute paths and relative paths. Absolute paths provide the full URL of a website, while relative paths are used to link to other pages within the same project.

How do absolute paths differ from relative paths in HTML links?

Absolute paths use the full URL of a website (e.g., https://google.com), whereas relative paths are used to link to pages within the same project, using folder and file names.

What attribute can be added to an anchor tag to open a link in a new tab?

The 'target' attribute with the value '_blank' is used to open a link in a new tab.

How do you create a link that opens a site in a new tab?

To create a link that opens a site in a new tab, you add the 'target="_blank"' attribute to the anchor tag, like this: <a href="https://google.com" target="_blank">Go to Google</a>.

What is the purpose of the 'HR' tag used in the tutorial?

The 'HR' tag is used to create a horizontal line on the webpage, visually separating different sections of content.

What is the difference between the 'index.html' and 'sobre.html' files in the example?

In the example, 'index.html' is the main homepage, while 'sobre.html' is a secondary page (e.g., a 'About Us' page) within the same project.

How do relative links work when linking to files in different folders?

When linking to files in different folders, you need to include the folder name in the link, like 'foldername/filename.html'. To move up a folder, you can use '../' in the path.

What does the '../' symbol in a relative path do?

The '../' symbol tells the browser to move up one directory level in the folder structure. For example, if you're in a subfolder and need to link back to a file in the parent folder, you use '../filename.html'.

What is the purpose of creating a folder like 'equipe' in the example?

The 'equipe' folder is used to organize the project by grouping team members' HTML files. This helps maintain a structured and organized file system.

Why does the tutorial mention testing with both absolute and relative links?

The tutorial encourages testing both absolute and relative links to understand how navigation works within a project, especially when moving between pages and directories. Practicing this ensures a better understanding of how paths and links behave in different scenarios.