Computing for Business & Economics II 1
Notepad
Notepad is a simple text editor for Microsoft Windows and a basic text-editing program which
enables computer users to create documents. It was first released as a mouse-based MS-DOS
program in 1983, and has been included in all versions of Microsoft Windows since Windows 1.0 in
1985.
• How to start a basic notepad document?
Notepad documents start with <html> tag.
• What are tags?
Tags are special formatting codes in HTML document used to present content. Tags in Notepad are;
(i) Pair tags, (ii) Couple tags and (iii) single tags. Tags specify the attributes of objects, tables,
pictures and text.
• What are attributes?
Attributes are the quality or feature of an object. A piece of information which determines the
properties of a field or tag in a database or a string of characters in a display. Attributes are also
known as modifiers. The way the browser displays the object can be modified by attributes.
- Text or codes written in head tag are usually not displayed on the website. It is used to write
encrypted data and codes.
- Title tag displays the title of the webpage. Text written in title tag is shown as the name of the
tab.
- Content written under the body tag is displayed on the webpage.
- It is very important to open and close the couple tags or else they won’t work and the content
written in them won’t be displayed on the webpage.
- A basic html document looks as follows:
<html>
<head>
<title> Home </title>
</head>
<body>
</body>
</html>
Computing for Business & Economics II 2
• Formatting the body of a webpage:
There are two ways you can format the body of a webpage.
1) By applying background colour
For background colour, the following tag is used:
<body bgcolor=“Red”>
2) By applying background image
For background image, the following tag is used:
<body background=“[Link]”>
• Heading styles in Notepad:
There are a total of 6 Headings in Notepad. The smallest heading is h6 and the largest heading is h1.
Following are the tags for Heading styles in Notepad:
Heading 1 = <h1> …… </h1>
Heading 2 = <h2> …… </h2>
Heading 3 = <h3> …… </h3>
Heading 4 = <h4> …… </h4>
Heading 5 = <h5> …… </h5>
Heading 6 = <h6> …… </h6>
• How to insert image in a webpage?
- It is very important that all the images must be saved in .jpg format.
- Make sure that all the images you want to insert in your webpage are saved in the folder in which
you have saved your webpage.
- Incase, the image is not in the same folder, you have to specify the route to your image so that it
is displayed on the webpage.
- Image is not a couple tag so there is no need to close the image tag.
✓ Image can be added using the following tag:
<img src=“[Link]”>
✓ You can specify the width and height of the image that you want to insert using the following
tag:
<img src=“[Link]” height=“100” width=“100”>
✓ If the image is saved in a sub-folder of images within your main folder, use the following tag
to insert an image:
<img src=“images/[Link]”>
Here: images is the sub-folder name and [Link] is the name of the image
✓ If the image is saved in the images folder of D-Drive of your computer, use the following tag
to insert an image:
<img src=“\ D:\ Image\ [Link]”>
Computing for Business & Economics II 3
• How to insert a table in a webpage?
To insert a table use the following tag:
<table> …….. </table>
You can specify borders, width, height and background colour of the table. For this, use the
following tag:
<table border=“1” bgcolor=“Yellow” width=“200’ height=“200”>
- If you don’t specify the height and width of the table, notepad will automatically adjust
according to the text requirement.
- For table header use the following tags:
<th> …….. </th>
- For table row use the following tag:
<tr> …….. </tr>
- For table detail use the following tag:
<td> …….. </td>
- Following are the tags for table entries:
<table border="1" bgcolor="Red" width="200" height="200">
<th> ID </th> <th> NAME </th> <th> GENDER </th>
<tr><td> 001 </td> <td> Umer </td> <td> Male </td></tr>
<tr><td> 002 </td> <td> Kinza </td> <td> Female </td></tr>
<tr><td> 003 </td> <td> Azam </td> <td> Male </td></tr>
<tr><td> 004 </td> <td> Hira </td> <td> Female </td></tr>
<tr><td> 005 </td> <td> Zain </td> <td> Male </td></tr>
</table>
• How to insert Hyperlink on a webpage?
Hyperlink can be used to connect two or more than two webpages. Hyperlink on notepad is of two
types, one which opens the link on the same tab and one that opens the link on another tab.
1) Hyperlink on the same tab:
<a href=“[Link] Lahore School of Economics </a>
2) Hyperlink on another tab:
<a href=“[Link] target=“_blank”> LSE </a>
Computing for Business & Economics II 4
Hyperlink to emails can also be added in notepad. Following tag is used to add hyperlink for emails:
<a href=“[Link] </a>
• How to start a paragraph in a webpage?
- To start a paragraph use the following tag:
<p>
- To end a paragraph use the following tag:
</p>
• How to make text bold, underlined and italics?
- Following tag makes the enclosed text bold:
<b>
- Alternates tags for bold are:
<em>
<strong>
- Following tag makes the enclosed text italics:
<i>
- Following tag makes the enclosed text underlined:
<u>
• How to adjust Font size, font face and font colour?
- Font face here is the font type for example Times New Roman / Arial / Calibri
- Font size is the size of font you want to see on the webpage
- Font color is the colour of the font.
✓ To adjust Font (in terms of face, size and color) use the following tag:
<font face=“arial” size=“11” color=“blue”>
✓ To end the font tag, use the following tag
</font>
Font face, colour and size of a table can also be formatted using the following tag:
<table>
<th><font face=“arial” size=“11” color=“pink”> ID </th> <th> NAME </th> <th> GENDER
</th></font>
• How to add marquee on a webpage?
Following tag is used to insert a marquee on a webpage:
<marquee> …… </marquee>
Computing for Business & Economics II 5
Marquee can be applied with different behaviours. To do so, you have to specify behaviour in the
✓ You can specify the background colour of the marquee, the behaviour of the marquee (i.e. Scroll,
tags.
Slide or alternate) and the direction of the marquee (i.e. up, down, right and left).
<marquee bgcolor=“Yellow” behavior=“scroll” scrollamount=“4” direction=“up”> TEXT ON
WHICH YOU WANT TO APPLY THE MARQUEE </marquee>
<marquee bgcolor=“Pink” behavior=“alternate” loop=“2” direction=“left”> LSE </marquee>
✓ You can even add effects like on mouse over the marquee should stop and on mouse out the
marquee should start moving. For this, use the following tag:
<marquee bgcolor=“Red” behavior=“alternate” loop=“4” direction=“right”
onmouseover=“[Link]();” onmouseout=“[Link]();”> LSE </marquee>
✓ You can even apply marquee on an image. Use the following tag to apply marquee on an image:
<marquee behavior=“alternate” loop=“4” direction=“right” onmouseover=“[Link]();”
onmouseout=“[Link]();”> <img src=“[Link]”> </marquee>
• How to make unordered and ordered list?
✓ Unordered List:
- For unordered (bulleted list) use the following tag:
<ul>
- To list each list item use the following tag:
<li> …… </li>
- Coding for an unordered list is as follows:
<ul>
<li> Honda </li>
<li> Toyota </li>
<li> Suzuki </li>
</ul>
✓ Ordered List:
- For ordered (formatted or in order list) use the following tag:
<ol>
- To list each list item use the following tag:
<li> …… </li>
Computing for Business & Economics II 6
By default, the ordered list is of (1,2,3) type.
- Coding for an ordered list is as follows:
<ol>
<li> Honda </li>
<li> Toyota </li>
<li> Suzuki </li>
</ol>
Type of ordered lists:
- For an ordered list of (A, B, C) type use the following tag:
<ol type=“A”>
- For an ordered list of (a, b, c) type use the following tag:
<ol type=“a”>
- For an ordered list of (I, II, III) type use the following tag:
<ol type=“I”>
Horizontal Line:
To insert a horizontal line on a webpage, use the following tag:
<hr>
Line Break:
To insert a line break on a webpage, use the following tag:
<br>
Computing for Business & Economics II 7
Following is the coding for a webpage on the Lahore School of Economics
<html>
<head>
<title> My First Page </title>
</head>
<body>
<body bgcolor="Yellow">
<h1> THE LAHORE SCHOOL OF ECONOMICS (<a
href="[Link] </h1>
<img src="[Link]">
<marquee bgcolor="Pink" behavior="scroll" scrollamount="7" direction="right"
onmouseover="[Link]();" onmouseout="[Link]();"> <b><a
href="[Link]
target="_blank">Admissions Open. Apply Now! </a> </marquee></b>
<p> Welcome to the website of the Lahore School of Economics - a distinguished seat of learning
known for high quality teaching and research. The Lahore School of Economics or “The Lahore
School” was established in 1993 and chartered by the Government of Punjab in January 1997,
through the Lahore School of Economics Act 1997 (Provincial Assembly of the Punjab- Act II of
1997).<br>
The Lahore School's academic programmes encompass Economics, Finance, Business
Administration, Social Sciences, Mathematics and Statistics, Environmental Sciences and Media
Studies, Art and Design. The School offers both Graduate and Undergraduate programmes within
specialized faculties, departments and research centres. With 135 full time faculty and 2700
graduate and undergraduate students, it is a leading academic institution of Pakistan.<br>
The Main Campus, spread over 35 acres, is located on the intersection of DHA Phase VI Main
Boulevard and Burki Road, Lahore. <br><hr>
<h2><ul>
<li><a href="[Link] target="_blank">
Vision </a> </li>
<li><a href="[Link] target="_blank">
Mission </a> </li>
<li><a href="[Link] target="_blank">
Values </a> </li>
<li><a href="[Link]
target="_blank"> Achievements 1997-2018 </a> </li>
</ul></h2> <br>
<h3> Academic Programs </h3>
<ol>
Computing for Business & Economics II 8
<li> Undergraduate Programs </li>
<li> MBA Program </li>
<li> Executive MBA (EMBA) </li>
<li> Post-Graduate Programs </li>
</ol> <br>
<h4> Scholarships </h4>
<ol type="I">
<li><b> Undergraduate Scholarships </b></li>
<ol type="a">
<li> Need Based Scholarship </li>
<li> Undergraduate Major Merit Scholarship </li>
<li> Undergraduate Minor Merit Scholarship for 2nd, 3rd and 4th Year Students </li>
<li> Student TA Ships </li>
</ol> <br>
<li><b> Graduate Scholarships </b></li>
<ol type="a">
<li> Need Based Scholarship for Lahore School Graduates for MBA Programme </li>
<li> Graduate Major Merit Scholarship for MBA Programme </li>
<li> Graduate Minor Merit Scholarship </li>
<li> Student TA Ships </li>
<li> Mahmood Chaudhry Scholarship </li>
<li> Executive MBA Programme </li>
<li> Graduate Major Merit Scholarship for Executive MBA Programme </li>
</ol> <br>
<li><b> Post-Graduate Scholarships </b></li>
<ol type="a">
<li> Major Merit Scholarship for PhD Programmes in Economics and Business </li>
<li> Major Merit Scholoarship for MPhil in Economics, Business Administration (Research)
Programmes </li>
<li> Major Merit Scholarship for MPhil Programmes in Environment and Development Studies
</li>
</ol>
</ol> <br>
<h5> Our Instructors </h5>
<table>
<th> ID </th> <th> NAME </th> <th> COURSE </th>
<tr><td> 001 </td> <td> Ms. Mehvish Umer </td> <td> Statistics I </td></tr>
<tr><td> 002 </td> <td> Professor Azmat </td> <td> Islamic Studies </td></tr>
<tr><td> 003 </td> <td> Ms. Hirra Rana </td> <td> Sociology </td></tr>
<tr><td> 004 </td> <td> Mr. Saad Shahid </td> <td> Marketing </td></tr>
<tr><td> 005 </td> <td> Ms. Ayesha Afzal </td> <td> Banking </td></tr>
</table> <br>
Computing for Business & Economics II 9
<p><b><i> Following table is with table formatting.</b></i></p>
<table border="1" bgcolor="Red" width="200" height="200" align="center">
<th> ID </th> <th> NAME </th> <th> COURSE </th>
<tr><td> 001 </td> <td> Ms. Mehvish Umer </td> <td> Statistics I </td></tr>
<tr><td> 002 </td> <td> Professor Azmat </td> <td> Islamic Studies </td></tr>
<tr><td> 003 </td> <td> Ms. Hirra Rana </td> <td> Sociology </td></tr>
<tr><td> 004 </td> <td> Mr. Saad Shahid </td> <td> Marketing </td></tr>
<tr><td> 005 </td> <td> Ms. Ayesha Afzal </td> <td> Banking </td></tr>
</table> <br>
<p><font face="arial" size="4" color="red"><i><b> How to add marquee in a
webpage?</font></b></i></p>
<p><h6> Marquee is applied on the following text and image with different behaviors!!! </h6></p>
<marquee bgcolor="white" behavior="scroll" scrollamount="7" onmouseover="[Link]();"
onmouseout="[Link]();"> <b><font face="comic sans MS" size="5" color="red"><a
href="[Link]
target="_blank">Admissions Open. Apply Now! </a> </marquee></b></font>
<marquee behavior="slide" direction="right" loop="10"><img src="[Link]"></marquee>
</body>
</html>
