CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS
The followingexercises
illustrate the process of creating and publishing Web pages with Notepad, which
is the plain text editor that ships as part of the Windows operating system. In addition to using Notepad,
you can complete this tutorial with any text editor that can save pl
ain text files.
To view the HTML files in your browser, simply click to launch them. To see the HTML code, use the
browser's View Source option.
I.
Start a Web page with Notepad
1. Open
Notep
ad
2. Type the following text:
<html>
<head>
<title>
My first Web Page
</title>
</head>
<body>
</body>
</html>
3. Sa
ve the file as myFirstPage.html in the folder called myWebsite.
Save As Type: All Files (*.*)
4. To display the web page, open
the web browser
.
Click File, and then click Open.
Click Browse button to search and
open the file myFirstPage.html
.
II.
Creating Headings and Paragraphs
1. If you do not have m
yFirstPage.htm
open, use Notepad to open it.
2. Position the cursor after the tag <body>. In the body type:
<h1> My First Web Page</h1>
<p>This is my first web page. I created this page with a plain text Notepad
.</p>
<p>You can make as many paragraphs as you want. There is no limit on creating
content this way.</p>
3. Save myFirstPage.html
and leave it open for the next set of steps.
4. If the browser is already open, click the refresh button to display the file myFirstPage.html;
otherwise, use the browser to open it.
2
III.
How to make Boldings and Italics
1. Continue working in the file myFirstPage.html.
Add italics to “plain text”
<em>plain text</
em>
2. Add bold to “no limit”
<strong>no limit</strong>
3. Save myFirstPage.html
and leave it open for the next set of steps
. View the file in the
browser.
IV.
Making Ordered and Unordered List
1. Continue working in the file myFirstPage.html.
Add an unordered list of few items
after
the second paragraph
<ul>
<li>Cerritos College
</li>
<li>
SEM division
</li>
<li>CIS department
</li>
</ul>
2. Save myFirstPage.html
and leave it open for the next set of steps. View the file in the
browser.
3. Change the unordered list to ordered list by changing the <ul> and </ul> to <ol> and </ol>
respectively.
V.
Creating Hypertext
Links
1. Continue working in the file myFistPage.html. Add the following paragraph that contains a
link to Cerritos College.
<
p>
I am taking the
“Web Design” hands
-on session at <a
href=
”http://www.dhdcmanur.in//index.html”>Cerritos
college
</a>with instructor Phuong Nguyen.
2. Save myFirstPage.html
and leave it open for the next set of steps. View the file in the
browser.
VI.
Putting Images on a
Web Page
1. Right after the body tag, add your image.
<img src=”images/
pnguyen.jpg
” alt=”Phuong’s picture”>
Leave a Comment