Select Lesson
Digital Postcard - Lesson 1. 1
15 min
HTML, CSS and JavaScript: The Bones of a Webpage
5 min
Tags—start/end and self-closing
5 min
Elements
5 min
Indenting HTML
5 min
Head section—for the computer to read
5 min
Body section—webpage content
5 min
Label the Parts of a Web Page
5 min
Changing colors with CSS
5 min
Where to next?
Create a postcard
Digital Postcard - Lesson 1. 1
15 min
HTML, CSS and JavaScript: The Bones of a Webpage
5 min
Tags—start/end and self-closing
5 min
Elements
5 min
Indenting HTML
5 min
Head section—for the computer to read
5 min
Body section—webpage content
5 min
Label the Parts of a Web Page
5 min
Changing colors with CSS
5 min
Where to next?
30 min
Create a postcard—a simple HTML course for beginners
Hyper text Mark-up Language (HTML) uses tags, <>
, to format a webpage.
This taster will cover the formatting of headings, images, links, paragraphs and a touch of CSS
HTML/CSS Intro Project
Digital Postcard - Lesson 1. 1
Lesson Outline
task 1: Choose a theme
task 2: Add a heading
task 3: Different headings
task 4: Making paragraphs
task 5: Paragraph tags
task 6: Choose an image
task 7: Image tags
task 8: Add an anchor
task 9: Anchor activity
task 10: Changing colors
The lesson plan below will provide in-depth explanations of the code found in this Postcard HTML-CSS taster.
Concepts
HTML, CSS and JavaScript: The Bones of a Webpage
Apps and webpages are transformed from an endless paragraph of text to an interactive, well designed and structured webpages through using the three languages : '''HTML, CSS and JavaScript'''.
HTML - the markup language (Format the content)
Hypertext-markup language, or HTML, is a language used to add formatting to text.
See the example below of a poem written with and without html on this webpage.
Without HTML:<br>
I went out to the hazel wood,
Because a fire was in my head,
And cut and peeled a hazel wand,
And hooked a berry to a thread;
And when white moths were on the wing,
And moth-like stars were flickering out,
I dropped the berry in a stream
And caught a little silver trout.
<hr>
<h1>With HTML</h1>
<em>
<p>When I had laid it on the floor<br>
I went to blow the fire aflame,<br>
But something rustled on the floor,<br>
And someone called me by my name:<br>
<p>It had become a glimmering girl<br>
With apple blossom in her hair<br>
Who called me by my name and ran<br>
And faded through the brightening air.</em>
<p>Poem by W. B. Yeats from <a href="http://www.world-english.org">world-english.org</a>
CSS - the style sheet language (Make it pretty)
Cascade Style Sheets, or CSS, is a styling language that can be used control the layout and look of a webpage.
It can be taken from a linked page or added to the HTML page you are on at the top of the page inside <style></style>
tags.
See the small snippet below for an example.
<style>
h1{
background-color:mediumTurquoise;
}
em{
color:midnightBlue;
}
p{
background-color:powderBlue;
}
</style>
<h1>O Captain! My Captain!</h1>
<p><em>"O Captain! my Captain! our fearful trip is done,<br>
The ship has weather'd every rack, the prize we sought is won,<br>
The port is near, the bells I hear, the people all exulting,<br>
While follow eyes the steady keel, the vessel grim and daring;<br>
But O heart! heart! heart!<br>
O the bleeding drops of red,<br>
Where on the deck my Captain lies,<br>
Fallen cold and dead."<br></em>
<p>Poem by Walt Whitman from <a href="http://www.rainsnow.org/csh_poems_by_walt_whitman.htm">rainsnow.org</a>
JavaScript - the programming language (Make things clickable and interactive)
The interactive tables and buttons you see on a web page (plus a lot of things you probably don't notice) are controlled with JavaScript.
You can learn more about how JavaScript is used in either our Web Development courses or our JavaScript courses.
JavaScript can be written on a separate page or added to the bottom of your HTML webpage with <script></script>
.
Here is an example of JavaScript below, click the button to trigger the Javascript.
<h1>JavaScript</h1>
<p><em>"Low hidden in among the forest trees<br>
An artist's tilted easel, ankle-deep<br>
In tousled ferns and mosses, and in these<br>
A fluffy water-spaniel, half asleep<br>
Beside a sketch-book and a fallen hat -<br>
A little wicker flask tossed into that."<br></em>
<p>"Water Color" by James Whitcomb Riley from <a href="http://www.public-domain-poetry.com/james-whitcomb-riley/a-water-color-29321">Public Domain Poetry</a>
<p><button id="greenButton">Click to color background</button>
<script>
function makeBackgroundGreen() {
document.body.style.backgroundColor = 'green';
document.body.style.color = 'powderBlue';
}
greenButton.style.backgroundColor = 'green';
greenButton.style.color = 'powderBlue';
greenButton.onclick = makeBackgroundGreen;
</script>
Concepts
Tags—start/end and self-closing
HTML uses tags to format things. It add spaces, creates paragraphs and headings.

<h1>This is a heading</h1>
<p>This is a paragraph of normal text
The spelling and the characters you use are important when they are inside the tags <>
.
They must have correct spelling (for the CSS, in American English (color not colour)) and punctuation, (for example, all brackets and quote marks are in pairs).
Most of the tags are easy to remember, some are full words like <strong>
, some are abbreviations like image, <img>
, or emphasize, <em>
.
Start and end tags
Tags typically come in pairs; an opening start tag and a closing end tag with a forward slash: <tag>Words</tag>
and the actual content to display goes between them, like this:
<h1> My awesome page </h1>
Example 1: Heading tags
<h1>Biggest heading</h1>
<h3>Medium heading</h3>
<h6>Smallest heading</h6>
Example 2: Normal text tags
<p>Paragraph of text</p>
<strong>Strong, heavy text in bold</strong>
<p>This is another paragraph</p>
<em>Emphasised text in italics</em>
Self-closing tags
Self-closing tags have no closing tag - only an opening tag.
Here are some common ones:
<p>Thematic break (hr)<br>
Makes a <hr> line.
<p>Line break (br)<br>
This breaks <br> your text into lines
<p>Image (img)<br>
<img src="http://gathergather.co.nz/grumpy-cat.png" width="30%">
Concepts
Elements
An HTML element is made up of a start tag, an end tag (if it has one), and all the content in between.

So these are both elements:
<br>
and
<h1>Hi Sis</h1>
You can also have elements inside of elements.
2 elements, one inside the other.
<a href="add a hyperlink">
<img src="add an image">
</a>
3 elements inside each other.
<body>
<ul>Bullet point list
<li>point 1</li>
<li>point 2</li>
</ul>
</body>
Concepts
Indenting HTML
Formatting your HTML code makes it much easier to read.
If an element is inside another element it should be moved to the right a bit on a new line (this is called indenting).
This leaves white space on the left hand margin so that it is really easy to see what elements are inside others and it makes your code tidy.
How much do we indent by?
The internet rages with conversations about whether to use 2 spaces, 4 spaces, or 8 spaces when indenting. We are a 2 space company because we follow the Google Style Guide →.
So what should you use? Well, we recommend 2 spaces. However, it is ok to follow personal preference- if you wish to have 4 or 8 spaces then add those. Just make sure you use indentation to add space to the left margin.
You can use empty lines (hitting ENTER) for formatting as well, this has no effect on your webpage but it makes the HTML code easier to read.
2 space indentation:
<!DOCTYPE html>
<html>
--<head>
----<title>HTML TAGS</title>
--</head>
--<body>
----<h1>Hello Everyone</h1>
--</body>
</html>
4 space indentation:
<!DOCTYPE html>
<html>
----<head>
--------<title>HTML TAGS</title>
----</head>
----<body>
--------<h1>Hello Everyone</h1>
----</body>
</html>
You might also notice how the automatic color coding in your code editor helps a lot too. This is called "syntax highlighting".
Concepts
Head section—for the computer to read
There are some tags that we add to the HEAD or top part of our webpage. These are usually for linking to special files (not normal webpages), or giving the computer information about your webpage and they do not appear on the webpage.
Example: Look at the output of this code - what actually shows up for viewers?
<!DOCTYPE HTML>
<html>
<head>
<title>Name in tab</title>
<link href="..." rel="...">
</head>
<body>
<h1> Hello World!</h1>
</body>
</html>
Only the h1
text is in the body section, the rest are in the HEAD of the webpage and are not seen by the webpage user.
Doctype <!DOCTYPE HTML>
<!doctype html>
, or <!DOCTYPE HTML>
, is an element that tells the browser what type of document this is.
Line 1 should always have
<!doctype html>
to tell the browser that this document is written in HTML 5.
Title <title> </title>
Title
is a head section element, with a start and end tag.
The title
element is important, it defines the title of a document. Title elements are often used on search engine results pages (SERPs) to show a section of your webpage. Title elements are useful for Search Engine Optimization, SEO, (Helping people to find your website) and social sharing (The info that can show up when you share a link with people). They also show up in your browser tab.
The title element of a web page should give a lot of information of a page's content clearly and in a couple of words. It is often the name of the webpage.
<head>
<title>Introduction to Coding Lesson Notes: Code Avengers</title>
</head>
Link <link>
A head section element, with a self-closing tag.
Required attributes: rel="What is the relationship between these files?"
and href="What is the file path to the file?"
.
The link
tag links the CSS style sheet to our web page, it is used for other files as well but CSS is the most common file you link to. We will learn more about how to add CSS in our later lessons.
<head>
<link rel="stylesheet" type="text/css" href="profile1.css">
</head>

Concepts
Body section—webpage content
There are a lot of HTML tags that can go into the body section of your HTML.
They body section comes beneath the head section and everything you see on a live webpage is inside the body section.
In the notes above we have seen a few tags that have not been explained yet. <img>
, <a>
and <iframe>
will be covered below in more detail.
Heading tags <h1></h1>


Headings
are body section element, with a start and end tag.
Required attributes: None
Heading tags make text bigger and add space above and below it.
<body>
<h1>h1: main heading</h1>
<h2>h2: subheading</h2>
<h3>h3: sub-subheading</h3>
<h4>h4: for sub-headings you need under your h3 headings</h4>
<h5>h5: you probably wouldn't use this much</h5>
<h6>h6: the last level of heading</h6>
</body>
There are 6 heading tags, h1,h2,h3,h4,h5,h6
, and they should be used in order of importance, not on how they make your text look (You can change how they look with CSS)
By order we mean order of importance or detail, their hierarchy.
Here is an example section of a webpage about foxes.
Can you see how the headings change as the detail increases?
<h1>The Fox</h1>
<h2>Food:</h2>
<h3>Winter</h3>
<p>Info....
<h2>Types of fox:</h2>
<h3>Artic</h3>
<p>Info....
<h3>Gray</h3>
<p>Info....
<h3>Red</h3>
<p>Info....
Paragraph tag <p>
Paragraph
is a body section element, with a start and an optional end tag.
Required attributes: None
<p>
is the paragraph tag. It adds space between paragraphs of text.
<body>
<p>Hi, I'm para1</p><p>Hello, I am para 2</p>
</body>
The same code, without optional tags:
<p>Hi, I'm para1<p>Hello, I am para 2


Break tags <br>
A body section element, with a self-closing tag.
Break tags put text on a newline.
<body>
Like in JavaScript and Python,
hitting ENTER doesn't do anything.
To start new lines of text in your code, show the text on a newline in the output.<br>You have to use <br> (br) to separate text onto newlines<br>see?
</body>
Image tag <img src="">
A body section element, with a self-closing tag.
Required attributes: src
and alt
The image tag adds an image to your webpage. It needs to have a source attribute which links to where the image file is stored (Either on your server or on another server).
alt attribute
When your image is broken or you are using a screen reader, then the text in the alt
attribute is used. Though it is not a required tag, you should use it for your users who have visual disabilities. When you use it, describe what the image is for rather than what it looks like, for example; "CA logo" is more useful than red letters."
<body>
<img style="width:100%;" src="/images/postcard/1-7.png" alt="An example image">
</body>
Anchor tag <a href="">Link</a>
Anchor uses start and end tags.
Required attribute: href
<body>
Hi all,<br>
<a href="www.codeavengers.com">Go to Code Avengers</a>
to learn how to code.
</body>
Code Avengers Quiz
Label the Parts of a Web Page
Concepts
Changing colors with CSS
In the final task of the Postcard project we have 4 options for changing the color of your postcard... but how does it work?
<link rel="stylesheet" href ="/css/theme4.css">
links to a separate file stored on the CA server. This file is a .css
file and contains a lot of code that looks like this:
body {
background-color: white;
border: 30px solid #ff8989;
border-radius: 10px;
display: inline-block;
font-size: 16pt;
margin: 100px auto;
min-height: 300px;
overflow: auto;
padding: 30px;
position: relative;
width: 550px;
}
This code changes how the element that has been selected looks. Body selects the whole visible page because everything visible is inside the body of the webpage.
There is a lot CSS can do- it is a very powerful tool for design.
There are 4 themes, each with different colors, fonts and subtle layouts.
You can easily change so many things about your website using CSS, have a closer look at the heading example from earlier.
<style>
body{
background-color:lightGray;
}
h1{
background-color:paleTurquoise;
}
h2{
background-color:lavender;
margin-left:10px;
}
p,h3{
background-color:cornsilk;
margin-left:20px;
}
</style>
<body>
<h1>The Fox</h1>
<h2>Food:</h2>
<h3>Winter</h3>
<p>Info....
<h2>Types of fox:</h2>
<h3>Artic</h3>
<p>Info....
<h3>Gray</h3>
<p>Info....
<h3>Red</h3>
<p>Info....
</body>
Where to next?
Congratulations you have created a postcard with HTML!
Share it with the world by clicking on the text to '''"Show postcard.html in a new tab" This will open your project up in a real live webpage. Copy the URL and send your postcard however you like- email, Facebook, what ever suits you.
If you liked this take a look at our HTML/CSS courses to learn more about making websites, or if you want more projects to try do more hour of code or go to our next level- intro to coding.
Read more below
Computer Coding – the New Direction
HTML and CSS have been used to build websites for over 20 years. Once only familiar to “computer nerds”, these coding languages are starting to become more accessible to all kinds of people. Nowadays, even amateurs can create their own website from scratch. This makes HTML and CSS a hot topic, along with the fact that the demand for skilled I.T. professionals is steadily growing around the world. The problem for the industry is that there aren’t enough people to fill those jobs! The truth is HTML and CSS aren’t just for website and app developers; the skills involved are super useful for graphic designers, bloggers, online journalists and authors, digital marketeers, IT project managers and entrepreneurs.
What is HTML/CSS?
So what do these mysterious acronyms mean? HTML stands for HyperText Markup Language, while CSS stands for Cascading Style Sheets, and they’re required for building websites. To help explain how they work, let’s go through an overview of how a website is made:
A website needs content. This just means text, images, video, or audio. The people who decide what content goes into a site are usually a company’s marketing team. One of those people may be a copywriter. A copywriter is someone who writes persuasive marketing material – otherwise known as copy.
This is where HTML comes in. HTML provides structure to the content of a site. It tells the web browser what text, pictures, or videos should appear on a webpage, and how to arrange them all. A web developer takes all of the content and turns it into HTML code.
CSS comes into play when it’s time to add some style to the site. CSS tells the web browser how the HTML elements are to be displayed. Usually, a web designer will decide which colors, fonts, sizes, patterns, and layouts to use. CSS is written in a separate file to HTML, which makes it easier to edit. The HTML and CSS files need to be linked together to make it all work.
If you’re wondering how you can learn these key languages, look no further! Code Avengers has developed a learn-by-doing experience that gets you building real world webpages while you learn. Let me tell you a bit about it:
Code Avengers HTML/CSS Courses
Intro to HTML/CSS (3 hrs)
Our Code Avengers HTML/CSS track will help you learn from the very beginning. Kick-start your coding career with our fun and simple introduction to HTML5 and CSS3. By the end of this 1-hour course, you will have contributed 2 webpages to WikiJr – a version of Wikipedia for children powered by Code Avengers. Not bad for a beginner!
Intro to the Internet (3hrs)
You probably use the Internet and the World Wide Web every day, but do you know how it works? This ten lesson course is an easy way to find out. Simple explanations, graphics, and tasks reinforce your learning. Getting noticed is just as important; this course gives a basic introduction to web design and shows the way to get your site up and running.
HTML/CSS level 1 (15hrs)
Build your first website as you learn the essentials of HTML and CSS with level 1! Play with cool effects and customize headers, footers, images and fonts to make your own personal and business profile pages that are uniquely you. Your journey to becoming a web developer or designer starts here.
HTML/CSS level 2 (13hrs)
Ready to dive deeper into HTML and CSS? What better way to do it than by building a 5 page, interactive travel guide optimized for mobile devices? Level 2 will take you through it the fun way. Add audio and video to your webpages, make interactive buttons, create an HTML table and discover new ways to code with color.
HTML/CSS level 3 (In development)
Responsive Web Design makes your website look great on any screen size, so we’ll show you how to use it in our level 3 course! Along the way you’ll learn how to use advanced CSS selectors and special layout techniques. Oh, we’ll also introduce you to PHP – a powerful scripting language used to make dynamic websites like Facebook.
HTML/CSS level 4 (In development)
In Level 4 learn advanced skills that will get you sought after in the I.T. industry. This course teaches best practice for organizing code and maintaining large websites using the BEM naming convention and the CSS pre-processor LESS. These tools streamline collaborative processes, making you an important member of any team. In addition, add new CSS properties to your inventory for even more engaging webpages.
Why Should You Learn With Our Intro Courses?
If you have looked through our courses you would have seen our range of lessons on Python, JavaScript, HTML/CSS, and more courses on using those languages as tools in Game Development, Web development and Design.
We also have an Intro to Coding course where we have stripped down and simplified our level one courses to give you a quick taste of what coding looks like with some fun finished products.
If you're new to programming, this is where you want to start so you can see what language you want to learn first: the easy to learn Python, with it's simpler commands that are easy to understand and remember. Widely used JavaScript, which is commonly used by a wide group of developers for gaming, creating large text based programs, to making websites interactive. Or do you want to dip your toes into the markup languages of HTML and CSS to create beautiful and informative webpages.
Code Avengers Introduction Courses
The Code Avengers Introduction track has 3 lessons, 5 projects and a quiz, with more learning material being added often.
HTML/CSS
The track starts with our HTML/CSS Introduction. In 5 lessons, this 2 hour course will teach you about tags and the basic structure of a webpage, how to add images, videos and links and a little CSS to add style to your webpage. At the end of this course you will have made a WikiJnr webpage, tested your knowledge with a quiz and learned a little about JQuery, the JavaScript library that can add all sorts of cool functionality to your web page.
JavaScript
In this 10 lesson intro to JavaScript you'll learn how to use variables, if statements, alerts and prompts to build your own quiz app. When your done, you can build your first game with our "Intro to Game Development" listed in the projects section on the right and practice important concepts like drawing graphics, following sequences or reading co-ordinates.
View the outline of the Intro to JavaScript
Python
Finally, the 5 lesson Introduction to Python course. This 1 hour course will give you a short overview of all of the basics of Python. It's great if you just want to get an idea of what the language is like, or if you have never done any programming before. In here you will learn a range of Python skills such as input, output, variables, if statements, turtles and loops to build a basic program.
Teaching Intro to Coding in schools
If you are a teacher wanting to introduce programming into your classroom, we recommend you start here. We have even made a unit of lesson plans that you can follow to teach this as a 10 hour course. It could be taught in school or as a code camp or after school activities program. This course has been run with students as young as nine years old and all around the world, they can make fun and real-world things like wiki Jnr pages, quizzes and games. We also have developed a range of physical activities to get the body and mind moving while teaching important computing concepts.
See our lesson plans on Intro to Coding here!
Our courses are written in a way that they align with the programming learning objectives of a number of different countries curricula, and we're happy to help you out if you want to know which levels or sections your class should do to cover a particular topic. And like the rest of our courses, we also have a fantastic teacher dashboard which allows you to see how your students are progressing and any lessons they are having trouble with.
View the Intro to Coding track now!
We are so excited to see people get into coding and try something new. I promise it is not nearly as scary as you might think! Code Avengers is here to make coding awesome and give you a helping hand.
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F