LEARNING HTML

Now that you know how to make a basic webpage, it's time to take your skills up a level. In this section, you will be learning how to program web pages by completing a series of assignments of gradually increasing difficulty.

Each assignment will be represented by a common spider (the original web builders). Spider pictures are from the Spiders.us database. When you have completed an assignment, you will be given a chance to move on to the next level. You will be evaluated based on your ability to complete each of the levels and on effective coding skills and use of HTML tags.

TASKS

For this section you will be learning the basic HTML tags. Follow the HTML tutorials at http://www.w3schools.com/html/default.asp to learn how to use Hypertext Markup Language tags.

You will be working on a good majority of them but will not need to complete all of the tutorials listed there. Be sure to view the list below and complete the tasks listed. Be sure to complete the exercises listed at the end of each tutorial.

HTML Home

This simply gives you an overview of HTML with some references. There is also a quiz that you can attempt once you have completed all of the tutorials (where included).

HTML Introduction

This section explains the basics of HTML. At the end you should be able to:

• Define HTML
• Define HTML tag
• State the difference between <tag> and </tag>
• State the difference between the following tags:
  • html
  • head
  • title
  • body
  • h1
  • p
• Define the term Web Browers and give an example of one.
• Recreate the structure of an HTML document

HTML Editors

This section defines and gives examples of some basic HTML Editors. At the end you should be able to:

• Define what an HTML editor is and give some specific examples.

HTML Basic

This section will demonstrate some basic HTML tags. By the end you should be able to:

• Create a basic HTML page
• Create HTML headings (h1 to h6)
• State whether headings get bigger or smaller as the number gets bigger (ie. Is h1 the largest heading size or is h6?)
• Create HTML paragraphs
• Create a link to the MHS website
• Insert an image onto a webpage

HTML Elements

This section will allow you to review the concept of HTML tags or elements. By the end of this section you should be able to:

• Understand the concept of HTML tags and elements.
• Understand case sensitivity and whether you should use lowercase or uppercase
• Know the difference between and open and closed element (HINT: What does <br /> do and which type of element is it?)

HTML Attributes

This section will demonstrate how each element can have it's own look and attributes. By the end of the section you should be able to:

• Define what an HTML elements is and give examples
• Understand and demonstrate the HTML title attribute
• State and demonstrate what the the HTML href attribute provides
• State what the HTML width and height attributes provide
• State and demonstrate what the HTML alt attribute provides
• State whether you should use lowercase attributes with double quotes or not

HTML Paragraphs

This section will teach you about the different types of paragraphs you can create in HTML. By the end of this section you should be able to:

• Create a basic paragraph.
• Understand about spacing in HTML
• Create line breaks
• Fix 'The Poem Problem' so each line of the poem will display on it's own line
• Define and demonstrate the purpose of the <pre> tag

HTML Styles

This section will demonstrate how you can alter the default look of the HTML code. By the end of this section you should be able to:

• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

HTML Formatting

This section will demonstrate how you can format your text for a better user experience. By the end of this section you should be able to:

• Define the purpose of and use each of the following tags:
• <b>
• <em>
• <i>
• <small>
• <strong>
• <sub>
• <sup>
• <ins>
• <del>
• <mark>

HTML Comments

This section will demonstrate how you can add comments to your HTML code in order to leave notes that will not show up on the webpage itself. By the end of this section you should be able to:

• Create a single and multiline comment in HTML.

HTML Links

In this section you will learn about creating links to existing webpages. By the end of this section you should be able to:

• Use the HTML <a> element to define a link
• Use the HTML href attribute to define the link address
• Use the HTML target attribute to define where to open the linked document (eg. Same window, new tab, etc...)
• Use the HTML <img> element (inside <a>) to use an image as a link
• Use the HTML id attribute (id="value") to define bookmarks in a page
• Use the HTML href attribute (href="#value") to link to the bookmark

HTML Images

In this section you will learn how to insert an image onto your web page. By the end of this section you should be able to:

• Insert an image from existing website
• Insert an image from your computer
• Insert alternate text for all images
• Adjust the height and width of images

HOUSE SPIDER ASSIGNMENT: CREATE A WEB PAGE ABOUT YOURSELF

www.spiders.us

Use Notepad or Notepad++ to create a webpage about you using the requirements listed below. When you save it, use the extension ".html" instead of the default ".txt". If you want to continue editing the file in Notepad, open Notepad first, or right-click on the file name and select "Open with".

The content of this web page should be to tell your classmates who you are, what you are interested in and some things you are proud of. This web page will eventually be made visible to the world, so do NOT include your full name, your e-mail address nor anything that would enable strangers to contact you.

The HTML tags you must include are the basic ones that occur in every web page indluding:

• head
• title
• body
• headings
• paragraphs

• an image that portrays a favourite of yours (eg. A favourite band, team, movie, etc...)
• properly formattted text

When you have created and saved this web page file, use Notepad to re-open the "index.html" file that you created earlier. Edit this file to include a link to your new web page. For example, if you created a web page file called "Richard.html", then you should include this line of code in your "index.html" file:
  <a href="Richard.html">About me</a>

In the next section, you will learn how to make these pages live on the web

EVALUATION

A3. use the basic functions of an operating system correctly;
B2. plan and write simple programs using fundamental programming concepts;
Connect: Application of knowledge and skills in familiar contexts, in new contexts, and making connections within and between contexts.
Code: Using the conventions and syntax of computer programming languages correctly so that the code performs as intended.