Prerequisites

Websites 1

There are more than a billion websites on the internet. From massive services like Facebook ...

Websites 2

... to simple websites like blogs, communities, and discussion forums.

Websites 3

But no matter how complex or simple, most websites are written in HTML.

Let's have a look behind the scenes of this website.

<html>
 <body>
  Welcome, friend!
 </body>
</html>

Look at that! This bit of code around  Welcome, friend! already makes a website.

HTM-what?

HTML stands for Hypertext Markup Language. With HTML code, we can tell web browsers how to display a website. 

Web browsers

Web browsers like Chrome and Safari know how to read HTML code and display websites based on the code.

Let's make Hello, World! display in this website.

<html>
 <body>
  Hello, World!
 </body>
</html>

Nice! These cryptic words seem to tell the browser to display Hello, World!.

Structure

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.

Tags

<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?

Great! We'll find out what the <body> tag does in a minute.

Angular brackets

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.

Pairs

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>.

Beginning

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.

Ending

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.

Using 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>.

Body

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>.

Simple website

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 1

Tags are the building blocks of websites, and there's plenty of them to go around. Let's check them out.

Body

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.

Whitespace

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?

Makes no difference

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.

Heading 1

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.

Headings 2

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. 

Headings 3

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.

Paragraphs 1

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 2

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.

Paragraphs 2

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.

 

Line breaks 1

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.

Empty tags

<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.

Emphasis

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.

Bold

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.

Tags 2

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?

Head

The <head> tag is used to add special information like the website title or how to style the page. 

Title

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.

All together now

<html>
 <head>
  <title>My page</title>
 </head>
</html>

Yes, that's the order that makes sense!

Doctype 1

There's an important part of a website's code that we've neglected so far: the doctype.

Doctype 2

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.

Using doctype

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.

Websites

To be precise, files with HTML code are webpages. When they're joined together, they become a website.

Links

That's what links, or hyperlinks, do: they join together webpages and connect them with other websites.

Clicking links

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.

Link tag

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.

Attributes 1

To make the link work, we still need to add a destination address. For that, we'll use something known as a attribute.

Attributes 2

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.

Attributes 3

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.

Attributes 4

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?

Using href

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.

Using links

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.

Local links

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.

Images 1

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.

Images 2

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.

Images 3

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.

Local images

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.

Linking images

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.

Width

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.

Height

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.

Webception

There's another very useful tag we can use to display a webpage inside another webpage. 

Inline frames 1

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.

Inline frames 2

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.

Sprucing things up

Time to make things a bit nicer, no? In this chapter, we'll add CSS inside some tags to change how they look.

Attributes

Do you remember attributes? They're just a way to provide additional information to tags.

Adding some style

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.

Background color

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.

Property

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.

Value

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.

Semicolon

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.

Font colors

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.

Font families

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.

Font size

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.

Pixels

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.

Aligning text 1

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, (-).

Aligning text 2

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.

Grouping

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.

Spantastic

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.

Div

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.

What's to come

<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.

Navigation 1

Links are great at connecting websites with each other, but they're also great at connecting webpages to form a website.

Navigation 2

Taking users around a website is called navigation. To create a navigation menu, we'll look into lists.

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.

Ordered lists 1

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.

Ordered lists 2

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!

Multiple list items

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!

Ordered lists 3

The letters or numbers before the list items are called markers. Instead of numbers, we can also use letters as markers.

Marker types 1

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.

Marker types 2

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.

Descending

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 1

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.

Unordered lists 2

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!

Combined lists

 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!

Adding a link

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.

Navigation 3

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!