Select Lesson
Outcomes
5 min
Digital Postcard Lesson 1. 1
15 min
The bones of a web page are HTML, CSS and JavaScript
5 min
Start and end tags, and self closing tags
5 min
Elements
5 min
Formatting white space
5 min
Lesson 1. Intro to tags
15 min
Attributes — href=
, src=
5 min
Structural tags — html
, head
, body>
, nav
, footer
5 min
Head elements—title
, link
, meta
| doctype
5 min
Body elements — h1
, p
, br
, i
, b
, em
, strong
, hr
, header
, footer
5 min
Lesson 2. Head elements
2 hrs
Label the Parts of a Web Page
5 min
HTML Review Quiz
Image tag — <img scr="" alt="">
1 min
Image src
attribute
1 min
Image width
and height
attributes
5 min
Image with title
attribute
5 min
Image with alt
attribute
5 min
Iframe tag <iframe>
5 min
Copyright and Creative Commons
5 min
Lesson 3. Images
2 hrs
Anchor tag <a href=""> </a>
5 min
Anchor attributes
5 min
Linking file paths
5 min
Lesson 4. Anchors
2 hrs
The importance of good design
5 min
CSS
10 min
CSS selectors and properties
5 min
Formatting CSS
5 min
Add background images background-image: url();
3 min
Lesson 5. Intro to CSS
2 hrs
Intro To HTML-CSS
Outcomes
5 min
Digital Postcard Lesson 1. 1
15 min
The bones of a web page are HTML, CSS and JavaScript
5 min
Start and end tags, and self closing tags
5 min
Elements
5 min
Formatting white space
5 min
Lesson 1. Intro to tags
15 min
Attributes — href=
, src=
5 min
Structural tags — html
, head
, body>
, nav
, footer
5 min
Head elements—title
, link
, meta
| doctype
5 min
Body elements — h1
, p
, br
, i
, b
, em
, strong
, hr
, header
, footer
5 min
Lesson 2. Head elements
2 hrs
Label the Parts of a Web Page
5 min
HTML Review Quiz
Image tag — <img scr="" alt="">
1 min
Image src
attribute
1 min
Image width
and height
attributes
5 min
Image with title
attribute
5 min
Image with alt
attribute
5 min
Iframe tag <iframe>
5 min
Copyright and Creative Commons
5 min
Lesson 3. Images
2 hrs
Anchor tag <a href=""> </a>
5 min
Anchor attributes
5 min
Linking file paths
5 min
Lesson 4. Anchors
2 hrs
The importance of good design
5 min
CSS
10 min
CSS selectors and properties
5 min
Formatting CSS
5 min
Add background images background-image: url();
3 min
Lesson 5. Intro to CSS
2 hrs
Course overview
This is the lesson plan for the HTML Intro course and is suitable for Junior High students and above. Access the student learning notes here.
Prior Learning
Outcomes
Create a basic webpage for Wiki Jr
The HTML Intro Course contains 5 Code Avengers' online lessons with 5 tasks each.
Just doing the Code Avengers Lessons will take about 1 - 1 1/2 hours depending upon the person.
The content here stretches those lessons over roughly 3 hours and gives suggested lesson plans with added notes and activities to expand understanding.
60 min
1: HTML, head and body tags
Hyper text Mark-up Language, HTML, uses tags to structure a webpage.
HTML/CSS 1 Project
1.1: 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
Firstly, create a quick postcard using HTML and CSS.
Concepts
1.2: The bones of a web page are HTML, CSS and JavaScript
Coding webpages
There lots ways to build websites. For example, you can find a template and use a website builder like Weebly to quickly and easily create a professional looking website, without writing a any computer code.
However, if you want to build something unique and have full control over how your webpages look and work, you need to know 3 computer languages: HTML, CSS and JavaScript.
HTML
HTML (HyperText Markup Language) is used to write the content (text, images, video etc.) and structure of webpages.
The example image shows what Google looks like with only HTML code.
CSS
CSS (Cascading Style Sheets) is the language used to add colors, fonts and layout to webpages.
Combine HTML and CSS with some good design sense and you'll nice and pretty webpages like Google.
JavaScript
JavaScript is a programming language that is used to make things click-able and more interactive.
For example, Google search uses JavaScript to automatically suggest search keywords as you type, and to display the search results when you press ENTER
.
Server-side programming
In addition to HTML, CSS and JavaScript, websites may have another programming language that reads and writes data to and from a database and inserts that data into the HTML and CSS code that gets sent to your web browser.
If you want to learn more about servers and server-side programming, you can start by doing our Intro to the Internet course.
Some neat tricks
View the HTML code for any webpage: Press CTRL+U
in Windows, or CMD+U
in Mac.
To turn off CSS code for any website drag the following bookmarklet to your bookmarks toolbar, and click the bookmark to turn off CSS code: <a href="javascript: var el = document.querySelectorAll('style,link');for (var i=0; i<el.length; i++) {el[i].parentNode.removeChild(el[i]); };">Remove Styles</a>
The Web Developer plugin for Firefox and Chrome is able to do this
Concepts
1.3: Start and end tags, and self closing tags
HTML uses tags to format things. It add spaces, creates paragraphs and headings.
The spelling and the characters you use are important when they are inside the tags <>
.
They have to be correct in spelling (for the CSS, in American English (Color not colour)) and correct in punctuation, (for example, all brackets and quote marks have partner).
Most of the tags are easy to remember, some are full words like <strong>
, some are abbreviations like image, <img>
, or emphasize, <em>
.
A few might look strange but you will learn them as we go. Good Luck.
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:
Example 1: Heading tags
Example 2: Normal text tags
(Note: </p>
is optional and not normally written in)
Self-closing tags
Self-closing tags have no closing tag - only an opening tag.
Here are some common ones:
Concepts
1.4: Elements
An HTML element is made up of a start tag, end tag, and 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
'
<ul>Bullet point list
<li>point 1</li>
<li>point 2</li>
</ul>
</body>'''
Concepts
1.5: Formatting white space
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 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.
A lot of it has to do with using the TAB key to indent. In some editors the default space of TAB is 4 spaces and so people grow up learning and loving that, if you use tab characters some languages and editors, like Python, assume you are using 8 spaces.
So what should you use?
Well, we recommend 2 spaces, but 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>
Later on, you might also notice how the automatic color coding in your code editor helps a lot too. This is called "syntax highlighting".
HTML/CSS Intro Lesson
1.6: Lesson 1. Intro to tags
Lesson Outline
task 1: intro to HTML
task 2: adding text
task 3: paragraph tags <p>
task 4: h1
headings
task 5: Headings
Extension: Concepts
1.7: Attributes — href=
, src=
Our HTML tags can be as simple as a <p>
, to create a paragraph, or they can have more information inside them.
Anchor tags for example need an attribute called href
(hypertext-referencing), href
holds the to link to another webpage. href=""
is an example of an attribute.
Below we have a color-coded example of parts of an HTML element.
<tag attribute="value">Text node inside element</tag>
<a href="www.codeavenger.com"> This is a (hyperlink) link to CA!</a>
Tags structure your webpage, they add spaces and headings and images. Some of these tags use attributes these add more functionality a tag.
Attributes have a specific name, like width=' '
or href=" "
and have a value inside quote marks, like width='300px'
. You can have more than one attribute in a tag. Some attributes must be used with a tag and some are optional, you will learn them as you go.
Confused? It will make more sense as you write the code yourself.
Here is an example of an image tag
<img src="http://gathergather.co.nz/grumpy-cat.png" height="100">
The src attribute is not optional, it tells the browser where to find the image. In this case the value, "http://gathergather.co.nz/grumpy-cat.png takes you to a grumpycat image.
The height attribute is optional has a value of 100 pixels.
This will make the image image 100 pixels tall. The width can also be set with a width attribute, if it is not added the width of the image will automatically resize to keep the same height to width ratio of the image.
Concepts
1.8: Structural tags — html
, head
, body>
, nav
, footer
All HTML tags are used to structure your page but the ones we call structural tags often don't look like they do anything when you first add them to a page, you will learn more about how useful these are when you learn about CSS. But it is important to use structural tags to structure your page.
Here are a few common ones <html>
, <head>
, <title>
, <body>
, <header>
, <nav>
, <section>
, <article>
, <figure>
, <aside>
, <footer>
.
We do not go into depth about most of these in this course, our level 1 and level 2 HTML courses will teach you more.
HTML, head and body tags
The three tags that are really important and are in every html page you write are <html></html>
, <head></head>
and <body></body>
.
Here is how they are used:
All your code on your page, except <!doctype html>
is inbetween the <html>
and </html>
tags.
- Line 1 should always
<!doctype html>
- Line 2 will have
<html>
and the very final line of code on your page will be</html>
- Line 3 will have
<head>
. Between this and the closing head tag</head>
will be all the tags for all your information for the robots to read. These content in these tags are invisible to the person using your webpage (user).
- After
</head>
will be the<body>
tag. This signals the start of your webpage content. Everything you want your users to read on your webpage SHOULD be in here and will be closed by the</body>
end tag.
- After
- Line 3 will have
- Line 2 will have
So here is how it looks, notice the indentation to tell you what elements are sitting inside of others. Look at the code, what can you see on the webpage?
To write code correctly you have to learn if a tag belongs in the head section or in the body section of your code.
<html></html>
, <head></head>
and <body></body>
elements exist. It is important to know what code goes in the head section and what code goes in the body section. BUT actually writing these tags in your code is optional. (Don't give me that look) They are still in your code, your browsers are clever enough to "insert" them for you. So know that they are there when you write your code. In our courses, we follow a set of coding guidelines called the Google style guide, which recommends leaving out optional tags. So we will not add <html></html>
, <head></head>
and <body></body>
in our code (except for teaching them to you). Similarly we don't use the optional </p>
tag for paragraphs and a few other optional end tags that you will find.Why?
Why do we not include <html></html>
, <head></head>
and <body></body>
, even though they are always in our code and we need to put some tags in the head section and some tags in the body section?
One of the reasons it because of how much indentation we have to do. Web pages can get really complicated, you can have several different levels of hierarchy in your code, where elements sit inside of other elements. By not including the first three elements (which are always there) our code looks cleaner and is much easier to read.
Code from above without the HTML,head and body elements (and optional </p>
tag)
<!doctype html>
<title>Example Webpage</title>
<meta name="description" content="This is in the head section, can you see it on the webpage?">
<style>
h1{background-color:cornflowerBlue;}
</style>
<h1>The heading of our webpage</h1>
<p>This is visible on the page, and so it goes inside the body element.
Concepts
1.9: Head elements—title
, link
, meta
| doctype
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?
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 tag–<!doctype html>
<!doctype html>
, or <!DOCTYPE HTML>
, is an element that tells the browser that this document is written in html 5.
Required attributes | None |
Tag placement | Place on Line 1 |
Tag type | Self closing |
Line 1 should always have the <!doctype html>
tag to tell the browser that this document is written in html 5.
Your web page should also always be saved with the .html
file path ending, home.html
Notice that it is actually outside of the html
and head
elements.
<!doctype>
<html>
<head></head>
<body></body>
</html>
Title tag—<title> </title>
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 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.
Required attributes | None |
Tag placement | Top of page (head) |
Tag type | Start and end |
The title element of a web page should give a lot of information of a page's content clearly and should use not very many words. It is often the name of the webpage.
<head>
<title>Introduction to Coding Lesson Notes: Code Avengers</title>
</head>
Link tag <link href="" rel="">
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.
Required attributes | href= The hyper reference links to the file rel= This says the relationship of the new file to the web page
|
Tag placement | Top of page (head) |
Tag type | Self-closing |
<head>
<link rel="stylesheet" type="text/css" href="profile1.css">
</head>
Meta tag meta
<meta name="..." content="...">
elements are used by the browser, robots and search engines to find out information about your webpage. Use it to add descriptions, make your site accessible to different screen sizes and more.
(Often) required attributes | name= Name of meta tag ie author, description, keywords content= Description and information
|
Tag placement | Top of page (head) |
Tag type | Self-closing |
<head>
<meta charset="UTF-8">
<meta name="description" content="Lesson notes for the introduction course on HTML 5 with Code Avengers.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<meta name="keyword" content="lessons, code, programming, html">
The words you type into a search engine become the keywords it searches webpages for.
This meta element will help those search engines find your site...except it is not always that useful as Google Search ignores your keyword meta element. There are other search engines out there that do use keywords.Concepts
1.10: Body elements — h1
, p
, br
, i
, b
, em
, strong
, hr
, header
, footer
There are a lot of HTML tags that can go into the body section of your HTML.
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>, <h2></h2>, ... <h5></h5>, <h6></h6>
Heading tags make text bigger and add space above and below it.
There are 6 heading tags, h1,h2,h3,h4,h5,h6
, and they should be used in order, 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.
Required attributes | None |
Tag placement | Middle of page (body) |
Tag type | Start and end |
Here is an example section of a webpage about foxes.
Can you see how the headings change as the detail increases?
Paragraph tag <p></p>
<p>
is the paragraph tag. It adds space between paragraphs of text. Paragraphs are distinct sections of a piece of writing, usually dealing with a single theme each.
Required attributes | None |
Tag placement | Middle of page (body) |
Tag type | Start and an optional end tag. |
The same code, without optional tags:
You can even have code on the same line and the tags will move them in the web display.
Break tag <br>
Break tags put text on a newline.
Required attributes | None |
Tag placement | Middle of page (body) |
Tag type | Self-closing |
Emphaising text <i></i>
, <em></em>
, <b></b>
, <strong></strong>
There are four very similar tags that can be used to add emphasis to your text.
Required attributes | None |
Tag placement | Middle of page (body) |
Tag type | Start and end |
<i> </i>
is used around text in an alternate voice, for technical terms, foreign words, copied text, and quotes that have been italicized.
<b></b>
is placed around stylistically offset text, such as keywords and copied text or quotes. It is also common for product names.
<em></em>
should be used around text with stress emphasis, that is text you’d pronounce differently.
<strong></strong>
should be put around text that has strong importance (stronger emphasis).
Read more examples here at HTML5 Dr
Topic change <hr>
Required attributes | None |
Tag placement | Middle of page (body) |
Tag type | Self-closing |
In the last version of HTML, HTML4, <hr>
meant horizontal rule. But now its purpose has been changed. In HTML 5, tags should be used for semantic not visual reasons, so hr
should be used to indicate a change of topic, or thematic break, not just used randomly.
Footer section <footer> </footer>
Footer
is a structural tag used for the banner at the bottom of the webpage. It usually contains website information like author, date modified, links to around the site, contact information, whatever you need.
Required attributes | None |
Tag placement | Bottom of page (body) |
Tag type | Start and end tag |
Header section <header> </header>
Header
is a structural tag used for the banner at the top of the webpage. It usually contains the name of the web page, a logo and a navigation bar to the rest of the website.
Required attributes | None |
Tag placement | Bottom of page (body) |
Tag type | Start and end tag |
HTML/CSS Intro Lesson
1.11: Lesson 2. Head elements
Lesson Outline
task 1: doctype
task 2: title
element
task 3: link
tag
task 4: tags and attributes
task 5: fixing bugs
Complete the second task of this intro project.
Code Avengers Quiz
1.12: Label the Parts of a Web Page
60 min
2: HTML 2
Learn about the image tag, <img>
, the anchor tag, <a></a>
and a little about file paths.
Code Avengers Quiz
2.1: HTML Review Quiz
Concepts
2.2: Image tag — <img scr="" alt="">
The image tag adds images to your web page.
Required attributes | src= The source attribute tells the browser where to "source" (find) the image. It is usually the URL of where the image is.alt= is text to describe the image. It is not required but you should use it.
|
Tag placement | Middle of page (body) |
Tag type | Self-closing |
Concepts
2.3: Image src
attribute
The image element will not work without the src
attribute to link to the image file.
The source attribute tells the browser where to "source" (find) the image. It is usually the URL of where the image is.
Concepts
2.4: Image width
and height
attributes
The width
and height
attributes tell the browser what size to display the image.
For example: without width
and height
attributes, the browser displays the image at its full size.
Here we have added the height
and width
attributes, setting them to roughly half the pixel size of the original:
You can use pixels or a % of the container it is in.
If you set only one of the two attributes, say width
, the height of the image will automatically scale up or down so that the picture is has the same ratio of height to width.
Concepts
2.5: Image with title
attribute
The title
attribute is used to add tooltips to images. A tooltip is a message that is shown when the mouse pointer hovers over an item on a web page.
Hover over the picture in the webpage output below and then look at the HTML code. You can change the text in the HTML code and see what happens.
Concepts
2.6: Image with alt
attribute
alt
is another image attribute.
alt
is the alternative text that screen readers use to explain images to people who are visually impaired. It also shows up when there is a "broken image", when the computer can't find a picture because of typos or moved files.
Seach Engines (like Google) use this information, along with the title
of the image
, and the title tag
to find your page and images.
You should always include the alt
attribute in your image code.
Think about the words you use:
Describing the meaning of the image is far more useful than describing what it looks like.
For example:
"Logo of Code Avengers" is far more useful than "Red letters"
Below we have an a broken image with alt
text.
Here is the code:
Do you see how both alt
and title
have text but they are used differently?
Concepts
2.7: Iframe tag <iframe>
iframe
is a body section element, with a self-closing tag (it doesn't use a closing tag).
Required attributes:
The iframe
tag embeds (or puts) an HTML web page inside another HTML web page.
Common things that you can embed are Youtube videos, google maps and ...
For example:
In this case you are using a special web page provided by YouTube that makes the video fill the whole screen.
Concepts
2.8: Copyright and Creative Commons
Think about copyright
You must learn to not use copyrighted material.
Intellectual property is important to recognize and you can easily fail assessments or get in trouble at work for stealing images from people- especially if you make money from it.
What constitutes intellectual property
? They are ideas, and the creations or products made from those ideas. Intellectual property belongs to the person who thought them, (or the company that person works for).
A famous example of a fight over intellectual property is depicted in the movie The Social Network (2010), which talks about the beginning of Facebook and a real-life lawsuit filed against it's creator Mark Zuckerburg for stealing the Winklevoss twin's social media idea. Zuckerburg was hired to make a facebook-like website for them and instead made his own. Other lawsuits were involved, but in February 2008 they settled in an agreement reportedly valued at US$65 million.
Creative Commons
There are a lot of creators who are happy for you to use their images for free.
An easy way to find them is using
Create Commons Image Search
It gives access to search services that find content you can use, share and remix.
To use this page, enter a search query then click one of the search buttons to search a database, like Flickr.
HTML/CSS Intro Lesson
2.9: Lesson 3. Images
Lesson Outline
task 1: adding images
task 2: image width & height
task 3: images from other sites
task 4: videos with the iframe
element
task 5: review
Extension: Concepts
2.10: Anchor tag <a href=""> </a>
The anchor tag is used to tell the browser that we want to link to somewhere else on our website or on the world wide web.
In between the <a>...</a>
is where you put your text (or image) that you want to make clickable.
Required attributes | href= Hyper-reference is a URL of the page or image you want to go to.
|
Tag placement | Middle of page (body) |
Tag type | Start and end tag |
Here is an example to click to Google.
Extension: Concepts
2.11: Anchor attributes
Hyper-reference attribute href=""
Here we have "Code Avengers" in between the anchor tags.
But wait! This link doesn't take me anywhere!
We need a way of setting the URL (e.g. http://codeavengers.com) to the text, so that the browser can go to the address when a user clicks on the link.
How??
Once again, we need to use attributes.
This time a hyper relative, or href attribute. It will contain the address of the place we want to click too.
For example:
<a>
is the tag namehref
is the attribute name- http://codeavengers.com is the attribute value
- "Code Avengers" is the human-readable text node
Target attribute target=""
The target attribute controls how the link is open, the default way it works (when you don't include it) is target="_self"
and the link will open in your current window. you can use target="_blank"
to open the link in a new tab.
Title attribute title=""
The title attribute works with both the image tag and anchor tag.
It creates a tooltip message that pops out when you hover over the link.
All three attributes together
Here is an example of all three attributes inside the anchor start tag. The code below links the text to the home page, adds a tooltip to explain and when clicked, the link will open in a new tab.
Nesting (or how to make an image clickable)
You can also make an image a link using nesting.
Nesting is simply when we place a tag within another tag.
For example:
<a href="#">
<img src= "#">
</a>
This relationship is often referred to using the terms "parent" node and "child" nodes or parent element and child element.
A node is a word used to describe where our code branches and is part of the vocabulary we use when talking about nesting.
Let's try linking our Code Avengers logo to our webpage using an anchor element.
Take our link from the previous example. By replacing the text with an image element, which links to our logo, we will have created a linked image.
For example:
Extension: Concepts
2.12: Linking file paths
File paths can be written in different ways and so it is important to know where and how you save your files on the computer.
The file path we have been using in our work mostly has been the absolute file path to files on the web, the URL (Uniform Resource Locator), https://www.google.com
They are based on how your files are saved in folders
Let's do a quick count of the 4 types of links used in this course.
- Links to pages on other websites use the full URL.
<a href="http://wikipedia.org"> Wikipedia </a>
- Links to pages in the same folder use the file name only.
<a href="page2.html"> Mario </a>
- Links to pages in a different folder start with
/
followed by the folder and file path.<a href="/wiki/index.html"> Wiki Jr Home </a>
- To link to a website home page set
href
to/
.<a href="/"> Website Home Page </a>
Click here for more information about using file paths.
HTML/CSS Intro Lesson
2.13: Lesson 4. Anchors
Lesson Outline
task 1: anchor to another website
task 2: anchor to pages in the same folder
task 3: anchor to pages in a different folder
task 4: anchor to home page
task 5: anchor review
60 min
3: CSS
Cascade style sheet (CSS) is another coding language used for styling the webpage.
Activity
3.1: The importance of good design
Businesses all over the world are competing to create websites, apps and games that Users want to buy.
So what gets Users interested?
It needs to function but it also must look and feel good to use.
Visual appeal is really important.
"But, isn't all art and stuff subjective?"
Yes, but there are fundamental rules to learn in good design that you have to master before you break them.
There is a lot of psychology, and trial and error of artists that has developed into a guide of principles and elements of good design.
For example people like repetition, it makes them feel comfortable to be able to predict their world. How anxious would you feel and annoying would it be if the exit icon moved to a different spot every time you went to a new web page? Or a website had a completely different layout for each webpage?
These posters have been adapted from Patrick Butler. His original posters can be found on http://splitcomplementary.blogspot.com.
They are a great resource for the classroom.
Concepts
3.2: CSS
Cascading Style Sheets
Cascading means the styles of outer elements often apply to the styles of inner elements.
Style means all visual elements of a page, like:
C O L O R size borders hover position
Add CSS
There are three ways to add CSS to your web page:
- You add it by adding a link to an external CSS page:
<link rel="stylesheet" href="/css/wiki.css">
- You add it internally in the header section between
<style></style>
tags
3. Or you can add it in-line, that means inside the particular HTML start tag as a style="..."
attribute.
Concepts
3.3: CSS selectors and properties
Below is a CSS rule for headings:
It contains a selector and declarations. Each declaration has a property and one (or more) values.
For example:
h1 {
color: Blue;
line-height: 1.4;
font-size: 24px;
padding: 10;
}
So all the h1 headings in the text will change color from black to blue.
- CSS rule
- HTML selector
- Property
- Value
- Declaration
Concepts
3.4: Formatting CSS
A declaration has one property and should be on a new line. We end a property with a colon :
and we end a declaration after the value/s with a semicolon ;
.
Like HTML, you need to use extra whitespace and add line breaks to make it more readable.
Instead of this:
body { background-color: gray; color: white; font-family: Helvetica, Verdana, Arial, sans-serif; }
The formatting should look like this:
body {
background-color: gray;
color: white;
font-family: Helvetica, Verdana, Arial, sans-serif;
}
Our first selector body{}
body
is a selector that applies styles to the entire page, and all of its content.
All the elements in the page will change to match your style properties.
body {
font-family: sans-serif;
}
Our first style background-color:
background-color
is a property that can be applied to any tag, such as the body.
Changing font color color:
Now the text is a bit hard to read on the blue background. Because the <body>
tag is the highest possible visible HTML tag, the body selector will also allow us to target the font color on the entire page.
Concepts
3.5: Add background images background-image: url();
You can also add background images to your web page (background-image: url(/images/textures/light2.png);
)
with the property background-image:
and the value url(link to image file);
For example:
HTML/CSS Intro Lesson
3.6: Lesson 5. Intro to CSS
Lesson Outline
task 1: intro to CSS
task 2: background-color
& color
task 3: tag rules
task 4: multiple rules
task 5: background-image
Complete the webpage and we can put it in Wiki Jr if you wish.
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