Calendar
IF YOU ARE TOO BUSY TO REMEMBER ...

Here it is!
This is Calendar Remainder for those students of Teens Computer School who are too busy to remember what they have to do for home assessments.

Also this Calendar can remind previous lessons topics.
HTML
1 - Tags
2 - Page Sections
3 - Format/Nesting
4 - Head Tags
5 - Body tags
6 - Text Decoration
7 - Lists
8 - Colour
9 - Source
10 - Images
11 - Links/Anchor Tag
12 - Special Charaters
13 - Tables
14 - Frames

Exersise 1.
Your Guide
HTTP -
Hypertext Transfer Protocol- the language computers use to communicate hypertext documents (web pages) over the Internet

URL
Uniform Resource Locator, also called URI - the address of the document on the web.

WorldWideWeb (www)
Another term for the Internet and part of the URL address protocal - http://www.

Tags
opening tag < > and a closing tag </ >
Rule ONE: Whenever you open a tag you must close the tag.

Nesting
Putting one set of tags inside of the other.


Formatting
Indenting the nested tags by 4 spaces it makes it easier to read your code. If you make a mistake, it will be easier to find if the code is formatted.

Relative Address
An Exact Address contains the entire URL of the file. A Relative Address is for a file within the same web site and does not need the http://www.doman.com/ part of the address only the sub folder file path.


CSS
Cascading Style Sheets is the W3C standard for controlling the visual presentation of web pages.

Content
What the user sees when entering a web page; the text, images and applications the user will interact with.

Supported
Each browser has it's own DOM (Direct Object Model) that describes what a browser can do and what it can't. What a browser can do is supported and what a browser cannot do is not supported.

Style
Like fashion, style is all about appearance - in this case how your text appears. The sytle="" attribute of a tag will tell the tag how you want it to look.

Table
When you want your text to appear in columns you use a table element to create a column and row structure. See Lesson # for full instructions.
Tags

Tags

Don’t believe what anybody else tells you! The Internet is about tags. Tags control everything: how words look, where pictures are shown, what colours you can see and when things change.

This is what a pair of tags look like.
< > </ >

Each single tag has a mirror set of < >, these are called carrots. The < tells the browser that a tag is starting and the > tells the browser that the tag is closing.

In every pair, there is an opening tag < > and a closing tag </ >. You can tell the difference between them by the closing tag always has a / after the first <.

The opening tag tells the browser that you want it to perform an action. The closing tag tells the browser with the /, called a forward slash, that you want that action to stop.

It is very important that you remember that every opening tag MUST have a closing tag!

Rule ONE: Whenever you open a tag you must close the tag.

Once you open a tag you need to tell the browser which action you want it to do. The best way to explain how to do that is to show you.

This is the first set of tags you will need to make your web page:
<html></html>

In between the carrots are the letters html. This stands for Hypertext Mark Up Language. When the browser sees those letters it knows that it needs to make a web page.

Whenever you write tag names, called identifiers, like html, use lower case letters. It makes reading your code (all of the tags) much easier.

Rule TWO: Always use lower case to write tag names.

up
Page Sections

Page Sections

The code for a web page is broken into two sections.

Head – This holds information that the browser needs to see before it makes the page.

Body – Is what you see in the browser window. It holds all of the words and pictures.

There are special tags that go in each section.

<head></head>

<body></body>

Just like the <html></html> tags, the head and the body tags tell the browser to look at the information in the head tags and show the information in the body tags.

HEAD

 

BODY

up
Format/Nesting

Format/Nesting

You now have your opening tags – <html></html> - which tell the browser to make a web page. You need to tell the browser to look that your page has a head section and a body section.

We call this nesting, putting one set of tags inside of the other. Much like the russian dolls that fit one iside the other.

<html>
    <head></head>
    <body></body>
</html>

Did you see how the head and body tags were indented, moved to the right by 4 spaces? This is called formatting. By indenting the nested tags by 4 spaces it makes it easier to read your code. It is especially important, because if you make a mistake, it will be easy to find if the code is formatted and not in a jumble like this:

<html><head>
</head><body></body>
</html>

Rule THREE: Always format your code.

up
Head Tags
         part 1 - title
        part 2 - meta tags
        part 3 - scripts

Tags that go inside the Head

The head section of the code holds all the of the stuff that you don’t see in a web page. This is the code that tells search engines the title of your page (<title></title>), what your page is about and what specific words you want people to search for your page with, what languages your page is in (<meta></meta>). It can also tell your page how to perform applications such as processing forms, telling the date (<script></script>) and using CSS – cascading style sheets – to tell the page how you want it look (<style></style>).

Click on the different parts of this to learn how each element works.

Title = <title></title>

Write the title of your page in between the title tags. Like this:

<title>My First Site</title>

The browser looks at the title and writes the title of your page at the very top of the browser.



So now the code should look like this:
<html>
    <head>
        <title>My First Site</title>
    </head>
    <body></body>
</html>

up

META TAGS

Meta tags are special tags that speak to search engines (Yahoo/ Ask Jeeves / Google). There are many different types of meta tag. Here are the two most important that you should include into your page:
<META NAME="keywords" CONTENT="">

This type of meta tag tells the search engine which exact keywords describe what your web page is about. You should aim to have about 25 keywords that you think users will search for. You should never use words as keywords that AREN’T what your page is about.

This is the keyword meta tag for New Image College page:

<meta name="keywords" content="Media, entertainment, college, courses, school, education, degree programs, training, jobs, careers, design school, web design, animation, post production, graphic production, web production, producing, directing, editing, Flash, Photoshop, Corel Draw, Illustrator, HTML, computer graphics, Adobe training, computer animation, modeling, interactive design, producer, director, creative arts, media arts ">

<meta name="description" CONTENT="">
The description meta tag is the text description that search engines show with the link to your web page.

Example of New Image college description meta tag:
<meta name="description" content="Our Toronto Graphic Design School offers training in graphic design, graphic design courses online, graphic design degree, desktop publishing courses, prepress training, digital design, and web design. Department of Corporate Training providing the top subject matter experts for graphic design and web design corporate training services. Computer school for kids featuring game creation courses, 2D and 3D animation courses, web-design and graphic-design courses. Our summer program is sure to have a course suitable for your child. All weeklong, day and overnight summer computer camps will help your child to learn the power of technology">

Other types of Meta Tag:

<meta http-equiv="refresh" content="30; URL=http://www.newimagecollege.ca/">
This tells the browser to refresh the content after 30 seconds. You can also use this to send a user to another web page or website after any set time.

<META NAME="author" CONTENT= "Your Name">
This tells search engines who wrote the document.

<META NAME="copyright" CONTENT="Copyright © 2008">
This tells search engines the page is copyrighted.

<META NAME="expires" CONTENT="26 April 2008">
This automatically expires the document in the search engine's database. Useful for pages that have a limited life, like a news article.

<META NAME="DISTRIBUTION" CONTENT="global">
The page will be published globally – all round the world to every type of media and search engine.

<META NAME="REVISIT-AFTER" CONTENT="15 days">
Have the Search Engine revisit the site to possibly re-submit it. This is important if your site’s content changes a lot, like an online magazine.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
This tells search engines and the browser what language the page is written in.

up

Script Tags

This set of tags is called a JavaScript Block. What the tags do is to tell the browser that a set of insturctions must be loaded into the the browser BEFORE the page contents, because someting in the contents/body will need the instructions to be able to work.

ex. If the web page has a DATE function:

// -- days = new Array(7) days[1] = "Sunday"; days[2] = "Monday"; days[3] = "Tuesday"; days[4] = "Wednesday"; days[5] = "Thursday"; days[6] = "Friday"; days[7] = "Saturday"; months = new Array(12) months[1] = "January"; months[2] = "February"; months[3] = "March"; months[4] = "April"; months[5] = "May"; months[6] = "June"; months[7] = "July"; months[8] = "August"; months[9] = "September"; months[10] = "October"; months[11] = "November"; months[12] = "December"; today = new Date(); day = days[today.getDay() + 1] month = months[today.getMonth() + 1] date = today.getDate() year=today.getYear(); if (year < 2000) year = year + 1900; document.write (" "+ day +", " + month + " " + date + ", " + year + "") // -- Thursday, April 24, 2008
These instructions that tell the web browser to get the date from the main server.
<script="JavaScript">
<!--
JavaScript code goes here
//-->
</script>

The first line <script="JavaScript"> tells the browser to expect and load a set of JavaScript instructions.
<!-- and //--> tell olderversions of browsers to ignore the Javascript block and NOT to print the code as part of the body text.
The last line </script> tells the browser that the set of instructions have finished.

It can be easier to put the JavaScript instructions in a seperate file and link to it. This is especially useful if you reuse the same script/instructions on several pages. That way if you need to change the script/instructions you only have to edit the ONE file and not every page you have put the script into.

<script language="JavaScript" src="file.js"></script>
This line both tells the browser that it both needs to load a block of JavaScript instructions, but also src="file.js" give the browser the relative address of the file - where to look and find the file.

Style set of tags informs the browser to expect and load CSS - Cascading Style Sheet information.

<style type="text/css">
<!--
Cascading Style definitions go here
-->
</style>

The first line <style type="text/css"> informs the browser that the script block is CSS.
<!-- and //--> tell olderversions of browsers to ignore the CSS block and NOT to print the code as part of the body text.
The last line </style> tells the browser that the set of definitions have finished.

Again, it can be easier to put the CSS definitions into a seperate file and link to it. This is especially useful if you reuse the same definitions throught the site. That way if you need to change the definitions you only have to edit the ONE file and not every page you have put the script into.

<link rel="StyleSheet" href="" type="text/css">
This line both tells the browser that it both needs to load a block of CSS definitions, and also href="" give the browser the relative address of the file - where to look and find the file.

up
Body Tags
    part 1 - paragraph and align
    part 2 - text headers
    part 3 - breaks & rules

Tags that go inside the Body

The body of the document holds everything someone sees and interacts with on a web page.

Tags in this section deal mainly with text (words) and images - the content.

How the tags control the content is called the "look and feel"

This section concentrates on introducing text and how you can work with text to make your content dynamic and exciting.

Paragraphs = <p></p>

Paragraph tag. If you want to write sentences, and paragraphs, called text: you put the words inside of a <p></p> tag.

Like this:
<p>Hi! This is My First Web Site.</p>



Now the code should look like this:
<html>
    <head>
        <title>My First Web Site</title>
        <meta name="keywords" content="graphic design, web design">
        <meta name="description" content="This is my first web site.">
    </head>
    <body>
        <p>This is my first web site.</p>
    </body>
</html>

There a lots of different ways you can make the text inside of a paragraph look. You can do this using the alignment. Alignment means to line something up with either the left or right side of the page.

There are three main types of alignment; left, right and center. There is an alignment called justify, which is not supported by old browsers. It is very important to remember to spell center "er" and not "re" how we spell it in Canada. This is because HTML was invented in America and that’s how Americans spell center.



The command for telling a tag where to set the text alignment looks like this:
align="left"
You put the style command inside of the tag you want to it to control.

The browser views " " and ' ' in the same way that it veiws < and >. The quotes tell the browser toexpect a condition that will alter or enhance the tag. As before, you have to have matching pairs.

This is wrong:

"command'
'command"
command

   This is right:

"command"
'command'

The code should look like this:

<html>
    <head>
        <title>My First Web Site</title>
        <meta name="keywords" content="graphic design, web design">
        <meta name="description" content="This is my first web site.">
    </head>
    <body>
        <p>This is my first web site.</p>
        <p align="left">This text alignet to the left</p>
        <p align="right">This text alignet to the center</p>
        <p align="center">This one alignet to the right</p>
    </body>
</html>

Can you see how the code looks different from the example? See how the code is nested? It looks different from the way the page looks in the browser. You don’t have to use spaces to position the text in the <p></p> tags. That’s because it is the commands in the tags tells the browser where to line up the text.

up

Header = <hnumber></hnumber>

Header tag. If you want to large text/header, like the titles in a document, you put the words inside of a <hnumber></hnumber> tag.

Like this:
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

The numbers stand for different sizes of header text, they aslo vary in thickness and look.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Now the code should look like this:
<html>
    <head>
        <title>My First Web Site</title>
        <meta name="keywords" content="graphic design, web design">
        <meta name="description" content="This is my first web site.">
    </head>
          <body>
        <h1 align="center">WELCOME!</h1>
        <p>This is my first web site.</p>
        <p align="left">This text alignet to the left</p>
        <p align="right">This text alignet to the center</p>
        <p align="center">This one alignet to the right</p>
     </body>
  </html>

The same rules apply to headers as with paragraphs, you can use alignment in the same way.

Breaks & Rules

These tags control the look of paragraphs and the spaces between lines of text.

Sometimes you will want to have very little space between lines of text, separate sections of a page or indent an entire block of text.

Break = <br>
A <br> can be used inside of a paragraph tag or on it's own. It is much more reliable as you can control the alignment of a <p></p> tag.

Paragraph tags place a full empty line between one section of text and the next. The <br> tag will "break" the line and force the text after the break onto the next line.
code:
<p>Nowadays there is nothing more popular than computers among kids and teenagers.<br>
Parents often get worried when all their kids want to do is sit in front of the monitor all days and night... </p>



Rule = <hr>
You may need to break your page into visible sections. You use the <hr> to make lines across the width of the page or table.

code:
<hr>
<p>Digital Art and Computer Graphics (ages 5 to 8)</p>
<hr>
<p>Comic Creation Course (ages 7 to 10) </p>
up

Copyright © New Image College
1998 - 2008
*-