, and to provide the structure and content for the web page
3. Including text, images, and a hyperlink within the HTML tags to build out the content of the web page
4. Explaining each HTML tag and how to properly write them to develop the web page structure and components">
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 file
2. Adding HTML tags like <html>, <head>, <title>, <body>, <p>, and <img> to provide the structure and content for the web page
3. Including text, images, and a hyperlink within the HTML tags to build out the content of the web page
4. Explaining each HTML tag and how to properly write them to develop the web page structure and components
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 ratings0% found this document useful (0 votes)
70 views
How To Make A Simple Web Page Using 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 file
2. Adding HTML tags like <html>, <head>, <title>, <body>, <p>, and <img> to provide the structure and content for the web page
3. Including text, images, and a hyperlink within the HTML tags to build out the content of the web page
4. Explaining each HTML tag and how to properly write them to develop the web page structure and components
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14
How to make a simple web page using HTML
How to Make a 2 Simple Web Page 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
2-1 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
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.
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 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>
<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">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>
<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">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">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 How to make a simple web page using HTML
Viewing the Web Page with the Web Browser
____________________________________________________________ To check and see if our HTML web page works properly go to Internet Explorer. Chose file/open and search for the file we saved as our HTML web page. Open the file.
Figure 2.12 – Viewing Our First Web Page in the Web Browser Once we chose our file and open up our HTML web page, the page should show the heading, graphic and text. If the page does not show anything or the looks funny, then there is an error in our code. Make sure we have all our brackets in the right place and that no code is missing a bracket. After we make our changes, save the HTML file again and view the page in the browsing application. We our page is error free, then we have just successfully made our first web page using HTML programming. * World Class CAD Challenge 15-5 * - Create an About Us web page in Microsoft Notepad or other similar software application that communicates adequately to your target audience. The web page should contain no errors. Complete this task in less than 60 minutes to maintain your World Class ranking. Send your best time and a copy of your webpage for verification to the authors of these problems to have your name, location and time posted. See the web site for instructions. www.worldclasscad.com
