Laboratory 1 – Week 1 An Introduction to Notepad++ and HTML

Laboratory 1 – Week 1
An Introduction to Notepad++ and HTML
1.1 Introduction
This is a short session to familiarize working with the Notepad++. You can use Notepad++ to create
different webpages, from simple webpage to huge website for big enterprises. Notepad++ supports
several languages. Running on the MS Windows environment. Here we are going to work with HTML.
1.2 Preliminaries
Make sure you have access to a certain directory to save your projects in.
1.3 Starting and Ending Notepad++
You can find out which edition of Notepad++ is right for you and can download Notepad++ from Notepad++
editions.
On the department machines, Notepad++ can be found through the following menus:
Start Button-All Apps – Notepad++
This program works similar to any other software product, i.e. you open up the program, and you then either
create a new page or load an existing page.
When you have finished, you exit Notepad++ by selecting File-Exit.
1.4 Notepad++
Page 1 of 7
The components of the Notepad++ that we will be working with are as follows:
a) Text editor window for writing and editing source code manually.
b) Run menu for running the code on the browser.
c) File menu for saving the webpage with extension filename.htm or filename.html
How to create a simple webpage?
a. Open Notepad ++ text editor and type the following:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. This text is bold 
</body>
<footer>
 This is my footer. 
</footer>
</html>
b. Save the file as mypage.html
Output in web browser:

Basic HTML Tags
Basic HTML Tags
<!DOCTYPE html>
<html>
<head>
<footer>
< body>
<h1> to <h6>

 
 be displayed like this.
Page 4 of 7
General Exercise:
Design webpage that outputs the following:
Page 5 of 7
Text editor
<!DocTYPE html>
<head>
<meta charset="UTf-8">
<title>
My Page Lab1
</title>
</head>
<body>


This is my first homepage 
 <hr/>


Today is Monday 17th of October 2016.



<cite> <h3>A Brief History of Time </h3></cite> by
Stephen Hawking has sold over ten million 
copies worldwide.



Water is H2O.


<blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh">
Did you ever stop to think, and forget to start again?
</blockquote>


As Salma said, <q>you always can, so never give up</q>



<abbr title="Professor">Prof</abbr>
Stephen Hawking is a theoretical physicist and cosmologist.



<acronym title="National Aeronautics and Space Administration">
NASA
</acronym>
do some crazy space stuff.



A <dfn>black hole</dfn> is a region of space from which nothing, not even light, can escape.
Page 6 of 7


<address>
 <a href="[email protected]"> [email protected] </a>
742 Evergreen Terrace, Springfield
</address
It was the <del>worst</del>

It was the <del>worst</del>
<ins>best</ins> idea she had ever had. 
Laptop computer: <s>Was $995</s> Now only $375
</body>

<footer>
 This is my footer. 
</footer>
</html>
1.5 Exercises
Design webpages that outputs the following:
a. Paragraph with 4 - 5 sentences. Each sentence should be a different font and
color.
b. Paragraph that is a description of a book, include the title of the book as well as
its author. Names and titles should be underlined, adjectives should be italicized
and bolded.
c. Ten acronyms and abbreviations of your choosing, each separated by two lines
and horizontal ruler. Specify the data that the abbreviations and acronyms
represent.
Page 7 of 7

Download Report

Laboratory 1 – Week 1 An Introduction to Notepad++ and HTML

Paperzz.com

Your Paperzz