Institute for Satellite and Software ApplicationsIn the example above, the tags were wrapped around...

Visual Programming 1 Section 2

Institute for Satellite and Software Applications

HTML Tutorial Phase I Training Manual Compiled by the Website Development Team Institute for Satellite & Software Applications


ISSA 1000 High Rising Road, Houwteq, Grabouw, 7160 Tel. (021) 859 7300 Fax. (021) 859 7324 Web. http://www.issa.org.za

2

Table of Contents

Section Page

1. Objectives …………………………………………………… 3

2. Programs to start with HTML ……………………………….. 4

3. Getting started with HTML ………………………………….. 4

4. Four Basic HTML Tags ……………………………………... 5

5. Creating your first web page ………………………………… 6

6. Headings ……………………………………………………... 10

7. Paragraphs and Line breaks …………………………………. 11

8. Comments in HTML ………………………………………… 12

9. Text Formatting ……………………………………………… 13

10. Fonts …………………………………………………………. 15

11. Images ……………………………………………………….. 16

12. Background Images and background color ………………….. 17

13. Lists ………………………………………………………….. 18

14. Hyperlinks …………………………………………………… 21

15. Tables ……………………………………………………… 23

16. Design Templates …………………………………………… 27



3

1. Objectives

This skills transfer is aimed at beginners, or people completely new to HTML. The aim is to deliver a concise course from which to derive a basic grounding in HTML.

The following is some of the aspects that will be covered:

• What is HTML? • Formatting our text • Changing the color and appearance of text • Including comments in our code • Changing the background of the page • Using images • Using links • Using lists • Using tables

What is HTML?

HTML is a computer language used to allow website creation. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create

� HTML stands for Hyper Text Markup Language � An HTML file is a text file containing small mark-up tags � The mark-up tags tell the Web browser how to display the page � An HTML file must have an htm or html file extension � An HTML file can be created using a simple text editor

How does it work?

HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer or Mozilla Firefox



4

2. Programs required to start with HTML

1. You will need a text editor of your choice. If you’re using Windows it’ll be Notepad or WordPad

How to Open Notepad: Click on Start � Programs � Accessories � Notepad

2. You will need a web browser. A browser is the program that makes it possible to browse and open websites i.e Internet Explorer or Mozilla Firefox. It is not important which browser you use. The most common is Microsoft Internet Explorer. But there are others such as Opera and Mozilla Firefox and they can all be used

or



5

3. Getting started

HTML code consists of "tags" that look like this:

<html>

All of the tags use the angle brackets "<" and ">" ("less than" and "greater than") and have some name or letter inside of the brackets. Most HTML tags also have a "closing tag" </>

You can use either upper case or lower case in HTML. What is HTML Tags?

The tags are what separate normal text from HTML code. You might know them as the words between the <triangle-brackets>. They allow things like images and tables to be inserted on your page. Different tags will perform different functions. The tags themselves don’t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:

<b>These words will be bold</b>, and these will not.

In the example above, the <b> tags were wrapped around some text, and their effect will be that the contained text will be bolded when viewed through a web browser.

HTML Tags

� HTML tags are used to mark-up HTML elements � HTML tags are surrounded by the two characters < and > � The surrounding characters are called angle brackets � HTML tags normally come in pairs like <b> and </b> � The first tag in a pair is the start tag, the second tag is the end tag � The text between the start and end tags is the element content � HTML tags are not case sensitive, <b> means the same as <B>

4. The Four BASIC HTML Tags Explained

<html> this tag identifies a html document, all web pages (html documents are web pages) must have this tag first (or almost first).

<head> this signifies the start of a section of the html document called the "head". This section doesn't show up in the browser but can contain info that the browser can use. In our example the head section will contain the title only. Header information is not displayed in the browser window.

<title> this is the name of the web page. It doesn't show up in the page itself but in the title bar of the window that holds the web page,

<body> this is the beginning of the section that shows up in the web page. Inside this section we will write the web page.



6

5. Creating your First Web page . Open Notepad (or your text editor).You should see a completely blank page. Type in the text below. Example HTML code: Type in the following text: <html> <head> <title>Title of page</title> </head> <body> <h1>This is my first homepage.</h1> <b>This text is bold</b> </body> </html>



7

Saving the file Once you have finished, go to the "File" menu and click on "Save As" . This will prompt you to create a name for your file. In the box, type in mypage.html . At the bottom of the prompt you should see a space that says "Save as Type". The default is .txt, so you will need to change it. Click on the down arrow on the right side of the input box. You should be able to highlight All Files(*.*) . Click on this to make the change. You should see something similar to the picture below:

Save the file as "mypage.html". Remember to select the All Files option

Open your file in a Browser Now you will want to use your web browser to view the file you just created. 1. Start your Internet browser 2. Go to the "File" menu in your web browser. 3. Look for an option that says "Open", "Open Page", "Open File", or a similar

phrase. 4. Click this option, a dialog box will appear and you will be able to browse for your file

and open it from there 5. Locate the HTML file you just created - "mypage.html" - select it and click "Open". 6. Click OK, and the browser will display the page.



8

Alternatively, Using the file explorer, go to the directory were the mypage.html file was saved and double click on that file. (Its much easier this way)

This is how your page will be displayed in your browser

.



9

Example Explained The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.

HTML element:

<b>This text is bold</b>

The HTML element starts with a start tag: <b> The content of the HTML element is: This text is bold The HTML element ends with an end tag: </b>

The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

��

��

��

� ��

� � ��!��"�� # ��

��

10

Your name should appear on the title bar of the page

Basic HTML Tags Tag Description <html> Defines an HTML document <body> Defines the document's body <h1> to <h6> Defines header 1 to header 6 <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a horizontal rule <!--> Defines a comment

6. Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. HTML automatically adds an extra blank line before and after a heading.

<h1>This is a heading1</h1> <h2>This is a heading2</h2> <h3>This is a heading3</h3> <h4>This is a heading4</h4> <h5>This is a heading5</h5> <h6>This is a heading6</h6>

�

�

�

�

�



11

�

$��%&��

��"�� # �� ' ��

�� !��"�� !��

��!��%�� ( ��

��!!��)�

This is what your file should look like when opening it in a Browser

7. Paragraphs & Line Breaks . Paragraphs are defined with the <p> tag. <p>This is a paragraph</p> <p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

12

The Line Break (<br>) tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. <p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

$��*&��

��%�� + �� ,�-,.�-�

��

� � ��!��*��

8. Comments in HTML The comment tag is used to insert a comment in the HTML source code. The browser will ignore a comment. You can use comments to explain your code, which can help you when you edit the source code at a later date. 

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Example

<!- -My comments will be inserted here-->



13

This example demonstrates how to write an address in an HTML document. <html> <body>

PO Box 88<br> Highrising<br> Grabouw<br> 7160

</body> </html>

$��/&��

��# �� !�� /��

�� !�� !��

0��!!�� ,�-��,�-�� )�

9. Text Formatting Tags

Tag Description <b> Defines bold text <big> Defines big text <em> Defines emphasized text / italics <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <strike> Strike through <u> underline



14

Special Characters: Result Description Entity Name Entity Number non-breaking space < less than < < > greater than > > & ampersand & & " quotation mark " " ' apostrophe ' (does not work in IE) '

Other Commonly used Special Characters :

Result Description Entity Name Entity Number ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ © copyright © © ® registered trademark ® ® × multiplication × × ÷ division &divide

$��1&��

�2 ��!��/�� "��*�� %��

��/�� !��1��

Tag Attributes Tags can have attributes. Attributes provide additional information to an HTML element. The following tag defines an HTML font: <font>. With an added size attribute, you can tell the browser that the text should have a specified size: <font size="2"> Attributes always come in name/value pairs like this: name="value". Attributes are always specified in the start tag of an HTML element. Attributes and attribute values are also case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values.



15

10. Fonts 10.1 Size attribute

Font sizes range from 1 the smallest to 7 the largest. The default font size is 3.

To change the font size

<font size = “6”> This is font size six </font>

10.2 Color attribute . The color attribute for the <font> tag sets the colour of the enclosed text. The value for the

font colour can be expressed in 2 ways.

1) RGB components with the colour value expressed as a 6 digit hexadecimal number

ranging from #000000 being black to #FFFFFF which is white. 2 digits for each colour.

2) Alternatively, you can set the font colour using any one of the standard colour names

<font color = “red”> This is red </font>

$��3&��

2 ��!��1�� "��*�� !��4��

%�� %��/�� !��4��/�� !��

��3��



16

$��5&��

0�� 5��

6 � �� 4��7 �� "��

� !�� 4��

8�� *��!��

2 �9�� !�� :�� 9�

��!��

� !��

� ��

11. Images . The <img> tag lets you reference and insert a graphics image into an HTML document.

The src attribute

The src attribute indicates the source / location of the image. For example,

<img src = "pics/tux.gif">

inserts an image tux.jpg from the pics directory.

Image alignment attribute Method I

There are two image alignment attributes: left and right,



17

<img src = "pics/ISA.jpg" align = “right”>

aligns the image to the middle of the base line text.

Method II

<center > <img src = "pics/ISA.jpg"></center>

Method III

<div align=”center”><img src = "pics/ISA.jpg"></div>

Border attribute

Use the border attribute to create a border around the image.

<img src = "pics/ISSA.jpg" align = “middle” border = “4”>

Border = 0 removes the border from the image.

Height and width attributes

These specify the height and width of the image. Used often to resize images

<img src = "pics/ISSA.jpg" align=middle" border=“4” width="200" height="150">

12. Background color and background Images

The attributes that control the document background colour, text colour and the document

margins are used with the body tag.

<body bgcolor="#FF0000">

sets the background colour to red

<body bgcolor=”green”>

sets the background colour to green.

<body background="pics/coat.jpg">

inserts image logo.jpg from the pics directory as the background image.



18

To set the text colour of the document to blue

< body text ="blue">

To set a background image and text

<body background = "pics/coat.jpg" text ="blue">

$��;&��

� �� !"��# ��

$��%��&�# ��# ��'��"��&� ��

��

( ��"��%��"��)��"�� *��+ ��

, �)��-��



19

13. Lists Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul> <li>Nelspruit</li> <li>Skukuza</li> <li>Witbank</li> <li>Bushbuckridge </li> </ul>

Here is how it looks in a browser:

• Nelspruit • Skukuza • Witbank • Bushbuckridge

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol> <li>Nelspruit</li> <li>Skukuza</li> <li>Witbank</li> <li>Bushbuckridge </li></ol>

Here is how it looks in a browser:

1. Nelspruit 2. Skukuza 3. Witbank 4. Bushbuckridge

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

�

$��<� � � =� �� &�">�� ?�

�� 0�� *��!�� 0�� !� �� @ �� .�� <��



20

Identify at least 4 HTML elements used in the below picture. E.g. images, formatting tags etc.



21

14. HYPERLINKS

They're what made the web The Web. The ability to link from one document to another is one of the most central features of HTML.

Hypertext can link to: � A place in your current page, � Another WWW website - anywhere! � and may be comprised of text or images.

Hypertext links are enclosed within the tagset : <a href="location">Insert a name for your link here</a>. Between the anchor open/close tags, place any text or image which is to be "hyper"...that is, which when clicked will cause the browser to jump to the linked location. The text between the tags will automatically be underlined To define a location name within a web page, use the form: <a name="location"></a>... with no space or text between the tag and its closing. Place the tag just above any line in your html to which you'd like to go to. HTML <a> tag

The <a> tag defines an anchor. An anchor can be used in two ways:

1. To create a link to another document by using the href attribute 2. To create a bookmark inside a document, by using the name or id attribute

Example Source Output

<p>Linking to New Page: <a href="newPage.html">New Page</a> </p>

<p> Opening New Page in a new browser window: <a href="newPage.html" target="_blank">New Page</a> </p>

Linking to New Page: New Page

Opening New Page in a new browser window: New Page



22

$��">�� =� �� &�%>�� ?�

�� 0�� 9 ��

�� 6 � �� %�� "�� 0��9��

� # �� 9 ��

��9�� %�� %�

When you create a link you can target a page by a name you have assigned it. TARGET has four predefined values, which can be used as if certain windows and frames already have names without you having to assign them: Target Explained "_blank" opens the new document in a new window. "_parent" used in the situation where a frameset file is nested inside another

frameset "_self" puts the new document in the same window and frame as the current

document

E-Mail Links From Your Page

This is what's known as a mailto: command. It follows the same coding as the hyperlink. What this format does is place a link on your page on which people can click to send you an e-mail.

Example

<a href="mailto:[email protected]">Click here to send an email</a>

Links to websites / documents

Government website : <a href=”http://wwww.gov.za”> Government Website </a>

Acrobat Documents : <a href=”filename.pdf”> HTML Manual </a>

Word Documents: <a href=”filename.doc”> HTML Manual </a>

Excel Documents: <a href=”filename.xsl”> HTML Manual </a>



23

Images as a link Example <html> <body> <p> You can also use an image as a link: <p></p> <a href="red.html"> <img border="0" src="pics/button.jpg" > </a> </p> </body> </html>

This is how it will look in your Browser:

$��">��

�� !�� # �� 8�� 9�!��

��

� �� # �� 9��9��

��

$��""��

�� 5�� # �� 8��9��;��

� ��;�� # �� 8��9��9��5��



24

15. Tables

To design professional looking pages, you’ll need to organize your information in tables. Tables are basically boxes that can contain text, colors, and graphics. Most often you cant see the tables themselves; you can only see their contents.

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Table Tags Tag Description

<table> Defines a table <th> Defines a table header <tr> Defines a table row <td> Defines a table cell <caption> Defines a table caption <colgroup> Defines groups of table columns <col> Defines the attribute values for one or more columns in a table <thead> Defines a table head <tbody> Defines a table body <tfoot> Defines a table footer



25

CREATING A TABLE Let's begin with a simple and common use for tables, i.e. a list of staff members. Suppose we have four people whose names we want on the list. The data could be arranged in a table like this:

<table> <tr> <td>1</td> <td>Ivy Dibakoane</td> </tr> </table>

Which gives us this table:

1 Ivy Dibakoane This table uses the basic three tags all tables must have: <TABLE> creates the table. Most of the overall properties of the table are defined here, such as if it has borders and what is the table's background color. <TR > (Table Row) defines each row of the table. <TD> (Table Data) defines each cell of the table. The first modification we'll make to this table is to add borders. Borders will help us see how the table is laid out. <table width="100%" border="1"> <tr> <td> </td> </tr> </table>

$��"%� � =� �� &�%1�� ?�

� 0�� "�� %��

� � �� A�">>B ��A�"��

� �8��"�� # �� 4�A�*��%��

��

� 0�� !��!��

� �� "%�� Your table should look like this:

Name Surname



26

$��"*�� =� �� &�%1�� ?�

� 0�� %�� "��

� � �� A�">>B ��A�"��

� �8��"�� 7 �� %��

� 0�� !��!��

� �� "%�� Your table should look like this: Home About us CCCC�0��!!�� )�CCCC�

�16.DESIGN TEMPLATES

Tables are mostly used to create design templates for formatting menu’s, placing LOGO’s and web information in a controllable and structured manner. Below are examples for horizontal and vertical menu’s that can be placed in a table to make a template.

$��"/��

� ��4�� !��

�� 9�� Example for horizontal menu Table: <html> <head> <title>Horizontal Table</title> </head> <body> <table width="100%" border="1"> <tr> <td>Menu 1</td> <td>Menu 2</td> <td>Menu 3</td> <td>Menu 4</td> <td>Menu 5</td> </tr> </table> </body> </html> This is what your Table should look like. Menu 1 Menu 2 Menu 3 Menu 4 Menu 5



27

$��"1�� '��

�� 0�� "�� 1��

� � �� A�">>B ��A�"��

� 8�� 2 ��":�2 ��%��

��

� � � ��"1�� ./��%��!��!�� )�� Example for vertical menu Table: This is what your Table should look like: <html> <head> <title>Vertical Table</title> </head> <body> <table width="50%" border="1"> <tr> <td><img src=”pics/logo.jpg”> </td> </tr> <tr> <td>Menu 1</td> </tr> <tr> <td>><a href=”ex2.html”> <img src=”pics/exer2.jpg”> </a> </td> </tr> <tr> <td>Menu 3</td> </tr> <tr> <td>Menu 4</td> </tr> <tr> <td>>><a href=”ex5.html”> Menu 5</a></td> </tr> <tr> <td><p>Picture</p> <p> </p> <p> </p></td> </tr> </table> </body> </html>

Menu 1

Menu 3 Menu 4 Menu 5 Picture

$��"3�� '��

� 0�� 3�� "��

� � �� A�">>B ��A�"��

� � � ��"3��

� 8��"�� , �� %�� )��

� 8��!��!�� !��9��

�� , �� %�� )��

./��%��!��!�� )��



28

$��"5�� '��

� �� 0�� *�� "��

� � �� A�">>B ��A�"��

� 8��"�� *�� =,�-D ��E,.�-?�

� 8��%�� 4��

��"1�

� 8��*�� 3�� =,�-D ��E,.�-?�

� � � ��"5��

This is what your Table should look like

Menu 1 Menu 2 Menu 3 Menu 4

$��";�� =� �� &�">�� ?�

� 0�� "�� %��

� � �� A�">>B ��A�"��

� � ��"�� A�%>B ��%�� A�;>B ��

� 8��"��

� ��"3�

� � � ��!��";��

This is what your Table should look like

Menu 1

Menu 3 Menu 4 Menu 5 Picture



29

$��"<�� '��

�• � �� 9�� :��9 ��

��9 ��!��";��

• ��=� ��?�� !��

!��

• 7 ��9�� %�� :�

��1�� 5�� ;�� ">�� .� ��!��

• 8��

• � � ��"<��

�

$��%>� � �� • 2 �9��!��"<��

• � �� !��

• 0��)��"��0�� !��%�� %��"��

�� !��

• �� %��

��"<�� 9��%��( ��

��9)�

• ��!�� 1:�3:�;��">��

��

Having completed all the exercises successfully, you are now ready to create your own website.

�

�

�



30

$��%"� � ��

• 0�� !��

• F�� /��

• F�� 4��

�� !��

• � � ��!�� :�$ ��:�# �� :�

� � ��:�� :�$�� :�2 ��:�@ ��:�0��

( ��:�G ��:��:��

• �� 9��

• 2 �9��

��H��H��

�

/��# �� "�)��%%��%��"��

�� +�# � �� "��"��%��



31

17. Additional Enhancements Scripting languages, marquees and Java Applets were invented specifically for use in web browsers to make websites more dynamic. On its own, HTML is capable of outputting more-or-less static pages. Once you load them up your view doesn't change much until you click a link to go to a new page. Adding Scripts to your code allows you to change how the document looks completely, from changing text, to changing colours, to changing the options available in a drop-down list 17.1 Marquee <MARQUEE ...> creates a scrolling display. It can work well for announcements. <marquee> Welcome to my webpage </marquee> The basic use of <MARQUEE ...> is simple. Put most any kind of markup between <MARQUEE ...> and </MARQUEE>. You can even use an image in the marquee <marquee> Hi There! <img src="pics/mountain.jpg" height=33 width=82 > </ marquee > By default <MARQUEE ...> has a WIDTH of 100%, so it might appear as a block level. However, if you set the width to something smaller than 100%, you might notice that the marquee is in line with the surrounding text. <MARQUEE WIDTH="20%"> Welcome to my webpage </MARQUEE>

WIDTH: how wide the marquee is

HEIGHT: how tall the marquee is

DIRECTION: which direction the marquee should scroll

BEHAVIOR: what type of scrolling

SCROLLAMOUNT: how far to jump

SCROLLDELAY: how long to delay between each jump

BGCOLOR: background color

HSPACE: horizontal space around the marquee

VSPACE: vertical space around the marquee

�

� Exercise 22: open any webpage of your preivous exercises and add a marquee.

Institute for Satellite and Software ApplicationsIn the example above, the tags were wrapped around...

Documents

Transcript of Institute for Satellite and Software ApplicationsIn the example above, the tags were wrapped around...