Nice! These cryptic words seem to tell the browser to display Hello, World!
.
HTML code has a special structure. For example, it begins with the word <html>
.
<html> <body> Hello, World! </body> </html>
There! With <html>
at the beginning, the web browser knows that it can expect HTML code.
<html>
is a tag. Tags help the web browser figure out what to make of any text that's before or after them.
Can you remember another tag?
<body>
and </body>
Great! We'll find out what the <body>
tag does in a minute.
Tags begin with a <
sign and end with a >
sign.
<html> <body> Hi, I'm written in HTML. </body> </html>
Sweet! Tags are hard to miss with those angular brackets around them.
Tags often come in pairs. If you see <html>
, for example, chances are that there's a similar tag close by.
<html> <body> Hi, I'm written in HTML. </body> </html>
Fantastic! The <html>
tag has a sibling: </html>
.
These tag pairs consist of an opening and a closing tag. Opening tags use a <
sign, a special word, and a >
sign.
<html> <body> Hi, I'm written in HTML. </body> </html>
Great stuff! All HTML opening tags follow the exact same pattern.
Closing tags have an extra character before the special word: a /
sign.
<html> <body> Hi, I'm written in HTML. </body> </html>
See that? The /
sign closes the tags.
<html> <body> Hi, I'm written in HTML. </body> </html>
Nice! You're getting good at this.
A closing tag has a /
sign and goes after an opening tag. We'll need <html>
, <body>
, then </body>
and finally </html>
.
Anything we want the web browser to display needs to go between<body>
and </body>
.
<html> <body> Hi, I'm written in HTML. </body> </html>
There we go! The text goes in between <body>
and </body>
.
With that, we can already build a simple website.
<html> <body> Welcome to my website! </body> </html>
Sweet! Now it's time to take the next step.
-->Tags are the building blocks of websites, and there's plenty of them to go around. Let's check them out.
As we've seen, <html>
contains the HTML code. We've also encountered a tag that contains text that'll be displayed on the website.
Do you remember which tag that was?
<html> <body> </body> </html>
Great job! <body>
holds the content of the webpage. We'll see why we need it in a bit.
We'll need a few more tags, though. Why? Let's see what happens when we publish some song lyrics without any other tags.
<html> <body> My favorite things Raindrops on roses Whiskers on kittens Bright copper kettles Warm woolen mittens </body> </html>
See how they all appear in a single line? That wouldn't make for an impressive website, would it?
It doesn’t make a difference if we add multiple spaces or line breaks. HTML still interprets them as a single space.
<html> <body> My favorite things Warm woolen mittens </body> </html>
We'll have to use a few different tags to display our lyrics in a way we're proud of.
Let's add a heading to tell visitors what the next section is about. That's easily done with heading tags, like <h1>
.
<html> <body> <h1>My favorite things</h1> Raindrops on roses Whiskers on kittens Bright copper kettles </body> </html>
Whoa! Now people will surely know what they're going to read about.
Notice the 1
in <h1>
? That's there because there are different heading types that vary in size.
Let's add a few extra heading tags in ascending order to see what happens.
<html> <body> <h1>My favorite things</h1> <h2>Raindrops on roses</h2> <h3>Whiskers on kittens</h3> Bright copper kettles </body> </html>
Great stuff! See how the <h1>
is the biggest heading? The 1
means it has the highest level of importance.
Let's add the opening tag of this heading from scratch.
<html> <body> <h1>My favorite things</h1> Raindrops on roses Whiskers on kittens Bright copper kettles </body> </html>
Perfect! <h1>
, along with its closing tag </h1>
, is what we'll use to create the highest level heading in a website.
We can also separate lines in paragraphs. This paragraph tag is short and simple.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on roses Whiskers on kittens Bright copper kettles </p> </body> </html>
We've just made our first paragraph!
Paragraphs come in handy when we want to separate different lines of text in the content.
Let's make two paragraphs with two lines each.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on roses Whiskers on kittens </p> <p> Bright copper kettles Warm woolen mittens </p> </body> </html>
Great job! Although, we won't need more than one paragraph for the moment.
We've added a heading and two paragraphs, but the lyrics still need some improvement.
Let's use a few line breaks and make them shine.
We'll add each lyric on a separate line with the help of the line break tag, <br>
.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on roses<br> Whiskers on kittens </p> <p> Bright copper kettles<br> Warm woolen mittens </p> </body> </html>
Sweet! That already looks way better.
<br>
doesn't have a closing tag because it's an empty tag. Empty tags don't have content, but they can still help structure a page.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on roses<br> Whiskers on kittens </p> <p> Bright copper kettles<br> Warm woolen mittens </p> </body> </html>
Exactly! We can use as many <br>
tags as we want, but we never have to close them.
What if we want to emphasize things in a web page? Well, there's a tag for that, and it's called <em>
.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on <em>roses</em><br> Whiskers on kittens<br> Bright copper kettles<br> Warm woolen mittens </p> </body> </html>
Great job! We've just added emphasis to this important word.
There's also a tag for making text bold: the <strong>
tag.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on <em>roses</em><br> Whiskers on <strong>kittens</strong> </p> </body> </html>
There! We can use the <strong>
tag to make what's important stand out in our webpages.
We've covered tags that appear in the actual website, but there's one tag that isn't displayed in the website. It's the <head>
tag.
<html> <head> </head> <body> </body> </html>
Perfect! Let's see what we'll use this tag for, shall we?
The <head>
tag is used to add special information like the website title or how to style the page.
Let's give our website a title. For that, we need to add the <title>
tag inside the <head>
tag.
<html> <head> <title>My Page</title> </head> <body> <h1>My favorite things</h1> <p> Raindrops on <em>roses</em><br> Whiskers on <strong>kittens</strong> </p> </body> </html>
That's it! Our webpage now has its own title.
<html> <head> <title>My page</title> </head> </html>
Yes, that's the order that makes sense!
There's an important part of a website's code that we've neglected so far: the doctype.
The doctype tells the web browser which HTML version we're using.
<!doctype html> <html> <head> <title>My Page</title> </head> <body> <h1>My favorite things</h1> <p> Raindrops on <em>roses</em><br> Whiskers on <strong>kittens</strong> </p> </body> </html>
Nice! If we skip the doctype, the web browser has to guess, which is never a great idea.
To set the doctype, we need to wrap a !
sign and the words doctype
and html
inside angular brackets.
<!doctype html> <html> <head> <title>My Page</title> </head> <body> <h1>My favorite things</h1> <p> Raindrops on <em>roses</em><br> Whiskers on <strong>kittens</strong> </p> </body> </html>
Nice! Now this website is flawless.
To be precise, files with HTML code are webpages. When they're joined together, they become a website.
That's what links, or hyperlinks, do: they join together webpages and connect them with other websites.
So, instead of having to type a webpage's or website's address into a web browser, links can take us there with a simple click.
The link tag is short and simple: <a>
. In between the opening and closing tag goes text we want to be visible on the webpage.
<!doctype html> <html> <body> <a>Take me somewhere!</a> </body> </html>
Easy! The web browser will display anything in between the opening and closing tag as a link.
To make the link work, we still need to add a destination address. For that, we'll use something known as a attribute.
Attributes provide additional information to tags and go inside the opening tag. The attribute we need for links is called href
.
<!doctype html> <html> <body> <a href>Take me somewhere!</a> </body> </html>
Sweet! We'll use href
to add a destination address we want to link to.
The href
attribute still needs a value. For that, we need to add an equals sign and quotation marks.
<!doctype html> <html> <body> <a href="">Take me somewhere!</a> </body> </html>
Awesome! This means that href
will receive the value of what we'll put inside the quotation marks.
Now we only need to provide a destination address, also known as a Uniform Resource Locator, or URL for short.
<!doctype html> <html> <body> <a href="https://pywe.org/">Take me somewhere!</a> </body> </html>
Finally, we have a working link! Where might it take us?
Let's build the href
attribute from scratch.
<!doctype html> <html> <body> <a href="https://pywe.org">Take me somewhere!</a> </body> </html>
Simple! We can add any URL we want as a value.
Now let's create another link tag just to get the hang of it.
<!doctype html> <html> <body> <a href="https://pywe.org/courses/">Take me somewhere!</a> </body> </html>
You're great at making links! Maybe you should be called "Link", just like in that old video game.
We can also link to local files. This link works only if we have an index.html
file saved in the same folder.
<!doctype html> <html> <body> <a href="index.html">Take me somewhere!</a> </body> </html>
Nice! We'll use these type of files when we'll start working on our own website.
If we want to add images to our site, there's a tag for that as well.
<!doctype html> <html> <body> <img> </body> </html>
Nice! We'll soon add an actual image to this tag as well.
Just like <br>
, <img>
is an empty tag, which means it has no closing tag.
<!doctype html> <html> <body> <img> </body> </html>
Perfect! If we want to add an image, we just need to use the <img>
tag and not worry about closing it.
Because <img>
is an empty tag, we need to use an attribute to point to an image: the word src
, which stands for source.
<!doctype html> <html> <body> <img src=""> </body> </html>
Nice! This src
attribute will let us specify where to get the images from.
Again, we can use local images. That means we can point to images that are in the same folder as the webpage.
<!doctype html> <html> <body> <img src="image.png"> </body> </html>
Great! Just like before, this link works as long as we have an image.png
file in the same folder.
But we can also use a URL to point to an image on another website.
<!doctype html> <html> <body> <img src="https://www.pywe.org/static/edufield/img/logo.png"> </body> </html>
Sweet! We can link any images we want this way.
We can also use attributes that change the size of images. For example, the width
attribute adjusts the width of the image.
<!doctype html> <html> <body> <img src="https://www.pywe.org/static/edufield/img/logo.png" width="100"> </body> </html>
Nice! We've just changed the width to 100
pixels.
If we want to adjust how high an image is, we just need to add the height
attribute with a value inside quotation marks.
<!doctype html> <html> <body> <img src="https://www.pywe.org/static/edufield/img/logo.png" width="100" height="70" > </body> </html>
That's it! That's how we can adjust the images in our website.
There's another very useful tag we can use to display a webpage inside another webpage.
We can do that with the inline frames tag, <iframe>
.
<!doctype html> <html> <body> <h1>My favorite website</h1> <iframe src="https://pywe.org.com"></iframe> </body> </html>
Great! We can use the <iframe>
to add a webpage, or something from a webpage, inside another webpage.
A great way to include videos in a web page is to use YouTube and the easiest way to get there is to add an inline frame.
<!doctype html> <html> <body> <h1>My favorite video</h1> <iframe src="https://youtube.com/embed/Vhh_GeBPOhs"> </iframe> </body> </html>
Isn't that great? Most websites add videos the exact same way.
Time to make things a bit nicer, no? In this chapter, we'll add CSS inside some tags to change how they look.
Do you remember attributes? They're just a way to provide additional information to tags.
As it turns out, every HTML tag has an attribute that we can use to change how it looks: style
.
<!doctype html> <html> <body style=""> I'm still in between tags. </body> </html>
Great! We'll use style
to change how the web browser displays the content of a tag.
All we need to do now is add a value to the style
attribute. How about we change the background color of the entire <body>
section?
<!doctype html> <html> <body style="background-color:gray;"> I come in many shades of gray. </body> </html>
Awesome! That wasn't so hard actually.
style
values have a simple formula. We start with a property, like background-color
.
<!doctype html> <html> <body style="background-color:gray;"> I come in many shades of gray. </body> </html>
That's how we tell the browser what we want to change.
We'll then add a colon (:
) followed by how we want to change the property. In this case, we'll change the color to gray
.
<!doctype html> <html> <body style="background-color:gray;"> I come in many shades of gray. </body> </html>
Obviously, we can change it to any other color we want.
The style
attribute uses CSS. It's good to remember that CSS statements require a semicolon (;
) at the end.
<!doctype html> <html> <body style="background-color:gray;"> I come in many shades of gray. </body> </html>
Great job! You're getting the hang of this.
Let's use the style
attribute with the <p>
tag to change the color of the text to red.
<!doctype html> <html> <body> <p style="color:red;">I'm simply red.</p> </body> </html>
Perfect! Just like before, we wrote down a property name, added a colon and some value.
Because of the semicolon we can use multiple statements of CSS code.
Let's change the font of our text while also setting the color to red.
<!doctype html> <html> <body> <p>I'm the default font.</p> <p style="color:red;font-family:arial;">I'm a different font.</p> </body> </html>
We can add as many changes as we want, as long as we use the semicolon between each one.
Let's try something different. This time, we'll change the font size of a heading with the font-size
property and the value 26px
.
<!doctype html> <html> <body> <h1 style="font-size:26px;">I'm kind of a big deal</h1> </body> </html>
Nice! That's exactly how we need to assign a property and a value to the style
attribute.
px
stands for pixels and is a way of measuring how big something is on a screen. The higher the number before px
, the bigger it is.
<!doctype html> <html> <body> <p style="font-size:26px;">I'm kind of a big deal</p> <p style="font-size:13px;">People can read me</p> <p style="font-size:4px;">This was a bad choice</p> </body> </html>
As we'll see when we'll make our own website, we can use px
for a lot more than just text.
Sometimes we need headings or paragraphs to be centered. The good news is that there's a property just for that: it's called text-align
.
<!doctype html> <html> <body> <h1 style="text-align:center;">I'm at the center of attention</h1> </body> </html>
Exactly! Just like other properties, text-align
is made out of two words connected with a hyphen, (-
).
To align text in the middle, we use the word center
as a value.
<!doctype html> <html> <body> <h1 style="text-align:center;">I'm at the center of attention</h1> </body> </html>
Exactly! The value center
aligns the text horizontally.
So far we've changed the style of entire tags one by one. We can, however, also divide and style different sections of HTML code.
If we want to group a set of words for example and change their color, we can use the <span>
tag.
<!doctype html> <html> <body> <h1>A familiar story</h1> <p>A <span style="color:red;">long time ago</span> in a galaxy far, far away ...</p> </div> </body> </html>
Great job! Anytime we want to change something inside another tag, we can use the <span>
tag.
If we want to group entire tags together and change their style, we can use the <div>
tag to catch them.
<!doctype html> <html> <body> <div style="color:yellow;background-color:black;text-align:center"> <h1>A familiar story</h1> <p>A long time ago in a galaxy far, far away<br>...</p> </div> </body> </html>
Gorgeous! See how <div>
is a power to be reckoned with? It can bring a lot of other tags to its side.
<span>
and <div>
are great for using CSS to style websites. We'll learn more about that later when we use both in different files.
//styles.css
div { color:yellow;background-color:black; } span { color:white; }
//webpage.html
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div> <h1><span>A familiar story</span></h1> <p>A long time ago in a galaxy far, far away ...</p> </div> </body> </html>
This is where we're heading. Might look like a lot now, but we'll soon be making and styling websites with ease.
Links are great at connecting websites with each other, but they're also great at connecting webpages to form a website.
Taking users around a website is called navigation. To create a navigation menu, we'll look into lists.
Lists are a great way of organizing information and one of the most used elements in HTML. Before adding any links, let's learn the basics.
List tags come in a few different types. Let's start with ordered lists.
<!doctype html> <html> <body> <ol> </ol> </body> </html>
Great! We've just created an ordered list ... without any content.
We've just used <ol>
to create a list, but it's still empty. To add a list item, we can use the <li>
tag.
<!doctype html> <html> <body> <ol> <li>Harry</li> </ol> </body> </html>
Great work!
Let's build an ordered list from scratch.
<!doctype html> <html> <body> <ol> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ol> </body> </html>
Nice work opening and closing those tags!
The letters or numbers before the list items are called markers. Instead of numbers, we can also use letters as markers.
To set the marker type, we can use the type
attribute. For uppercase letters in alphabetical order, the value we need is A
.
<!doctype html> <html> <body> <ol type="A"> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ol> </body> </html>
See that? We've just used uppercase letters to organize our list alphabetically.
If we want roman numerals as marker types, we need the I
marker type.
<!doctype html> <html> <body> <ol type="I"> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ol> </body> </html>
Awesome! You know your HTML attributes.
If we want to list something in descending order, we just add the attribute reversed
to the <ol>
tag and voilà!
<!doctype html> <html> <body> <ol type="I" reversed> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ol> </body> </html>
There! Pretty handy if we ever need a countdown, no?
Unordered lists might sound a bit chaotic, but they're actually just bullet lists. To create one, we use the <ul>
tag.
<!doctype html> <html> <body> <ul> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ul> </body> </html>
Great job! We can use the <ul>
tag when we don't need to list items in a specific order or rank them by importance.
Just like in ordered lists, we'll use the <li>
tag to add list items.
<!doctype html> <html> <body> <ul> <li>Harry</li> <li>Hermione</li> <li>Ron</li> </ul> </body> </html>
You're listing these items like a pro!
We can also make combinations of ordered and unordered lists.
Try to create an unordered list that contains an ordered list.
<!doctype html> <html> <body> <ul> <li>My personal list of the best comic book movies: <ol> <li>The Dark Knight</li> <li>Spider-Man 2</li> <li>Avengers: Infinity War</li> </ol> </li> <li>My personal list of the worst comic book movies: <ol reversed> <li>Howard the Duck</li> <li>Superman IV</li> <li>Batman & Robin</li> </ol> </li> </ul> </body> </html>
Unordered, ordered, or reversed, we can combine them all to fit our needs!
Now let's use the <a>
tag to add a link to a list item.
<!doctype html> <html> <body> My personal list of the best comic book movies: <ol> <li><a href="http://imdb.com/title/tt0468569">The Dark Knight</a></li> <li>Spider-Man 2</li> <li>The Avengers</li> </ol> </body> </html>
Great! We could add a link to each list item if we wanted to.
With that, we can already make a basic website navigation in HTML.
<!doctype html> <html> <body> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </body> </html>
Sweet! This is how the most websites allow us to navigate. This will come in handy for sure!