1 / 14

Making an HTML Document

Notepad Group. Making an HTML Document. 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.

binah
Download Presentation

Making an HTML Document

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Notepad Group Making an HTML Document Bo Kim Dan Carter Han Chong Justin Weaver Kris Lamont

  2. 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.

  3. 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).

  4. Opening Notepad • From the Windows Start Menu click: Start > Programs > Accessories > Notepad

  5. 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.

  6. 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.

  7. 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>

  8. Result After Pasting Code

  9. 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.

  10. Result After Inserting Image Code

  11. 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)

  12. 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.

  13. 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.

  14. 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>.

More Related