Embed Size (px)
Citation preview
Making an HTML Document
Notepad Group
Bo Kim
Dan Carter
Han Chong
Justin Weaver
Kris Lamont
Introduction
• Is available to all Windows OS users (in our case, it is available to UMBC students).
• Is used to edit a wide range of file types including .txt, .xml, .html, etc.
• Is a very basic text editor which does not have a wide range of features.
Tutorial Information
• The following tutorial will explain how to create a very basic web page using Notepad.
• To create this webpage you will need an image file (we suggest downloading the w3schools image from http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_basic_img).
Opening Notepad
• From the Windows Start Menu click: Start > Programs > Accessories > Notepad
Condensed HTML Introduction• In order to create webpages in Notedpad, there are a few HTML tags
which are required. The following is a short description of each of these tags:– <html> Begins your HTML document. – <head> Contains information such as the title of the web page,
style specifications, and possibly JavaScript code for special effects on the webpage.
– <title> Specifies the title of your webpage.– </title> Closes the title tag (every open tag must have a close)– </head> Closes the head tag– <body> Contains the primary content of your webpage.– </body> Closes the body tag.– </html> Closes the html tag and indicates the end of your
webpage.
Adding Code to Notepad• Since this is not an HTML tutorial, we will provide code for you to enter into Notepad.• You may either copy the code from this tutorial or manually type it. We highly
suggest copying so there are no errors in your code.• To copy code, highlight it and right click. Select the copy option from the drop down
list.• To paste code into Notepad, click the Edit Menu and select Paste.
Example Code to Copy
<html>
<head>
<title>Title Goes Here</title>
</head>
<body>
<h1>Heading Goes Here</h1>
<p>Paragraph goes here.</p>
</body>
</html>
Result After Pasting Code
Adding Content to your Code
• For this example, we will explain how to add an image to your web page. The file that we will be using is named “w3schools.jpg”, but you may select any image that you wish to place on your webpage.
• Click after the </p> and press the enter key (you should see a new blank line).
• Type the following:<img src="w3schools.jpg" width="104" height="142" />
• Note: If you select to use a different image, replace w3schools.jpg with the name of your picture file. You will be able to find the width and height in the image properties.
Result After Inserting Image Code
Saving Your Code
• Go to File->Save As and name your file something meaningful (For Example: main.html)
• Make sure you include .html after the file name when you save it. (mypage.html)
Running Your Code
• After you’ve saved everything correctly, it’s time to see your masterpiece.
• Navigate to where you saved your file and double click on the file icon. It should appear your work in a web browsers window.
Conclusion
• Notepad has very basic features that can be used to edit and modify many different file types.
• Notepad can be used to create full HTML pages in a few easy steps.
• Notepad is a versatile tool which all Windows users have access to.
Works Cited
"HTML Tutorial - Free HTML Code Tutorial - Simplest Ever." Clickfire - Web Reviews and How To's for Website Owners, Bloggers and Social Media Users. Web. 03 Apr. 2011. <http://www.clickfire.com/simplest-ever-html-tutorial/>.
"Tryit Editor V1.4." W3Schools Online Web Tutorials. Web. 03 Apr. 2011. <http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_basic_img>.
