Select Lesson
HTML and CSS
5 min
Tags
5 min
Start and end tags
3 min
Self-closing tags
2 min
Elements
3 min
Formatting
2 min
Lesson 1. paragraph and break tags
15 min
Lesson 2. title
, heading
& strong
tags
15 min
Lesson 3. Fixing common HTML mistakes
15 min
HTML Review Quiz
5 min
Link tags
5 min
HTML, XML and XHTML
5 min
HTML
HTML and CSS
5 min
Tags
5 min
Start and end tags
3 min
Self-closing tags
2 min
Elements
3 min
Formatting
2 min
Lesson 1. paragraph and break tags
15 min
Lesson 2. title
, heading
& strong
tags
15 min
Lesson 3. Fixing common HTML mistakes
15 min
HTML Review Quiz
5 min
Link tags
5 min
HTML, XML and XHTML
5 min
60 min
HTML tags
Hypertext Markup Language uses tags to structure a webpage-tell it to start a new paragraph, add headings, bullet point things, add images and link to other web pages.
Concepts
HTML and CSS
Web pages are made with 2 markup languages: HTML, Hyper text markup language, defines the content of pages and CSS, Cascading style sheets, defines how the page looks. When you use the internet your web browser opens a file store on a server computer, connected by the Internet, reads the HTML and CSS code and displays pretty pages on your screen.
In lessons 1-10 of our level one HTML/CSS course you'll create your own Code Avengers profile as you learn the basics of HTML. A markup language just gives the browser instructions on how to make everything appear on screen. Each element, like headings or paragraphs, has a default setting but can then be customised with CSS.
There are two ways to view a webpage. The first one is to see the webpage output- which is the view you get when you visit a webpage on a browser (Like this webpage). The second is the code editor view where you see the text surrounded by symbols and keywords.
Concepts
Tags
HTML uses tags to format things. It adds spaces, creates paragraphs and headings.
If you did not add tags to your text , the text will just show as lines of words on the web page, even if it has spaces the code editor
Compare the two code blocks below:
Tags are keywords that are place in between the less-than,<
, and greater-than, >
, symbols- <keyword>
The spelling and the characters you use are important when they are inside the tags <>
.
There are two types of elements, those with start and end tags, and self-closing tags.
Concepts
Start and end tags
Tags typically come in pairs; an opening start tag
and a /closing end tag
:
The start tag defines the start of an HTML element.
E.g. in <title>Code Avengers</title>
the start tag is <title>
The end tag defines the end of an HTML element.
E.g. in <title>Code Avengers</title>
the end tag is </title>
The text that is shown on the webpage goes between them.
Example 1: Heading tags
Example 2: Normal text tags
Concepts
Self-closing tags
Self-closing tags have no closing tag - only an opening tag.
Here are some common ones:
Thematic Break (Horizontal rule) | <hr> |
Topic 1 Topic 2 |
Line break | <br> |
bre ak |
Image | <img src= |
Concepts
Elements
An element is just what we call a whole tag group (the start, the end and what ever is in between).
So these are elements:
<br>
and
<h1>Hi Sis</h1>
You can also have elements inside of elements
2 elements
1.<a href=”..”>
2.<img src=”..”>
(1.)</a>
3 elements
1.<body>
2.<h1>Heading</h1>
3.<p>New Paragraph</p>
(1.)</body>
Concepts
Formatting
When you are writing in HTML and making your web page use tab to move text two spaces in.
If an element (tag group) is inside another element it should be moved left a bit on a new line (this is called indenting)
Having white space will help make your HTML text
readable to people.
<!DOCTYPE html>
<html>
--><head>
--*--><title>HTML TAGS</title>
--></head>
--><body>
--*--><h1>Hello Everyone</h1>
--></body>
</html>
(Later on, you might also notice how automatic color coding in your code editor helps a lot too.)
HTML/CSS 1 Lesson
Lesson 1. paragraph and break tags
Lesson Outline
task 1: Add text to a text editor
task 2: spaces and blank lines
task 3: break tag
task 4: paragraph tag
task 5: doctype
tag
HTML/CSS 1 Lesson
Lesson 2. title
, heading
& strong
tags
Lesson Outline
task 1: title
element
task 2: heading elements
task 3: sup
tag
task 4: strong
tag
task 5: link
tag
HTML/CSS 1 Lesson
Lesson 3. Fixing common HTML mistakes
Lesson Outline
task 1: fixing bugs
task 2: forward slash
task 3: spelling
task 4: not backslash
task 5: deleting
Code Avengers Quiz
HTML Review Quiz
Extension: Concepts
Link tags
Another example of a self closing tag is the <link>
tag:
<link rel="stylesheet" href="fancy.css" type="text/css">
This link element tells your web browser to link a CSS style-sheet with the HTML page.
href
is also required, it says where to find the linked document. Often your CSS file will be saved in the same folder as your html so all you need is the CSS file name.
type
tells the browser what kind of internet media the href
links to. In this case text that is in CSS markup
.
You can learn more about the 3 ways to add CSS → to your page here, but we will cover both in the following lesson plans.
Extension: Concepts
HTML, XML and XHTML
There are markups other than HTML and they are used for different things, XML looks similar to HTML but it used to transfer information between different programs .
HTML can be written badly and still work on computers.
However, mobile phones and smaller devices don’t always have the power to read through a mess of HTML and interpret it.
XML is a stricter markup language.
XHTML combines both markup languages into a strict version of HTML.
(If HTML was an average person XHTML would be the grammar police)
Some differences:
- Tag use:
*HTML you don’t have to use some end tags or tags to show the head and body, the computer assumes these things are there. (They are optional and best practice is to leave them out.)
*In XHTML you do have to show all tags and assume the computer won’t read in between the lines.
- Case sensitivity:
*HTML tags are case insensitive. This means<HTML>, <html> and <HtMl>
are all the same tag.
*XHTML tags are case sensitive. This means<HTML> and <html>
are different tags.
- Case sensitivity:
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