Course Content

Ultimate HTML

1. Web Development

Web World What is the Internet?Understanding How the Internet Works How a Website Works Frontend vs Backend Development Path to Success

2. Tags and Attributes

Unveiling the Potential of HTML Tags and Attributes Tags Attributes Paired and Single Tags Text Markup Challenge 1: Text Markup Challenge 2: Text Markup Challenge 3: Text Markup Special Purpose Text Markup Challenge: Special Purpose Text Markup Validation

3. Document Structure

Secrets of Structural Web Pages Structure Document Head Document Flow Challenge: Document Structure Developer Tools

4. Media and Tables

Magic of Rich Media and Dynamic Tables Images Challenge: Images Special Purpose Images Graphic Formats Audio and Video Embedding Challenge: Audio and Video Tables Challenge: Tables

5. Forms

Power of Forms: Interact and Engage Form Creation Basis Label for Input Element Input Attributes Input Types Challenge: Input and Label Textarea Element Select Element Datalist Element Grouping Form Elements

Ultimate HTML

Special Purpose Text Markup

Link

The <a> tag is used to create hyperlinks that enable users to navigate between different web pages. When a user clicks on a link, the browser sends a request to the server for the page associated with the link and displays the response on the screen. The href attribute helps specify the URL of the destination page.

index.html

index.css

index.js

Link Attributes:

target

By default, the link opens in the same browser tab. The target attribute allows us to modify this behavior. To open a link in a new tab, use target="_blank".

index.html

index.css

index.js

download

The download attribute can be used with the HTML <a> tag to specify that the target resource should be downloaded instead of displayed in the browser. When the download attribute is used, the browser prompts the user to save the file with the specified filename. For example, if we need to create an element with the following functionality: when the user clicks on the link, the browser will download the myfile.pdf file from https://example.com/ and prompt the user to save it with the filename myfile.pdf.

index.html

index.css

index.js

href

The href attribute is used not only to navigate to other pages but also to create links to email addresses, telephone numbers, and specific sections.

index.html

index.css

index.js

Additionally, the href attribute can be utilized to navigate to specific sections within a web page. To create an anchor tag, assign an id attribute (a unique identifier) to the desired section we want to scroll to. The href attribute takes a value starting with the # symbol followed by the id value.

Let's explore the following example, presented in the form of CodeSandbox. This platform enables code inspection and allows you to examine the code's functionality.

Note
Please take a moment to inspect the functionality by clicking on the links and observing how the live page scrolls to the specific sections. Additionally, pay attention to the attributes of the a tag and the h2 tag.

Button

The <button> tag in HTML is used to create a clickable button that can trigger an action, such as submitting a form, executing a JavaScript function like opening and closing a pop-up window, or toggling a mobile menu. By default, the <button> has the type attribute, and its value is submit. However, we often need to specify type="button".

index.html

index.css

index.js

Note
The <a> tag is used for creating hyperlinks to other web pages, documents, or resources. In contrast, the <button> tag is used for creating interactivity on a web page, triggering an event, or performing an action. It's essential not to mix their purposes.

1. Can we open a new tab/window with a `<button>` tag?

2. Can we use a `<button>` tag to submit a form?

3. What is the main difference between the `<a>` tag and the `<button>` tag?

Everything was clear?

Section 2. Chapter 9

Course Content

Ultimate HTML

1. Web Development

Web World What is the Internet?Understanding How the Internet Works How a Website Works Frontend vs Backend Development Path to Success

2. Tags and Attributes

3. Document Structure

Secrets of Structural Web Pages Structure Document Head Document Flow Challenge: Document Structure Developer Tools

4. Media and Tables

Magic of Rich Media and Dynamic Tables Images Challenge: Images Special Purpose Images Graphic Formats Audio and Video Embedding Challenge: Audio and Video Tables Challenge: Tables

5. Forms

Ultimate HTML

Special Purpose Text Markup

Link

index.html

index.css

index.js

Link Attributes:

target

By default, the link opens in the same browser tab. The target attribute allows us to modify this behavior. To open a link in a new tab, use target="_blank".

index.html

index.css

index.js

download

index.html

index.css

index.js

href

The href attribute is used not only to navigate to other pages but also to create links to email addresses, telephone numbers, and specific sections.

index.html

index.css

index.js

Let's explore the following example, presented in the form of CodeSandbox. This platform enables code inspection and allows you to examine the code's functionality.

Note
Please take a moment to inspect the functionality by clicking on the links and observing how the live page scrolls to the specific sections. Additionally, pay attention to the attributes of the a tag and the h2 tag.

Button

index.html

index.css

index.js

Note
The <a> tag is used for creating hyperlinks to other web pages, documents, or resources. In contrast, the <button> tag is used for creating interactivity on a web page, triggering an event, or performing an action. It's essential not to mix their purposes.

1. Can we open a new tab/window with a `<button>` tag?

2. Can we use a `<button>` tag to submit a form?

3. What is the main difference between the `<a>` tag and the `<button>` tag?

Everything was clear?

Section 2. Chapter 9