3. Structure and main components of an HTML document

Structure

Header: Metadata that generally doesn't show up on the page, mostly for search engines and web browsers. Check the source code of this page to see some examples of metadata you can add there.
Body: The content that shows on the webpage

Attributes, links, and div

Trying out attributes here.

This is how you do links to other websites

div is one of the most common tags. It is used to divide HTML documents into different sections and then apply CSS styles to them. The're identified with ids.

Text styles

Here is a list of styles presented as an unordered list (ul).

Strong
Emphasis
Strong + emphasis
Underline (not recommended because people tend to think it's a link)
code

Using CSS Styles

We can apply styles to text directly in the HTML file.

Here's a neat example using color, font-size, and text-align.

We could also use a separate .css file called CSS style sheet. If we do that we have to link it to our HTML file using link in the header. But we'll do that later.

Some other cool stuff you can do

Hover over this text...

Create an example page as an exercise from the book

Tip: It is a good practice to add id attributes to all HTML tags. This will make it easier to add CSS styles to them later on.

Special characters

We can write spanish letters normally (ñ) or using HTML entities (ñ = ñ)