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.
Starting to learn HTML and CSS is easy and fun with this digital postcard. Learn about adding headings, paragraphs, images and links to create a holiday card or birthday celebration to share with friends and family.
Firstly, create a quick postcard using HTML and CSS.
100%
Concepts
1.2: The bones of a web page are HTML, CSS and JavaScript
5 min
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 50%
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
5 min
HTML uses tags to format things. It add spaces, creates paragraphs and headings.
All the code for web pages are lines of text and symbols. This code transforms into beautiful web pages when opened in a browser.
<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 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:
An HTML element is made up of a start tag, end tag, and the content in between.
Here you can see different sections of our HTML create different parts of our webpage
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
5 min
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.
Later on, you might also notice how the automatic color coding in your code editor helps a lot too. This is called "syntax highlighting".
Tab characters versus spaces
Tab is a very useful key to use for indentation when you are coding. Depending on your editor settings, hitting TAB will either add a tab character (which is one long space covering 2 or 4 or 8 normal spaces) or normal spaces. Editors all have a different setting to their tab character length. This means your code will look different when you open your file in the CodeAvengers IDE, having made it in notepad++. It is better to change your TAB key to just add your favourite number of spaces instead of the tab character (do this in the settings) so that when your code is opened by different editors it will look the same.
How can you tell if TAB is using tab character or inserting spaces? Hit TAB in an editor and hit your left arrow key once. Do you go back one space or do you go back 2 or 4 spaces at once (one tab character).
Using Wordpress or Weebly you can create basic websites without writing any code. However, if you want to build the next YouTube, Google, Twitter or Facebook, the first computer languages you need to learn are HTML and CSS!
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.
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 imageimage100 pixelstall. 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.9: Head elements—title, link, meta | doctype
5 min
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
<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>
Keyword
<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.
Using Wordpress or Weebly you can create basic websites without writing any code. However, if you want to build the next YouTube, Google, Twitter or Facebook, the first computer languages you need to learn are HTML and CSS!
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
<body>
<img src="http://gathergather.co.nz/grumpy-cat.png" alt="A cartoon of a grumpy cat.">
<p>img src="http://gathergather.co.nz/grumpy-cat.png" alt="A cartoon of a grumpy cat." <br>will get you this grumpy cat picture on your webpage. </body>
Concepts
2.3: Image src attribute
1 min
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.
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.
3 ways to resize an image.
It is good to know that you can use HTML to set your image sizes.
When you have learned more about HTML and CSS you should use CSS to resize your images.
If you learn about image manipulation (eg Photoshop) you should digitally resize your images correctly so that you won't need to use CSS or HTML and save on memory.
Concepts
2.5: Image with title attribute
5 min
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.
title="Yay, you hovered. Look a message appears!">
Concepts
2.6: Image with alt attribute
5 min
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:
<img src="example" width="160" height="131" alt="A cartoon of a grumpy cat." title="Yay, you hovered again.">
Do you see how both alt and title have text but they are used differently?
Concepts
2.7: Iframe tag <iframe>
5 min
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 ...
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
5 min
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).
Facebook
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.
Using Wordpress or Weebly you can create basic websites without writing any code. However, if you want to build the next YouTube, Google, Twitter or Facebook, the first computer languages you need to learn are HTML and CSS!
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.
<a href="http://www.codeavengers.com" target="_self"> Code Avengers Home- Click here </a> <a href="http://www.codeavengers.com" target="_blank"> Code Avengers Home - Click here </a>
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.
<a title="with no href attribute clicking this text will not take you anywhere"> Hover here </a>
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.
<a href="http://www.codeavengers.com" target="_blank" title="Go to the homepage"> Code Avengers Home </a>
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:
Click here → <a href="http://codeavengers.com"> <img src="/images/logo.png"></a> ← to go to Code Avengers.com
Extension: Concepts
2.12: Linking file paths
5 min
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.
Using Wordpress or Weebly you can create basic websites without writing any code. However, if you want to build the next YouTube, Google, Twitter or Facebook, the first computer languages you need to learn are HTML and CSS!
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
10 min
Cascading Style Sheets
Cascading means the styles of outer elements often apply to the styles of inner elements.
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
5 min
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.
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.
<style> body { background-color: blue; } </style> All the text on a web page is in the body section.
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.
<style> body { background-color: blue; color: white; } </style> All the text on a web page is in the body section.
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:
<style> body { background-image: url(/images/textures/light5.png); color: green; } </style>
All the text on a web page is in the body section.
Using Wordpress or Weebly you can create basic websites without writing any code. However, if you want to build the next YouTube, Google, Twitter or Facebook, the first computer languages you need to learn are HTML and CSS!
