Scribd
Upload
45 views

Year 6 - AP3 - Computing - Week 4 - HTML

The document provides instructions for making a simple web page using HTML by: 1. Opening a text editor like Notepad to create the web page code. 2. Structuring the HTML code with tags like <html>, <head>, <title>, and <body> to define the basic page elements and add a title. 3. Adding content like images, paragraphs of text, and hyperlinks within the <body> section using tags like <img>, <p>, and <a> respectively.

Uploaded by

Ohio Citizen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

Year 6 - AP3 - Computing - Week 4 - HTML

The document provides instructions for making a simple web page using HTML by: 1. Opening a text editor like Notepad to create the web page code. 2. Structuring the HTML code with tags like <html>, <head>, <title>, and <body> to define the basic page elements and add a title. 3. Adding content like images, paragraphs of text, and hyperlinks within the <body> section using tags like <img>, <p>, and <a> respectively.

Uploaded by

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

How to make a simple web page using HTML

WEEK 4

How to Make a 2
Simple
Computing
Name:
Web Page
Spring-1 (AP-3)

using
Year : HTML
How to make a Simple Webpage using HTML
_____________________________
In this chapter, we will learn the following to World Class Web
standards:

1. Opening Up a Text Editor to Create a Web Page


2. Starting a HTML Web Page
3. Adding a Header to the Web Page
4. Adding a Title to the Web Page
5. Adding the Body to the Web Page
6. Adding an Image to the Body of a Web Page
7. Adding a Paragraph to the Body of the Web Page
8. Adding a Hyperlink to the Body of the Web Page
9. Defining the Font Style and the Text Size in the Web Page
10. Closing the HTML Web Page
11. Saving the HTML Web Page
12. Viewing the Web Page with the Web Browser

Prepared by: Ustaz Md. Roysul


2-1 Islam
How to make a simple web page using HTML

Opening Up a Text Editor to Create a Web Page


____________________________________________________________
In this chapter, we will learn how to make a simple web page called “About Us” using
HTML without all the long boring reading we have to do to get there. We are going to
show what to do and we will see for ourselves that making a HTML web page is not
hard at all.
The good thing about using HTML is that we can build a web page without having to
use an expensive application program to build one. All we need is to have Microsoft
Notepad or any other text editor that comes standard on our computer. Notepad is
where we will enter our code in HTML to build our first web page. Then we can view
information using our Internet Explorer application or other web browser on our
computer by just opening our file.
Begin by opening up Notepad by clicking the Start button on our desktop and choosing
Programs/Accessories/Notepad as shown in Figure 2.1.

Figure 2.1 – Starting Up the Microsoft Notepad Application

2-2
How to make a simple web page using HTML

Starting a HTML Web Page


____________________________________________________________

Tag Name Description


html Hyper Text Meta Language Begins a HTML document
Example Start Tag End Tag
<html> <html> </html>
<head></head>
<body></body>
<\html>
Now we will be enter the HTML code into Notepad. The first thing we want to type into
the page is <html> as shown in Figure 2.2. When we make an HTML web page we
always have to start out with <html>, which is the Hyper Text Meta Language (HTML)
start tag, or we will not get our web page to come out right. Begin by typing an open
angle bracket < then the text html, and then the close angle bracket >. The web page
commences with a start tag and will end with the </html> end tag.

Figure 2.2 – Starting to Type the HTML Code in Notepad


We need to make sure we type the code correctly as shown in this chapter, because if
we even miss a bracket or misspell the function name, the web page will not run
correctly in the web browser. The code <html> identifies an HTML document. It is very
important that we type <html> first. After we type this code press Enter on the keyboard
to proceed to the next line of the code.

2-3
How to make a simple web page using HTML

Adding a Header to the Web Page


____________________________________________________________
The next code we want to type in Notepad is <head>. Type this under the code <html>.

Tag Name Description


head Header Contains header
information not visible
inside the web page
Example Start Tag End Tag
<head> <head> </head>
<title>My First Web Page>
</title>
</head>
The code <head> indicates a documents header. After we type this code, press the
Enter button and type <title> under the <head> code.

Figure 2.3 – Typing the <head> Code After <html>

2-4
How to make a simple web page using HTML

Adding a Title to the Web Page


____________________________________________________________

Tag Name Description


Title Title Places the web page title
in the Title Bar in the Web
Browser
Example Start Tag End Tag
<head> <title> </title>
<title>About Us</title>
</head>
The <title> code identifies a document to the users. This is where we can put a
designation of our web page. After we type the <title> code, type About Us. This will be
the title of our HTML web page. Right after we type our heading, we will need to close
the title code. To do this type </title> after the words, About Us. This is all done on the
same line as shown below in Figure 2.4.
Next, press the Enter button on our keyboard. Type the code </head>. This code means
that we are now closing the head of the web page. Go ahead and press the Enter
button on our keyboard to proceed to the next line of the code.

Figure 2.4 – Adding the Title to the Web Page

2-5
How to make a simple web page using HTML

Adding the Body to the Web Page


____________________________________________________________
Next, we will need to type <body> to define the documents body. We must type this
code to be able to place banners, graphics and, or text of our web page. Go ahead, type
the <body> code, and press the Enter button.

Tag Name Description


Body Body This is the area of the web
page that will contain the
graphics, text and forms
Example Start Tag End Tag
<head> <body> </body>
<title>About Us>
</title>
</head>
<body>

Figure 2.5 – Adding the Body to the Web Page

2-6
How to make a simple web page using HTML

Adding an Image to the Body of the Web Page


____________________________________________________________
After that we will add the banner to the top of the page with the image <img> tag. Now a
web page or HTML computer file does not contain images like a word processing file,
where the graphic actually is located inside the computer file, but the HTML source
code calls to the web server to transmit the separate image file to our computer. For the
About Us web page, we made a banner that is 900 pixels wide by 75 pixels tall. We will
insert the Ohio Digital Art banner by typing <img src="images/banner.jpg" width="900"
height="75"> at the start of the HTML body of the web page. Notice that the
compressed JPG graphic called banner is in a folder called image. There is a forward
slash between the folder name and the file name. The image banner.jpg will have to be
located in a folder called “images” in our Ohio Digital Art web page folder. Following the
name of the image and the graphic’s location, we have the width and the height of the
picture in pixels.

Tag Name Description


img Image Insert an image
Example Start Tag End Tag
<head> <img >
<title>About Us</title>
</head>
<body>
<img
src="images/banner.jpg"
width="900" height="75">
</body>

Figure 2.6 – Adding an Image to the Web Page

2-7
How to make a simple web page using HTML

Adding a Paragraph to the Body of the Web Page


____________________________________________________________
The next code we will type is paragraph <p> code. This code lets us make paragraphs
for our web page.

Tag Name Description


p Paragraph Starts a new paragraph
Example Start Tag End Tag
<head> <p> </p>
<title>About Us</title>
</head>
<body>
<p>About Ohio Digital Art</p>
</body>
After we type the <p> press the Enter button and type: About Ohio Digital Art and then
press the Enter button. Then to close our paragraph, we type </p> to close the
paragraph as shown in Figure 2.7. Then press the Enter button.

Figure 2.7 – Adding Text to the Web Page

2-8
How to make a simple web page using HTML

Adding a Hyperlink to the Body of the Web Page


____________________________________________________________
On our first page we will have a single link that will take us to the Ohio Digital Art home
page. We call the hyperlink, Home and the name of the homepage file is index.html.
When we want to create a hyperlink, we use the a tag. We begin this line of code with
the <p> tag After the <p> and before Home, type <a href="index.html"> where we will
reference the web page called index.html. Both web pages will be in the same folder or
we would have to add a folder name with a forward slash before the web page name.

Tag Name Description


a Hyperlink Create a link to a web
page
Example Start Tag End Tag
<head> <a> </a>
<title>About Us</title>
</head>
<body>
<p><a href="index.html">
Home</a></p>
</body>

Figure 2.8 – Adding a Hyperlink to the Web Page


For the next part of the project, we will write a short biography of our professional
experience. For our example, we wrote a short summary of William Andrew, a fictional
employee of Ohio Digital Art.

2-9
How to make a simple web page using HTML

Here is our sample biography:

At Ohio Digital Art, is William Andrews, who has been designing products for a myriad
of organizations since 1970's. He also is constantly supervising and teaching with over
Unity Heights Sample Products
500 designers and engineers since 1990

Military Products:

Designing and implementing military Ballistic Computation system

Energy and Power Products

Contributing to the design of electric pump motors


Designing and building passive solar collectors
Designing thousands of parts and assemblies for airfield systems
Designing and marketing the high efficiency switchgear system

Transportation Products

Designing car parts for multiple car manufacturers


Developing major components of an airport traffic control system

Commercial and Residential Projects

Home designing houses for residential applications


Designing and building multiple church expansion projects
Designing products and tools for efficiency building company

Software Projects

Design and programming of manufacturing testing equipment


Supervising the design and contributing to hundreds of software applications

Art

Programs for graduations and other ceremonies


3D graphics and Flash animations for advertisements

Web Projects

Web programming and design


Supervising the design and contributing to hundreds of professional websites

2-10
How to make a simple web page using HTML

Defining the Font Style and Size of the Text in the Web Page
____________________________________________________________
For our webpage, we choose an Arial font and a HTML font size of 2. We use the font
tag to accomplish this task. After opening a paragraph <p> and typing <font, we type
face=”Arial” to assign the font and after a space, we add size="2">. After typing the text
we want, close the paragraph with a </font></p>.

Tag Name Description


font Font Define font style and size
Example Start Tag End Tag
<head> <font> </font>
<title>About Us</title>
</head>
<body>
<p><font face="Arial"
size="2">Ohio Digital
Art</font></p>
</body>
In Figure 2.9, we see the paragraph from the biography

Figure 2.9 – Placing a Paragraph in the Body of the Web page


When we need an extra line, we can use the <br> tag to add a line break. This function
comes in handy when we are trying to get our page to look better.
After keying in all of the biographical text, type </body> to close the body of our web
page.

2-11
How to make a simple web page using HTML

Closing the HTML Web Page


____________________________________________________________
Press the Enter button and type </html> to close the HTML web page.

Figure 2.10 – Closing the HTML Code


The entire solution for our About Us webpage is shown below.
<html>

<head>
<title>About Us</title>
</head>

<body>

<img src="images/banner.jpg" width="900" height="75">

<p>About Ohio Digital Art</p>

<p><a href="index.html">Home</a></p>

<p><font face="Arial" size="2">At Ohio Digital Art is our lead digital artist, William Andrews, who has been designing products for
a myriad of organizations since 1970's. He also is constantly supervising and teaching designers and engineers since 1990
</font></p>

<p><font face="Arial" size="2"><b>Military Products:</b></font></p>

<p><font face="Arial" size="2">Designing and implementing a military Ballistic Computation system </font></p>

<p><font face="Arial" size="2"><b>Energy and Power Products</b><br>


<br>
Contributing to the design of electric pump motors<br>
Designing and building passive solar collectors<br>
Designing thousands of parts and assemblies for airfield systems<br>

2-12
How to make a simple web page using HTML

Designing and marketing the high efficiency switchgear system</font></p>

<p><font face="Arial" size="2"><b>Transportation Products</b><br>


<br>
Designing car parts for multiple car manufacturers<br>
Developing major components of an airport traffic control system</font></p>

<p><font face="Arial" size="2"><b>Commercial and Residential Projects</b></font></p>


<p><font face="Arial" size="2">Home designing for residential applications in 3D CAD<br>
Designing and building multiple church expansion projects<br>
Designing products and tools for efficiency building company</font></p>
<p><font face="Arial" size="2"><b>Art</b></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="2">Programs for graduations and other ceremonies<br>
3D graphics and Flash animations for advertisements</font><br></p>

<p><font face="Arial" size="2"><b>Software Projects</b></font></p>


<p><font face="Arial" size="2">Design and programming of
manufacturing testing equipment<br>
Supervising the design and contributing to hundreds of software applications</font></p>

<p><font face="Arial" size="2"><b>Web Projects</b></font></p>


<p><font face="Arial" size="2">Supervising the design and contributing to hundreds of professional
websites</font></p>

</body>
</html>

Saving the HTML Web Page


____________________________________________________________
Next, we will want to save our work. Chose file and then save. To save an HTML web
page save the file as about_us.htm. We must make sure we save our work in this
format so we can view the page on a web browser like Internet Explorer. Look at Figure
2.11 below to see how to save our HTML page.

Figure 2.11 – Saving our First Web Page to the Basic HTML Folder

2-13

You might also like