Scribd
Upload
2 views

Introduction to HTML CSC 221

This document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages. It covers the basic structure of an HTML document, including essential tags like <html>, <head>, <title>, and <body>, as well as various HTML elements and their functions. Additionally, it discusses attributes, container and empty tags, and provides examples for creating headings, paragraphs, and other content.

Uploaded by

yakubuadamugama
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Introduction to HTML CSC 221

This document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages. It covers the basic structure of an HTML document, including essential tags like <html>, <head>, <title>, and <body>, as well as various HTML elements and their functions. Additionally, it discusses attributes, container and empty tags, and provides examples for creating headings, paragraphs, and other content.

Uploaded by

yakubuadamugama
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Introduction to HTML

A webpage is a page containing information about any things in web. To develop such web pages, a markup
language is used called HTML. HTML stands for Hyper Text Markup Language which is used to develop any kinds
of web pages. It was developed by Tim Berners Lee in 1990 A.D.
Creating HTML page:
Creating an HTML document is easy. To begin coding HTML you need only two things: a simple-text editor and a
web browser.
Here are some examples of text editors that will enable you to create html page

Notepad, Notepad 2, Notepad ++, Pspad, Visual Studio Code, Microsoft FrontPage, Macromedia Dreamweaver,
Netscape Composer, Komodo e.t.c. Notepad is the most basic of simple-text editors and you will probably code a
fair amount of HTML with it.

An HTML file must have an .htm or .html file extension

Please reconstruct the below items

➢ Open Notepad or another text editor.


➢ At the top of the page type <!doctype.html>
➢ On the next line type <html>.
➢ On the next line, indent five spaces and now add the opening header tag: <head>.
➢ On the next line, indent ten spaces and type <title> </title>.
➢ Go to the next line, indent five spaces from the margin and insert the closing header tag: </head>
➢ Five spaces in from the margin on the next line, type<body>.
➢ Now drop down another line and type the closing tag right below its mate: </body>.
➢ Finally, go to the next line and type </html>.
➢ In the File menu, choose Save As.
➢ In the Save as Type option box, choose All Files.
➢ Name the file template.html or .htm.

Click Save.

<!doctype.html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

You have basic HTML document now, to see some result put the following code in title and body tags.

<!doctype.html>
<html>
<head>

1
<title>Department of Computer Science AACOE, Argungu</title>
</head>
<body>
<h1>ADAMU AUGIE COLLEGE OF EDUCATION, ARGUNGU, KEBBI STATE</h1>
<p>Department of Computer Science AACOE, Argungu Result Management System</p>
</body>
</html>

Now you have created one HTML page and you can use a Web Browser to open this HTML file to see the result.
Hope you understood that Web Pages are nothing but they are simple HTML files with some content which can
be rendered using Web Browsers.

Here <html>, <head>, ...<p>, <h1> etc. are called HTML tags. HTML tags are building blocks of an HTML
document and we will learn the entire HTML tags in subsequent chapters.

Tags in HTML

HTML Tag

All the codes used in HTML are called Tags. Tags are enclosed within angular brackets. There are two types of
tags:-
1. Container Tag:- The tags that needs to be closed are called container tags. Eg <html>…</html>,
<body>…..</body> etc.
2. Empty Tags:- The tags that doesn’t need to be closed are called empty tags. Eg:- <br>,<img> and
<h>.

Attributes
Attributes are the properties of tags. The attributes contain values inside tags. For e.g, <p align=”center”>I am
an student</p>. Here, ‘align’ is an attribute and ‘center’ is a value.

General Tags and their functions


1. <html>…..</html>:- Indicates start and end of html document.
2. <head>.....</head>:- Defines background details of document.
3. <title>….</title>:- Defines title of document.
4. <body>…..</body>:- Defines visible portion of document. Its attributes are: - bgcolor, background,
text etc.
5. <h1>…</h1>:- Defines heading. The heading tag is from <h1> to <h6> from larger to smaller.
6. <b>…</b>:- Make text bold.
7. <i>…</i>:- Makes text Italics.
8. <u>…</u>:- Makes text underlined.
9. <a>…</a>:- Creates link between same or different documents. Its attributes are href and name.
10. <marquee>…</marquee>:- It defines the scrolling of text or images. Its attributes are direction,
behavior, scrolldelay and scrollamount.
11. <font>…</font>:- Defines the formatting of font. Its attributes are face, size and color.
12. <p>…</p>:- Defines paragraph. Its attribute is align.
13. <br>:- It breaks the line.
14. <ol>…</ol>:- Defines the ordered list. Its attributes are type and start.
15. <ul>…</ul>:- Defines unordered list. Its attribute is type.
16. <li>…</li>:- Defines items in the list. It comes inside <ol> or <ul> tags.
17. <hr>:- Inserts horizontal line. Its attributes are color, align, size and width.

2
18. <img>:- Inserts an image. Its attributes are src, width, height, align, border, alt. Eg:- <img
src=”d:\photos\aa.jpg” height=”20%” width=”30%”>

Table Tags
1. <table>…</table>:- Defines beginning and ending of table. Its attributes are border, bgcolor, width
etc.
2. <tr>…</tr>:- Defines beginning and ending of table row. Its attributes are align, bgcolor etc.
3. <td>…</td>:- Defines beginning and ending of table cell. Its attributes are bgcolor, align, colspan,
rowspan etc.
4. <th>…</th>:- Defines table heading.
Form tags
1. <form>…</form>:- Defines beginning and ending of form
2. <input>:- Defines type of form. Its attributes are (a) Type:- It defines type of form and its values are
text, password, radio, checkbox, submit and reset. (b) Name:- It defines the name of form.
3. <select>…</select>:- It gives the list box to select items. The items should be inside
<option>…</option> tag.
4. <textarea>…</textarea>:- It is used to insert the large texts. Its attributes are rows and cols.

An HTML document starts and ends with <html> and < /html> tags.
These tags tell the browser that the entire document is composed in HTML. Inside these two tags, the document
is split into two sections:
The <head>...</head> elements, which contain information about the document such as title of the document,
author of the document etc. Information inside this tag does not display outside.

The <body>...</body> elements, which contain the real content of the document that you see on your screen.

HTML language is a markup language and we use many tags to markup text. In the above example you have
seen <html>, <body> etc. are called HTML tags or HTML elements.

Every tag consists of a tag name, sometimes followed by an optional list of tag attributes, all placed between
opening and closing brackets (< and >). The simplest tag is nothing more than a name appropriately enclosed in
brackets, such as <head> and <i>. More complicated tags contain one or more attributes, which specify or
modify the behavior of the tag.

According to the HTML standard, tag and attribute names are not case-sensitive. There's no difference in effect
between <head>, <Head>, <HEAD>, or even <Head>; they are all equivalent.

What is Next?
Next you will see basic HTML tags in more detail and you will have understanding on HTML tags attributes also.
The basic structure for all HTML documents is simple and should include the following minimum elements or
tags:

➢ <html> - The main container for HTML pages


➢ <head> - The container for page header information
➢ <title> - The title of the page
➢ <body> - The main body of the page

Now we will explain each of these tags one by one. In this tutorial you will find the terms element and tag are
used interchangeably.

3
The <html> Element:
The <html> element is the containing element for the whole HTML document. Each HTML document should have
one <html> and each document should end with a closing </html> tag.

Following two elements appear as direct children of an <html> element:


➢ <head>
➢ <body>

As such, start and end HTML tags enclose all the other HTML tags you use to describe the Web page.

The <head> Element:


The <head> element is just a container for all other header elements. It should
be the first thing to appear after the opening <html> tag.
Each <head> element should contain a <title> element indicating the title of
the document, although it may also contain any combination of the following elements, in any order:

The <link> element is used to link an external CSS file named "styles.css" located in the same directory as your
HTML file.
The <script> element is used to include an external JavaScript file named "script.js," which should also be
located in the same directory as your HTML file.
Here is an example of how to use a head tag.

<head>
<title>HTML Basic tags</title>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

The <title> Element:


You should specify a title for every page that you write inside the <title> element. This element is a child of the
<head> element). It is used in several ways:

➢ It displays at the very top of a browser window.


➢ It is used as the default name for a bookmark in browsers.
➢ It is used by search engines that use its content to help index pages.

Therefore it is important to use a title that really describes the content of your site. The <title> element should
contain only the text for the title and it may not contain any other elements.

Example:
Here is an example of how to use a title tag.

<head>
<title>HTML Basic tags</title>
</head>

4
The <body> Element:
The <body> element appears after the <head> element and contains the part
of the Web page that you actually see in the main browser window, which is sometimes referred to as body
content.

A <body> element may contain anything from a couple of paragraphs under a heading to more complicated
layouts containing forms and tables.

Most of what you will be learning in this and the following five chapters will be written between the opening
<body> tag and closing </body> tag.

Example:
Here is an example of how to use a body tag.

<body>
<p>This is a paragraph tag.</p>
</body>

Create Headings
The <hn> Elements:

Any document starts with a heading. You use different sizes for your headings. HTML also has six levels of
headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading,
browser adds one line before and after that heading.

Example:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

This is heading 1
This is heading 2
This is heading 3
This is heading 4

5
This is heading 5
This is heading 6

This will produce the result below:

Create Paragraph -The <p> Element:


The <p> element offers a way to structure your text. Each paragraph of text should go in between an opening
<p> and closing </p> tag as shown below in the example:

<p>Here is a paragraph of text.</p>


<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>

This will produce the result below:

Here is a paragraph of text.


Here is a second paragraph of text.
Here is a third paragraph of text.

You can use align attribute to align your paragraphs.

<p align="left">This is left aligned.</p>


<p align="center">This is center aligned.</p>
<p align="right">This is right aligned.</p>
<p align="justify">This is justified. This works when you have multiple lines in your paragraph and you want to
justify all the lines so that they can look more nice.</p>

This will produce the result below:

This is left aligned.

This is center aligned.

This is right aligned.

This is justified. This works when you have multiple lines in your paragraph and you want to justify all the lines
so that they can look more nice.

Centering Content-The <center> Element:


You can use <center> tag to put any content in the center of the page or any table cell.

Example:

6
<center><p>This is in the center.</p></center>

This will produce the result below:

This is in the center.

No breaking Spaces:
Horizontal Rules - The <hr /> Element

Horizontal rules are used to visually break up sections of a document. The <hr> tag creates a line from the
current position in the document to the right margin and breaks the line accordingly.

For example, you may want to give a line between two paragraphs as follows:

<p>This is paragraph one and should be on top</p>


<hr />
<p>This is paragraph two and should be at bottom</p>

This will produce the result below:

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Underlined Text - The <u> Element:


Anything that appears in a <u>...</u> element is displayed with underline, like the word underlined here:

<p>The following word uses a <u>underlined</u> typeface.</p>

This will produce the result below:

The following word uses a underlined typeface.

Strike Text - The <strike> Element:


Anything that appears in a <strike>...</strike> element is displayed with strikethrough, which is a thin line
through the text:

<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

This will produce the result below:

The following word uses a strikethrough typeface.

7
Superscript Text - The <sup> Element:
The content of a <sup> element is written in superscript; the font size used is the same size as the characters
surrounding it but is displayed half a character’s height above the other characters.

<p>The following word uses a <sup>superscript</sup> typeface.</p>

This will produce the result below:

The following word uses a superscript


typeface.

Subscript Text - The <sub> Element:


The content of a <sub> element is written in subscript; the font size used is the same as the characters
surrounding it, but is displayed half a character’s height beneath the other characters.

<p>The following word uses a <sub>subscript</sub> typeface.</p>

This will produce the result below:

The following word uses a subscript typeface.

Larger Text - The <big> Element:


The content of the <big> element is displayed one font size larger than the rest of the text surrounding it.

<p>The following word uses a <big>big</big> typeface.</p>

This will produce the result below:

The following word uses a big typeface.

Smaller Text - The <small> Element:


The content of the <small> element is displayed one font size smaller than the rest of the text surrounding it.

<p>The following word uses a <small>small</small> typeface.</p>

This will produce the result below:

The following word uses a small typeface.

Font Size:
You can set the size of your font with size attribute. The range of accepted values is from 1(smallest) to
7(largest). The default size of a font is 3.

Example:

8
<font size="1">Font size="1"</font>
<font size="2">Font size="2"</font>
<font size="3">Font size="3"</font>
<font size="4">Font size="4"</font>
<font size="5">Font size="5"</font>
<font size="6">Font size="6"</font>
<font size="7">Font size="7"</font>

This will produce the result below:

Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"

Font Face:
You can set any font you like using face attribute but be aware that if the user viewing the page doesn't have the
font installed, they will not be able to see it. Instead, they will default to Times New Roman of your font with size
attribute. See below few examples on using different font face.

Example:

<font face="Times New Roman" size="5">Times New Roman</font>


<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face=" Impact " size="5"> Impact </font>
<font face=" Bookman Old Style " size="5"> Bookman Old Style </font>

This will produce the result below:

Times New Roman


Verdana
Comic Sans MS
Impact
Bookman Old Style

Specify alternate font faces:


A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to
specify two or more font face alternatives by listing the font face names, separated by a comma.

Example:

<font face="Tahoma">
<font face="Comic Sans”>

9
When your page is loaded, their browser will display the first font face that it has available. If none of your
selections are installed....then it will display the default font face Times New Roman.

Font Color:
You can set any font color you like using color attribute. You can specify the color that you want by either the
color name or hexadecimal code for that color.

Example:

<font color="#FF00FF">This text is hexcolor #FF00FF</font>


<font color="red">This text is red</font>

This will produce the result below:

This text is hexcolor #FF00FF


This text is red

A simple syntax to use marquee is as follows:

<marquee attribute_name="attribute_value"....more attributes>

One or more lines or text message or image

</marquee>

Attributes:
A HTML marquee can have following attributes:

➢ Width: how wide the marquee is. This will have a value like 10 or 20%etc.
➢ Height: how tall the marquee is. This will have a value like 10 or 20% etc.
➢ Direction: which direction the marquee should scroll. This will have value
➢ Either up, down, left or right.
➢ Behavior: what type of scrolling. This will have value scroll, slid and alternate.
➢ Scroll delay: how long to delay between each jump. This will have a value like 10 etc.
➢ Scroll amount: how far to jump. This will have a value like 10 etc.
➢ Loop: how many times to loop. The default value is INFINITE, which
➢ Means that the marquee loops endlessly.
➢ Bicolor: background color. This will have any color name or color hex value.
➢ Hspace: horizontal space around the marquee. This will have a value like 10 or 20%etc.
➢ Vspace: vertical space around the marquee. This will have a value like 10 or 20%etc.

Examples:
Here are few examples to demonstrate the usage of marquee tag.

<marquee>This text will scroll from right to left </marquee>

This will produce the result below:

10
<marquee width="50%">This example will take only 50% width</marquee>

This will produce the result below:

This example will take only 50%

<marquee direction="right">This text will scroll from left to right</marquee>

This will produce the result below:

This text will scroll from left to right

<marquee direction="up">This text will scroll from bottom to up</marquee>

This will produce the result below:

This text will scroll from bottom to up

HTML TABLE

Tables are very useful to arrange in HTML and they are used very frequently by almost all web developers.
Tables are just like spreadsheets and they are made up of rows and columns.

You will create a table in HTML/XHTML by using <table> tag. Inside <table> element the table is written out
row by row. A row is contained inside a <tr> tag. Which stands for table row. And each cell is then written inside
the row Element using a <td> tag. which stands for table data.

Example:

<table border="1">
<tr>
<td>Java</td>
<td>Php</td>
</tr>
<tr>
<td>Python</td>
<td>Visual Basic</td>
</tr>
</table>

This will produce the result below:

Java Php

11
Python Visual Basic

In the above example border is an attribute of <table> and it will put border across all the cells. If you do not
need a border then you can use border="0".

The border attribute and other attributes also mention din this session are deprecated and they have been
replaced by CSS. So, it is recommended to use CSS instead of using any attribute directly.

Table Heading - The <th> Element:


Table heading can be defined using <th> element. This tag will be put to replace <td> tag which is used to
represent actual data. Normally you will put your top Row as table heading as shown below, otherwise you can
use <th> element at any place:

<table border="1">
<tr>
<th>Course Title</th>
<th>Course Code </th>
</tr>
<tr>
<td>Introduction to Computer</td>
<td>5000</td>
</tr>
<tr>
<td> Operating System </td>
<td>COM 202</td>
</tr>
</table>

This will produce following result. You can see its making heading as a bold one:

Course Title Course Code


Introduction to Computer COM 201
Operating System COM 202

Each cell must, however, have either a <td> or a <th> element in order for the table to display correctly even if
that element is empty.

Table Cellpadding and Cellspacing:


There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your
table cell. Cellspacing defines the width of the border, while cellpadding represents the distance between cell
borders and the content within. Following is the example:

<table border="1" cellpadding="5" cellspacing="5">


<tr>
<th> Course Title </th>
<th> Course Code</th>

12
</tr>
<tr>
<td> Introduction to Computer </td>
<td> COM 201</td>
</tr>
<tr>
<td> Operating System </td>
<td> COM 202</td>
</tr>
</table>

This will produce the result below:

Course Title Course Code


Introduction to Computer COM 201
Operating System COM 202

Colspan and Rowspan Attributes:


You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you
will use rowspan if you want to merge two or more rows. Following is the example:

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">HTML</td>
<td>PHP</td><td>XHTML</td></tr>
<tr><td>ASP</td><td>C+</td></tr>
<tr><td colspan="3"> C++ </td></tr>
</table>

This will produce the result below:

Column 1 Column 2 Column 3


HTML PHP XHTML
ASP C+
C++

Tables Backgrounds

You can set table background using of the following two ways:

➢ Using bgcolor attribute - You can set background color for whole table or just for one cell.

13
➢ Using background attribute - You can set background image for whole table or just for one cell.

You can set border color also using bordercolor attribute.


Here is an example of using bgcolor attribute:
<table border="5" bordercolor="green" bgcolor="gray">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">HTML</td>
<td bgcolor="red">PHP</td><td>XHTML</td></tr>
<tr><td>C+</td><td>C++</td></tr>
<tr><td colspan="3">ASP</td></tr>
</table>

This will produce the result below:

Column 1 Column 2 Column 3


HTML PHP XHTML
C+ C++
ASP

Here is an example of using background attribute:

<table border="1" background="/images/home.gif">


<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">HTML</td>
<td bgcolor="red">PHP</td>XHTML<td> </td></tr>
<tr><td>ASP</td><td>C+</td></tr>
<tr><td colspan="3" background="/images/pattern1.gif">
C++
</td></tr>
</table>

This will produce the result below:

Column 1 Column 2 Column 3


HTML PHP XHTML
ASP C+
C++

14
Table height and width:
You can set a table width and height using width and height attributes. You can specify table width or height in
terms of integer value or in terms of percentage of available screen area. Following is the example:

<table border="1" width="400" height="150">


<tr>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td> JavaScript </td>
<td> XHTML </td>
</tr>
</table>

This will produce the result below:

HTML PHP
JavaScript XHTML

HTML ORDERED LISTS

The typical browser formats the contents of an ordered list just like an Unordered list, except that the items are
numbered instead of bulleted. The numbering starts at one and is incremented by one for each successive
ordered list element tagged with <li> This list is created by using <ol> tag. Each item in the list is marked with a
number.

below are some examples of itemized programming languages in ordered list:

<center>
<h2> Programming Languages </h2>
</center>
<ol>
<li> C</li>
<li> C#</li>
<li> C++</li>
<li> Java</li>
</ol>

This will produce the result below:

Programming Languages

1. C
2. C#
3. C++

15
4. Java

HTML Layout - Using Tables:


The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in
columns and rows, so you can utilize these rows and columns in whatever way you like.
For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns - but the
header and footer column spans both columns using the colspan attribute:

HTML COLOR

HTML Colors - Color Names:

You can specify direct a color name to set text or background color. There are 16 basic color names that will
validate with an HTML validator but there are over 200 different color names supported by browsers.

Here is the list of Standard 16 Colors names and it is recommended to use them.

Black Gray Silver White


Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal

HTML FORMS

HTML Forms - Text Input Controls: There are actually three types of text input used on forms:

➢ Single-line text input controls: Used for items that require only one line of user input, such as search boxes or
names. They are created using the <input> element.
➢ Password input controls: Single-line text input that mask the characters a user enters.
➢ Multi-line text input controls: Used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created with the <textarea> element.

Single-line text input controls:


Single-line text input controls are created using an <input> element whose types attribute has a value of text.

Here is a basic example of a single-line text input used to take first name and last name:

<form>
First name:
<input type="text" name="first_name" />
<br>
Last name:
<input type="text" name="last_name" />
<input type="submit" value="submit" />
</form>

16
This will produce the result below:

Password input controls:

This is also a form of single-line text input controls are created using an <input> element whose type attribute
has a value of password.

Here is a basic example of a single-line password input used to take user password:

<form>
Login :
<input type="text" name="login" />
<br>
Password:
<input type="text" name="password" />
<br>
<input type="submit" value="submit" />
</form>

This will produce the result below:

You can use <button> element to create various buttons. Here is the syntax:

<form>
<button type="submit">Submit</button>
<br /><br />
<button type="reset"> Reset </button>
<button type="button"> Button </button>
</form>

This will produce the result below:

17
HTML Forms - Checkboxes Control:

Checkboxes are used when more than one option is required to be selected. They are created using <input> tag
as shown below.

Here is example HTML code for a form with two checkboxes

<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
<input type="submit" value="Select Subject" />
</form>

This will produce the result below:

Following is the list of important checkbox attributes:

➢ Type: Indicates that you want to create a checkbox.


➢ Name: Name of the control.
➢ Value: The value that will be used if the checkbox is selected. More than
➢ One checkbox should share the same name only if you want to allow users to select several items from the
same list.
➢ Checked: Indicates that when the page loads, the checkbox should be selected.

HTML Forms - Radio box Control:

Radio Buttons are used when only one option is required to be selected. They are created using <input> tag as
shown below:

Here is example HTML code for a form with two radio button:

<form>
<input type="radio" name="subject" value="maths" /> Maths
<input type="radio" name="subject" value="physics" /> Physics

18
<input type="submit" value="Select Subject" />
</form>

This will produce the result below:

HTML Forms - Text area

Text area are Used when the user is required to give details that may be longer than a single sentence. Multi-line
input controls are created with the <textarea> element.

Here is example HTML code for a form for Text area:

<form>
<textarea rows="2" name="S1" cols="20"></textarea>
</form>

This will produce the result below:

HTML Forms - Drop down box

Drop down box are Used when the user is required to select data from the list. Drop down box controls are
created with the <select> element.

Here is example HTML code for a form for Text area:

<select size="1" name="D1"></select>

This will produce the result below:

19
HTML COLOR HEX CODE

HTML Colors - Hex Codes:

Color Name Hex Value Color


Aqua #00ffff
Black #000000
Blue #0000ff
Fuchsia #ff00ff
Green #008000
Gray #808080
Lime #00ff00
Maroon #800000
Navy #000080
Olive #808000
Purple #800080
Red #ff0000
Silver #c0c0c0
Teal #008080
White #ffffff
Yellow #ffff00

20
Programming Concepts and Logics
Programming Languages
We know that the communication between human being require their languages which is called
natural language like English, Nepali, Hindi etc. Like this, when we use computers, we need to communicate with
computers that means we have to give instructions to computer. The language that is used to communicate with
computer or to give instructions to computer is called programming language.
Types of Programming language
1. Machine Level Language
Machine level language is the first programming language that is used to develop programs in
computer. It is called machine level because it is directly understood by computer or CPU. So, it is the
language of CPU that contains only 0’s and 1’s. To write programs using MLL, a programmer should have
complete knowledge about internal structure of machine. Since it is directly understood by CPU, it doesn’t
require any translating software.

Object Program Processor


Program in MLL
2. Assembly level Language
Since it became difficult to write programs using machine level language, ALL was developed. ALL
consist of certain codes that perform specific task, that codes are called mnemonics. For example SUB, DIV,
ADD, MOD etc. It is closer to MLL, so it is faster that high level language. Since the program written in ALL is

21
not understood by CPU, it needs a language translator called Assembler which translates program written in
Assembly language to machine level language.

Source program Object Program Processor

Program in ALL (Assembler) Program in MLL

3. High Level Language


High level language is closer to English language. It consists of English like codes and
mathematical symbols, so it is easy to write, debug and understand programs using HLL. Since the HLL
instruction is not directly understood by CPU, it needs language translator compiler or interpreter that
converts programs of HLL to MLL. There are different types HLL developed for modern computers like C,
C++, JAVA, VB etc.
Source program Object Program Processor
Program in HLL Com/Inter Program in MLL

4. Fourth Generation Language (4GL)


4GL was developed after HLL. It is a result oriented programming language and it consists of
database query languages. It also needs converted to MLL before reaching to CPU, so it needs language
translator compiler or interpreter.

Source program Object Program Processor


Program in 4GL Com/Inter Program in MLL
Difference between Compiler and Interpreter
1. Compiler
It translates program written in HLL to MLL whole program at a time. It finds the syntax errors while
translating whole program. The compiling process is faster that interpreting. Example:- C, C++, VB etc.
2. Interpreter
It translates program written in HLL to MLL one instruction at a time. It finds the syntax errors while
translating a line of programs. It is slower than compiling process. Example:- BASIC, LIPS etc.
Concept of Program
We know that a computer needs instructions to carry out any job and that instructions are given by
human beings. So, the set of instructions given to the computer to carry out any job is called a program. The
programs are written using programming language and the specialist who writes programs is called a
programmer.
Terms used in program
1. Operation, operand and operator
a. Operation:- An operation is defined as an action upon a given data. There may be various types
of operations in a program. For example arithmetic operation, I/O operation, relational operation
etc.
b. Operand:- Operand is different types of data on which different operations take place. The data
may be value or variable. For example, x+5. Here, x and 5 are operands.
c. Operator:- An operator is a sign or symbol which perform an operation upon given operands. For
example, x+5. Here, ‘+’ sign is an operator. There are different types of operators such as
arithmetic operator, relational operator, logical operator etc.
2. Errors in a program
While writing any program, there may come different types of errors. The process of correcting
such errors is referred as debugging.
Types of errors

22
1. Syntax error:- Syntax is the rule of writing codes used in the program in structured manner. The error
which occurs when the instruction of program does not match the structural rule of programming
language is called syntax error. The syntax error is easy to correct because it can be detected by compiler
or interpreter.
2. Semantic error:- The error which causes the wrong output due to the wrong calculation or wrong input
of data in the programming is called semantic error. It is not detected by compiler or interpreter, to
detect semantic error, the programmer has to look over the program and check where the mistake is.
3. Run-time error:- The error which occurs during the execution or run-time of a program is called run-
time error. Such type of error occurs when the computer is asked to divide by zero or a variable is
assigned beyond its capacity. The run-time error causes termination of a program.
3. Pseudo code
The meaning of ‘Pseudo’ is false or fake. So the pseudo code means false or fake code. We write
algorithm and flowchart using the mixing of English language and programming language. The codes used to
write algorithm and flowchart looks like codes of programming language but it is not syntactically correct, so
it is called pseudo code. For example:-
Pseudo code to add two numbers:-
Enter a and b
Calculate s=a+b
print s
Program design tools
1. Algorithm
Algorithm is the stepwise description of any program. It is written before writing any program. It
helps to solve different problems that come in the program because it gives step by step definition of a
program It is written using mixing of English language and programming language. Example:-
1. Start
2. Enter a and b
3. Calculate s= a+b
4. Print s
5. End
2. Flowchart
A flowchart is a graphical representation of any program. It gives a clear view of any program by
representing a program in graphical manner. It is written after preparing algorithm. The flowchart consists of
different symbols and each symbol has specific meaning. So to draw any type of flowchart, we must
understand each symbol correctly. Following are the symbols that are generally used in flowchart:-

23

You might also like