In these sessions, we will be learning to make websites using HTML and CSS. No previous experience is necessary, just have fun and be creative!
Today we will learn a few of the most important HTML tags. You can use this to share your favorite book or summer activity. REMEMBER! When you are writing information about yourself, it's smart to keep your private information private. Don't give your full name or where you can be found.
For our meetings, we will be using mozilla.org's web editor called Thimble. It is at thimble.mozilla.org. You will need an account in order to save your web page you create today. If you are under 13, ask your parent to help.
To get started
A web page is made up of the text you want to say, and many HTML elements, called tags, that are enclosed in angle brackets. These tags tell your web browser what to show. HTML, and particularly HTML5, is used to give the structure and content of the page, but not specific appearance. (Later tonight, we'll use CSS to change how it looks.)
The paragraph below is an example of how you mark a paragraph in HTML, by surrounding it in opening <p> and closing </p> tags.
<p>All web pages on the internet use HTML!</p>
This bit of code:
<html>
<head>
</head>
<body>
<h1>My Favorite Season</h1>
<p>Today, I'd like to share about my favorite season.</p>
<p>There are four seasons in a year.</p>
<ul>
<li>spring</li>
<li>summer</li>
<li>fall</li>
<li>winter</li>
</ul>
<p>My favorite season is summer, because I can go to the beach with my family.</p>
<img src="http://images.pinchit.com/deals/2012/04/16/012292aa53_1334616708_550.jpg" alt="">
<p>Click <a href="http://bit.ly/1tOMKwv">here</a> to see my favorite sea animal.</p>
</body>
</html>
will create a web page that looks like this:
Check out the live demo to experiment yourself.
Our project today gives you a chance to share one of your interests. As you learn HTML tags today, you will add them to your a page about your favorite things.
If you would rather create a page on a different topic, that's ok too. Please don’t post your full name or address or even school, as these projects will be up on the internet for the whole world to see.
Start a new project at thimble.mozilla.org/editor/
You should delete all of the sample HTML! We will start with it completely blank.
Let’s learn a few tags to use on your web page! Most of the time you will have an opening tag and matching closing tag with some text in between.
The <h1> tag is used to make the text a heading.
<h1>My favorite book series is about Harry Potter</h1>
Add a heading to your page. Try changing the tag to an <h2> (and don’t forget to change the closing tag to /h2) - what changed? How many heading tags are there?
If you type out text, it will be displayed all on one line. What if you want to break it up into paragraphs? That’s where the <p> tag comes in.
<h1>My favorite book series is about Harry Potter</h1>
<p>Today, I'd like to tell you about the my favorite book series.</p>
<p>It is the book series about Harry Potter, a young wizard who learns magic at Hogwarts, and who everyone hopes will defeat a very bad wizard.</p>
Add a couple paragraphs to your web page about your favorite book.
You can add a list to your story using <ul> and <li> tags. Here is an example:
<p>Here are some of my favorite Harry Potter characters.</p>
<ul>
<li>Harry Potter (of course)</li>
<li>Hermione</li>
<li>Professor Lupin</li>
<li>Tonks</li>
</ul>
The <ul> tag (unordered list) tells the browser this is a list of items. The <li> (list item) tags are used around each list item.
Add a list to your web page with other books you like, or places you want to go. What happens if you change the <ul> tag to an <ol>? What do you think that stands for?
Lists are a little tricky because there is one tag within another one. Notice that the <ul> tag comes first and that there are <li> tags within it, before the closing </ul> tag. This will be used other places too! Anything you see in a web page is surrounded by a <html> and <body> tag.
Try adding these tags to your page to see what they do:
<strong></strong><em><u>Hi</u></em>Remember, they can be within other tags.
<p>My favorite book in the series is <u>Harry Potter and the Order of the Phoenix</u>.</p>
<p>It features many of my favorite characters, including <strong>Professor Lupin and Tonks</strong></p>
This story would be a lot more interesting with pictures! Adding a picture to our story is simple, we just use the <img> tag and tell it where our image is.
The <img> tag has an attribute called src and this is where we tell it the url to the image we want to use in our story. Here is an example <img> tag (notice that you don’t need a closing tag this time--the oldest tags are like that, including <br>):
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Harry_Potter_wordmark.svg">
What if the image is too big for your page? You can tell it to be a certain size. Can you guess what px stands for?
<img src="https://en.wikipedia.org/wiki/File:Harry_Potter_wordmark.svg" width="350px">
Add some images to your web page that have to do with your favorites! Make sure any Google Images Searches have SafeSearch on.
One of the things that makes web pages so amazing for writing about things is you can link things together with other web pages on the internet. It is really easy to do!
The <a> tag has an attribute called href and we will set that attribute equal to the url of the web page we want to link to. (H stands for "hyper". HTML stands for Hyper-Text Markup Language, and href stands for the Hyper-reference). Here is an example where I link the name Harry Potter to the web page about Harry Potter on Wikipedia:
<a href="https://en.wikipedia.org/wiki/Harry_Potter">Harry Potter</a>
Add a link in your web page. Is there another character you like? Link to a website about them!
There are more HTML tags to try, but we now have the skills to make an interesting web page. You can see all these elements on a web page by clicking here. If you want to use it as a starting point for your project, click Remix.Put enough information for your page to be interesting, and next we will learn some CSS to make the page look better! For now, it should look like this:
Next we are going to learn about Cascading Style Sheets, more commonly known as CSS. We are going to use CSS to improve the look and feel of our stories.
CSS is a language that can be used to describe how HTML is supposed to look. The important distinction here is that HTML structures the content, while CSS controls how it looks.
You need a tiny bit of HTML to ask for your stylesheet. This is the magic code that you must put in the head section of your html page:
<link rel="stylesheet" href="style.css">
Let’s look at some CSS:
body {
font-family: Arial;
background-color: lightblue;
}
If you paste the above code into the style.css panel in Thimble, what changes about your website? You might have to click the style.css file on the left side of Thimble page to show the CSS panel.
We can get an idea of what’s happening by looking at each line of the CSS.
<body> tags
Arial as the fontCSS follows a basic pattern. First, we select the HTML elements we want to change the look of. Then, we say what aspects of their look we want to change. Take this snippet for example:
body {
font-family: Arial;
background-color: lightblue;
}
We are selecting all <body> tags (usually there is only one),
then saying we want to modify the font and background color.
The part that selects the tags is called the selector, and each modification is called a declaration. A combination of a selector and any number of declarations is called a rule. A CSS file can contain as many rules as we want.
Let’s break down the concepts of selectors and declarations.
So far we have seen an example selector for all body tags. How can you make a selector for all paragraph tags? Add it to your project, making the paragraphs have a different background color!
Declarations are the style modifications we apply in each CSS rule. There are two parts to each declaration: the property and the value. The pattern is:
property: value;
There are an amazing number of options for declarations in CSS - you can do just about anything you want! But let’s start with just a few. Can you add the following declarations to your page?
font-family: Arial;
text-align: center;
color: yellow;
background-color: skyblue;
You can see all these CSS elements applied to the earlier html page by clicking here. If you want to use it as a starting point for your project, click Remix.
Congratulations! You have learned the basics for creating web pages! Use your new skills to complete your page. When you have an idea for how to improve the appearance, use your favorite search engine to help you learn how!
You read this far, and so great job on your web page today. Don’t forget that you can refer back here when you want to create more web pages. You can create them for school projects, as birthday cards for family members, or just for fun!
There's a fun web game that can help you understand and practice HTML tags. It is at https://eraseallkittens.com/ Play it at home. If you peek at it here, please turn your sound off.
If you see a web page that looks like what you want, there are many ways you can learn how it is done. You can right-click and choose "inspect element". You can view any web page's entire source (in Chrome on Windows, press Ctrl-U and Chrome on Mac, press Cmd-Opt-U). These are both part of a browser's developer tools (in Chrome on Windows, press Ctrl-Shift-I and Chrome on Mac, press Cmd-Opt-I to open them directly), or even use Mozilla's X-ray Goggles. Feel free to look at how someone else did it and see if you can make the same thing happen! Some sites like Thimble and codepen.io highly encourage you to learn from examples.
If you had fun today and would like to keep learning more HTML and CSS than we will cover in our sessions Khan Academy has an excellent tutorial.