INTRODUCTION TO COMPUTER PROGRAMMING

FIRST STEP HTML AIT101

This is a mini course of study.

We provide access to this for free, so that you can

  • See how our courses operate
  • See whether studying html is something you would like doing

If you want to get more serious about HTML, consider our comprehensive 100 hour course. Click here for details.

 


STUDY GUIDE

Course Aim
To understand what is involved in basic computer programming, and obtain some insight into your capacity to understand and develop an ability to program.

Programming is something that some people take to and learn with great ease, while others encounter great difficulty.

This course gives you the opportunity to find out which of these two types best describes you.

After completing this one lesson course, you should either have a foundation for further study, or reading, or you will have determined that programming is more difficult for you than what you had first thought.

Course Content
Topics covered in this introductory lesson include:
• What is an HTML page
• Creating an HTML page
• View a Page
• First page explained
• Understanding Tags
• More detailed pages
• Adding Colour




DISCLAIMER
This institution accepts no responsibility for the attitudes or actions of our graduates. The education you receive through this course in no way guarantees your actions in the future will always be as they should be. Your actions in your profession, or in any other situation where you apply what you have learnt here, will be affected by many things other than just the learning from this course. The success or failure of a graduate is dependent upon not only what they learn in this course, but also, what they learn in studies elsewhere (formal and informal), as well as personal qualities and attitudes.





WHAT IS AN HTML PAGE?
HTML stands for Hypertext Markup Language. An HTML page is a text file that contains special characters called markup tags. The tags describe how the page should be displayed when you view it via a Browser such as Netscape Navigator or Internet Explorer.


CREATE AN HTML PAGE

 

 

You don’t need to be connected to the Internet to create or view HTML pages. You don’t even need complex software. All that you require to create HTML pages is a simple text editor such as Notepad if you are using a windows based computer or Simpletext if you are using an Apple computer.

Start Notepad (or Simpletext) and type the following:


<html>

<head>

      <title>My first web page</title>

</head>

<body>

    Hello World!

</body>

</html>



We will be creating several web pages during this course so create a directory on your computer called www to store all our pages

e.g. you might like to create a directory on your machine called c:\my documents\www\

Save the file as hello.htm into the www directory (you will have to choose ‘All files’ from the save as file type drop down list)

 

View your HTML Page

Start your Internet Browser.  Then open the HTML page we just created:

e.g. Internet Explorer 6:

Choose File….Open . A small dialog window will open, click Browse on the small dialog window, this will open a larger dialog window, now go to the /www directory select hello.htm then click Open on the large dialog window to close it now click Ok on the small dialog

e.g. Netscape 7:

Choose File … Open File Find the hello.htm file select it the click Open

Our First Page Explained

As mentioned earlier an HTML page contains Tags that describe how a page should be displayed in the browser. Even a simple page such as our Hello World page has many different tags:

<html> ß All html pages have this tag it simply says that the following is an html page

<head> ß An HTML page has two parts the Head and the Body this tag says that this is the                             start of the Head section of the page

<title>My first web page</title> ß The page title. This appears in the                                                                                                                                                                                                                                     Browsers menu bar

</head> ß The end of the Head section

<body>  ß The start of the body section

Hello World! ß The content of the page

</body>  ß The end of the body section

</html>  ß The end of the HTML document


The Structure of Tags

Tags are not case sensitive <em> means the same as <EM>. However, lowercase is the standard that has been adopted for future versions of HTML (called XHTML). Some Tags have attributes

For example  <table border=”1”>.

Here border=”1” is the attribute of the <table> tag and in this case the browser will create a table with a border 1 pixel wide. 

Tags can have one or more attributes. Here are some other examples of tags and attributes:

 

<p align=”left>

Align the text in this paragraph to the left.

<td valign=”top” width=”50%”>

Make a table cell 50 percent as wide as the table wide and align its contents to the top of the cell.

<font color=”#999999”>

Make the following text this colour.

 

As you progress you will explore these and more.


A More Detailed Web Page Example

Open your text editor and type the following HTML:

<html>

<head>

<title>My second web page</title>

</head>

<body>

<h1>This is the main heading</h1>

<h2>A Subheading</h2>

<hr>

Here is some content.<em>This text is emphasised</em>

and this is <strong>bold</strong>.

</body>

</html>

Save the file and open it in a web browser.

If you have used Microsoft word you will recognise the h1 and h2 tags these describe headings just as they do in Word.


Adding some Colour

Open Notepad and type the following HTML, save the file then open it in a Browser:

<html>

<head>

<title>My third web page</title>

</head>

<body bgcolor="#CCCCCC">

<h1>This is the main heading</h1>

<h2>A Subheading</h2>

<hr>

Here is some content.<em>This text is emphasised</em> and this is <strong>bold</strong>.

<table bgcolor="#FFCC00" border="1">

   <tr>

        <td>a coloured table with text</td>

   </tr>

</table>

</body>

</html>


You can also add colour by placing a colour attribute directly into the table cell

 

<table width="200" border="1">

  <tr>

    <td>ABC</td>

    <td>123</td>

  </tr>

  <tr>

    <td>DEF</td>

    <td bgcolor="#CCCC00">456</td>

  </tr>

</table>

<v:imagedata o:title="td_color" src="file:///C:\DOCUME~1\User\LOCALS~1\Temp\msohtml1\01\clip_image005.jpg">

 

Set Task

1. Conduct a search on the internet for html tags

Note any new tags you find, and their meanings.

Note the web site addresses of any particularly useful sites you stumble across

2. Create a web page.

The title of the page should be

Writing HTML Lesson One

and should have a large heading that says

Writing HTML Lesson One

and a smaller heading that says

Set Task One.

Experiment with some of the tags you find in the Appendix notes add some content text and include two different colours somewhere on the page.


Assignment

1. Submit the page you created as your set task

2. List ten html tags and explain what they do.

3. Give three examples of how you can align a word in the centre of an HTML page

4. Take this advantage to ask about anything you have not fully understood which you have encountered in this course, either in the notes, your creation of a simple web page, or in the internet searches you undertook.