Page |1

HTML

Page |2

Table of Contents Website Quality......................................................................................................................3 Notepad and Basic HTML Tags...............................................................................................4 Lists........................................................................................................................................4 Links.......................................................................................................................................4 Images....................................................................................................................................4 Characters and Formatting Text.............................................................................................4 Music and Movement..............................................................................................................4 Tables.....................................................................................................................................4 References..............................................................................................................................4 References

Page |3

Website Quality There are millions of websites on the Internet and they vary greatly in quality. Some are useful, some are not. Some are well designed, some are not. There are many ways in which you can evaluate websites. The following are a few of the qualities you should look at: Suitability: Is the information presented in a suitable format? (Examples: Are there pages of writing when a photo and a paragraph of text could explain. Are there pages of numbers when a graph could be used.) Reliability: Is the information reliable? (Examples: Does it state who the author is? Is there any information about the author?) Accuracy: Is the information accurate? (Example: A website has numerous spelling mistakes.) Accessibility: Is the information easy to understand? (Example: A website that explains Science to children uses long words and complicated language.) Timeliness: Is the information up to date? (Example: A website about the Australian Tennis Open is updated in December each year.) Bias: Does the website tell both sides of the story? (Example: A website about AFL teams only mentions Victorian teams.) Navigation: Is it easy to find information on the website? (Example: Menus on a website use words that have no relevance to the site.) Look at the websites below and choose 3 to evaluate. You should use qualities mentioned above. Explain and justify your answers. Annotate your work with screenshots (use PrtScr to ‘take a picture’ of what is on the desktop and then edit in Paint or paint.NET). Each evaluation should be ½ to ¾ page in length. http://zapatopi.net/afdb http://users.hunterlink.net.au/~mbbjsj/index.htm http://www.fulkerson.org/ancestors/buyanancestor.html http://www.cuh2a.com/ http://www.umich.edu/~engtt516/index2.html http://city-mankato.us/ http://www.dreamweaverstudios.com/moonbeam/moon.htm http://www.ownyourc.com/ http://www.5safepoints.com/ http://www.havenworks.com/

Notepad and Basic HTML Tags HTML is the language used to write web pages, it stands for HyperText Markup Language. HTML is interpreted by your browser, e.g. Internet Explorer, Firefox, Opera, Safari. Below are the basic HTML tags. Tags are the commands that the browser will use to interpret how the web page should look. Tags are always surrounded by < >. is an opening tag and is a closing tag.

tells the browser where the webpage begins and ends. tells the browser where the header begins and ends. tells the browser where the title begins and ends. The title is displayed at the top of the screen

tells the browser where the body of the web page begins and ends. The body is displayed in the browser window.

To create a web page you will use Notepad, a text editor, by going to: Start  All Programs  Accessories  Notepad Enter the following:

Save your web page using Save As and make sure you change the Save as type to All Files Name the file basic.html Web pages need to be saved using lowercase and no spaces. Instead of a space use an _. Open Internet Explorer Choose: File  Open Use Browse to navigate to basic.html Click OK. You should see an empty page.

Page |5

Now let’s add something to the webpage. Give your page the title: My first Web page and add Hello World between the body tags.

Hello World! Use Save As and name the file page1.html Open Internet Explorer and have a look. This time we will make Hello World! A headline by using a heading tag. Heading tags begin at

(largest) and go through to

(smallest). We are also going to add some more text. Some of it we will make bold by using the tag and we are going to see what the heading tags do to the text.

Hello World!

Welcome to my first web page. This text is bold.

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Save your page, keep the name page1.html Change to Internet Explorer Click Refresh When using HTML the text will word wrap but it will not automatically start a new line if you use enter, you need to use a tag to do this. The break tag is a beginning and an ending tag combined into one tag.
You can also create paragraphs by using the paragraph tag.

Tags also have attributes, this allows us to have more control over the way things look. For example we used the

tag earlier but we can use the align attribute to tell the browser where to put the heading. It would look like this:

,

,

. You may notice that centre is spelled incorrectly. HTML uses international spelling, which is generally American. The other important parts are the quotation marks, these are essential. We can also change the colour of the background by using the bgcolor 9background colour) attribute of the tag. It could look like this: . Colours are nominated using RGB (Red, Green, Blue) values with a # at the beginning. #ff0000 is red, #00ff00 is green and #0000ff is blue. There are many variations and they can be found at: http://www.w3schools.com/html/html_colors.asp or you can go to: pickup/webster/Year 9 Computers/html/html_colours.html Let’s put it together

Hello World!

Welcome to my first web page. This text is bold.
I have used the line break tag to create a new line.

This is a paragraph using the p tag.

This is another paragraph.

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Your task is to create a webpage named task1.html. (Open the file named basic.html and use Save As.) When creating your webpage use the following tags:
,

and 2 heading tags. You should also use the following attributes:

(use the heading tag of your choice)

Page |7

Lists There are 3 different types of lists. Ordered Lists

like the one below are numbered: 1. Horse 2. Cow 3. Pig Open your basic.html file in Notepad and Save As lists.html, add the following:

The farmer had the following animals:

1. Horse
2. Cow
3. Pig

means list item. You don’t need to put in the numbers, the browser automatically puts in numbers. You can however change the type of numbers used by adding type

type=”1”> type=”1”> type=”1”> type=”1”> type=”1”>

Standard numbering 1,2,3 Lowercase letters a,b,c Uppercase letters A,B,C Small Roman Numerals I,ii,iii Large Roman Numerals I,II,III

Ordered lists are useful for instructions for example, how to kick a football, or the method used to bake a cake. Go back to Notepad and add the following:

The farmer had the following animals:


1. Horse
2. Cow
3. Pig

Things I need to do tomorrow:
1. Get out of bed
2. Have a shower
3. Eat breakfast
4. Go to work

But I also need to:
1. Return DVDs
2. Walk the dog
3. Go to the supermarket

That reminds me, I also have to..

1. Come home from work first
2. Buy petrol
Unordered lists
are a bulleted list. With an unordered list you can change the look of the bullet by using
.


Standard bullet
A hollow circle
A solid square If you don’t specify what type you want disc is the default. Go back to Notepad and lists.html and add the following to the bottom of your previous list:




Alltime Essendon Greats

• John Coleman
• Bill Hutchinson
• James Herd
• Dick Reynolds


Page |9

The third type of list is a Definition List. This is useful if you need to give a definition of terms use, like a glossary or it can be used to indent paragraphs. It uses the following tags:


Definition List beginning and end
Term
Definition Go back to Notepad and lists.html and add the following:



Computer Terms

CPU

Central Processing Unit

ROM

Read Only Memory

RAM

Random Access Memory

Save your file, change to Windows Explorer and Refresh the page. Your task is to create a webpage named task2.html On this page you should use 2 different types of lists.

Links The anchor tag is used to create links. There are two types of links, external and internal. External links can be to a webpage within the website or to a web page that is part of another website. Internal is a link on the same page. is used to specify the address of the link. href stands for Hypertext Reference. Open basic.html using Notepad and Save As, name it links.html and enter the following:

If I need any help with html tags there are several websites I can look at:
1. w3Schools
2. HTML Dog
3. HTML Tags
Save your changes, look at your file in Internet Explorer. The other type of link you can use is an internal link. These can be used on long pages to jump from the top to a chosen section or to create an index. The anchor tag is used to tell the browser where your link is but instead of a webpage address you type in href =”#name” using the name you have given that part of the page. To name a section you again use the anchor tag , the only difference being the attribute used. So, let’s put this into action, add the following to the file named links.html


I can also look at the following: anchor
attributes
basic
bold
headings
horizontal rule
lists
white space



---

The a tag is used when creating links. It can link to another part of the current page or to an external page. The href attribute is used to tell the browser where the link page is located. The name attribute is used to tell the browser where a link is in a page.




---

Attributes are used to five the browser more information about the tag you are using, they can be used to align an object or to change the colour of an object, they can also be used as with lists to specify

P a g e | 11

the type you want displayed.




---

The Basic Tags are the set of tags that are used on every web page. They are the html tags, the head tags, the title tags and the body tags.




---

The bold tag is quite simply used to make text bold. It does not enlarge the text as the heading tags do it just makes it bold.




---

There are six heading tags and they range in size. Your browser will automatically assign how large and how bold the font will be depending on which heading tag you have used.




---

You can create a horizontal line on the page by using the horizontal rule tag. It has attributes for position, size and width. Size and width are set using pixels or percentage.




---

There are three types of lists: Ordered Lists, Unordered Lists and Definition Lists. They each have their own use. They also have attributes that you can use to tell the browser what they will look like.




---

HTML doesn’t automatically go to a new line when you pres Enter. You need to force it to by using either the paragraph tag or the line break tag. In fact you might find that you use the two tags in combination to create the right amount of white space on a page.








Your task is to create a web page named task3.html On this page you should use the two different types of links.

Images We need some pictures. The tag is used to add pictures to a web page. It doesn’t have a closing tag. It does have a number of attributes that we need to use. The first is this tells the browser where to look for your image, the source of the image. The second is this tells your browser what text to place on the screen when the mouse hovers over the image. It is also used by screen readers. It is short for alternative. Before any images are added a folder called images needs to be created to store all pictures used on the website. The src for any image will then be “images/imagename.ext”. Images is the folder where the image is located, imagename.ext is the name and type of image (gif, jpg, jpeg, png etc). When it comes to naming your images, use lowercase letters and no spaces, instead of a space use an _. Copy the following images to your drive and place them in your images folder: apple.jpeg, orange.jpeg, pear.jpeg, banana.jpeg and peach.jpeg. Create a page named images.html and add the following html code:



I found these images on the Internet, so I can’t use them on a Website without referencing. Images copied from the Internet are bound by Copyright Laws.




Fruits available for sale

• Apple
• Orange
• Pear
• Banana
• Peach
Some websites have images that take an etermity to load. A better alternative is to use thumbnails, then if the user chooses they can look at the full size image. Copy cat_and_computer.jpg to your images folder. Open paint.NET or The Gimp Open cat_and_computer.jpg Choose image then resize from the menu Enter either the new width or height, allow the computer to automatically adjust the image ratio Save image as cat_and_computer_thumb.jpg To add the thumbnail to a web page as a link for the image you would use the following:



P a g e | 13

Adding border=”0” to the image tag will mean you won’t see a blue border around the image. If you like the blue border, don’t use it. Your task is to create a webpage named task4.html You need to either find some images or make your own images to add to your web page. You need to use thumbnails and images.

Characters and Formatting Text You can’t just use special characters in HTML. For example the page you created that used internal links did not use any tags. To see why try the following:



the anchor tag is used when you want to create a hyperlink. I have put in 5 spaces between the last sentence and this sentence.

Save the file as characters.html Open Internet Explorer and have a look. You might have noticed that neither the anchor tags or the 5 spaces appeared on the screen. We need to use the special symbols. You will find these symbols at http://www.naturalinnovations.com/wa/doc-charset.html or there is a copy in pickup/Webster/Year 9 Computers/html/special_characters_html. The symbol for < is < or < > is > or > / is / and a space is @nbsp; or   Now let’s try again.



the anchor tag <a> </a> is used when you want to create a hyperlink.         I have put in 5 spaces between the last sentence and this sentence.

There are also other ways to change the look of the text on a webpage. You have already seen the bold tag, there is also:

bold text big text <em> Emphasized text Italic text <small> small text <strong> Strong text <sup> Superscripted text <sub> Subscripted text Inserted text <del> Deleted text The other way to alter the look of text is to change the colour. The best way to do this is with the style tag. The <style> tag goes after the title tag up in the head of the document. In using the style tag you need to decide what font is going to be changed. We are going to make all Italic text blue and all bold text red.

<style> i {color: #0000ff;}

P a g e | 15

b {color: #ff0000;}

the anchor tag <a> </a> is used when you want to create a hyperlink.         I have put in 5 spaces between the last sentence and this sentence.




You will have noticed that curly brackets { } have been used between the style tags. The tag that is being styled appears before the curly brackets { } and inside the curly brackets { } is the style to be applied.

Your task is to create a web page named task5.html You need to use some Special Characters, change the look of some of the text and also use the style tag to change the colour of some of the text.

Music and Movement Adding music to your web page is as easy as using the <embed> tag. If you intend to have music on a web page it is a good idea to first create a folder named music. Save all your music files to this folder.


To hear a Chad Kroeger song click below.
<embed src=”music/hero.mp3” autostart=”false”> If autostart is not mentioned the music will play when the page loads. Using autostart gives control to the user, it also means you can have a range of music to choose from. Now lets add some movement. The <marquee> is something that should be used sparingly on a website.

<style> p {color: #ff0000;}
To hear a Chad Kroeger song click below.
<embed src=”music/hero.mp3” autostart=”false”>
<marquee width=”100%” bgcolor=”#ffffff”>

Hi Chad

There are other attributes for the marquee tag: behaviour – of the text (scroll, slide or alternate) bgcolor – colour of the marquee background direction – of the scroll or slide (left or right) loop – how many times does it go across the screen (1,2,3 up to infinite) scrollamount – how fast it scrolls (a number in pixels) height – of the marquee (% of the screen) width – of the marquee (% of the screen) Your task is to create a web page named task6.html This is your chance to go crazy; you need to add sound and movement to a webpage.

P a g e | 17

Tables Tables are useful not for displaying information but also to assist with the layout of text or a page. The tags used in tables are:

beginning and end of a table table row table data (cell) table header (bold text) Let’s put it into action. Open the file named basic.html and use save as to name it tables. Html. This table will have 2 columns and 5 rows. Add the following:



Fruit	Price
Apples	$2.50
Oranges	$4.00
Bananas	$3.65
Mandarines	$1.99

Tables also have attributes to give you more control over how it looks: align – alignment of table on page (left, right,center) bgcolor – background colour border – width of border in pixels cellspacing – space between cells (% or pixels) cellpadding – space between text and cell wall (% or pixels) Add a border to the table with a width of 2 pixels and put padding around the text in cells of 15 pixels:



Fruit	Price
Apples	$2.50
Oranges	$4.00
Bananas	$3.65
Mandarines	$1.99

Now colour the rows differently:



Fruit	Price
Apples	$2.50
Oranges	$4.00
Bananas	$3.65
Mandarines	$1.99

The other attributes that can be used to change the look of tables are: rowspan and colspan. They are used to merge cells. Fruit

Vegetables

Apples

Bananas

Oranges

Mandarines

Potatoes

Carrots

Peas

Corn

Add this second table to tables.html




Fruit	Apples	Bananas
oranges	Mandarines
Vegetables	Potatoes	Carrots
Peas	Corn

Your task is to create a web page named task7.html You need to add a table and then have different versions of the same table. Begin with a plain table, use attributes to change the look of the table.

P a g e | 19

References HTML Tutorials and information on tags can be found at these sites: http://www.w3schools.com/default.asp http://www.lissexplains.com/index.shtml http://www.htmldog.com/reference/htmltags/ http://www.html-tags.info/ Images: html – http://www.onlinemarketingsydney.com.au/2007/05/how-does-the-history-of-the-internetaffect-your-internet-marketing/ tick – http://www.thecleanfactory.com.au/epages/thecleanfactory.sf/en_AU/? ObjectPath=/Shops/tcf/Categories/Competition amazing html – http://blogs.zdnet.com/open-source/?p=1925 lists – http://www.quake.utah.edu/EQCENTER/LISTINGS/OTHER/yellowregion.htm images – http://www.techtrainteam.com/services/olt/internet/webpage-4.html characters – http://icone.goldenweb.it/index_file/1/en/d2/sistemi_operativi/c/whistler_Xp/default.html music – http://en.wikipedia.org/wiki/Portal:Arts tables – http://www.tutorialized.com/tutorials/HTML/Tables/1 tasks – http://futureflight.arc.nasa.gov/design.html