You have now inspected the actual source code for a web page and you have seen how some basic tags work. It is time to try writing your own source code.
You need to use a basic text editor. The directions for this lesson will assume you are using Notepad.
It is important to be able to edit the raw code, even if you usually use a high-end WYSIWYG editor. Sometimes the automation built into these high-end editors is not quite as smart as you wish it was! You will find that you do have to do some things yourself. So it makes sense to get comfortable with working directly with the HTML code.
Step-by-Step: Create a Page
|What you will learn:||to create a simple HTML document
to view HTML document in a browser
to print from the browser
to view source code from the browser
to open source code in Notepad
to edit the source code
to inspect source code of live web page
Before you type in the text of the page, you need to create the basic parts of an HTML document. Then you can start entering your headings and paragraphs.
<title>Simple page - your name</title>
Don't forget these basic page parts. Type these required tags (both opening and closing tags) when you first start your document so you won't forget them. It is especially easy to forget the closing tags.
DOCTYPE: This tag tells the browser to use the HTML5 rules to interpret your code. There are many other doctype declarations out there for older standards. If you need to use an older doctype, be very careful with the spelling and punctuation! Otherwise, older browsers may get really confused and not use the standard you expected.
TITLE tag: The text in the
<title> tag is shown in the browser's title bar or
page tab and not
on the web page itself. It will also be used as the name for the
shortcut to the page in Favorites/Bookmarks if you bookmark the page.
Use a TITLE that makes it clear what the page is about. Avoid titles like "Welcome to my Home page" and "Home page" which do not give any information at all.
A search engine's list of results uses your title. The title strongly affects how your page is ranked by some search engines. Make sure the title describes the page accurately.
</body>tags the following lines to create a heading and 3 paragraphs:
<p>To create this page is easy. </p>
<p>To view the source code, right click on this page and select View source or similar command.</p>
(Your text may wrap differently depending on the size of the window and whether Text Wrap is turned on or off.)
Closing P tag: The
does not actually require a closing
under HTML standards. But it is a good idea to include the
closing tag. Without the closing tag, in complex pages you sometimes get unexpected
formatting of later text.
The folders in the path should already exist if you have done the previous lessons. If they do not, you will need to create them.
File Extension: An HTML document must use an extension that browsers recognize. The most common extensions are .htm and .html. Pages that are generated by the server may have a different extension.
To see what you have created, you must view the document in a browser.
The page displays using the default fonts for your browser.
Notice the title on the tab and the file name in the Address bar.
You learned to print from your browser in Browser Basics: Printing.
Always preview before printing: It may take a lot more sheets of paper than you think. Parts may not fit on the page.
The illustration shows the print preview from IE. The header and footer are arranged differently in Chrome and Firefox. Your browser should still have the settings you made in Browser Basics: Printing. Chrome does not yet [June, 2016] allow changes to what prints in the header and footer.
Be sure your own name is in the Title instead of the words "your name". The TITLE text will print in the page header, by default.
Some old browsers opened the source code in Notepad. Current browsers open the source code in a new browser window or in a pane. You cannot edit code when you view source code. The old way was better for a web page author!
Problem: Some of the lines of text extend
out of view to the right in the window
Solution: Resize the window or turn on text wrapping.
Page Source: You can always view the source code for any HTML page that you can view in your browser. This is a good way to learn about writing HTML pages. When you see a page that does something interesting, look at the source code to see how it was done.
Some actions, like scoring quizzes, may be handled by the server that hosts the page, using a server-side script. You will not be able to see how those actions are managed.
Pages that include advertising will also have seriously messy-looking source code.
A browser window that shows the source code will not let you edit, only copy and paste somewhere else. Not fun! You cannot save changes back to the web server unless you have the username and password.
You will have to open your source code in a text editor to make changes.
Right click on simple-Lastname-Firstname.htm and from the context menu select
The menu expands to show programs installed on your computer that can open an HTML file.
The menu includes browsers, which will not let you edit the page!
probably have different items on your list than what is in the
Now you get to practice editing the code.
<p><b>I</b> wrote <i>this</i> page.</p>below the line
Location of saved file: Be careful to check where you are saving your page. The last location you used will usually be remembered. Is that where you want this file to go?
The page that you just wrote is truly simple. What's out there on the Web is not usually that simple!
Navigate to a page that looks complex like a shopping site, a news page, or a social networking page and view its page source.
The example here is from Amazon. The main image rotates through three different images. The black bar in the middle greets you by name if you have an Amazon account and reminds you of current orders. Is that good or creepy?
It is easy to get your closing tags out of order when tags are nested inside other tags. Let's go over this concept again...
Rule on Nesting: Nested tags must be closed in reverse order from how they were opened.
Example: To display the following sentence- This is hard!
<p>This is <b><i>hard!</i></b></p> Closed in opposite order as opened
<p>This is <b><i>hard!</b></i></p> B
and I closed
in the same order as opened.
<p>This is <b><i>hard!</p></i></b> P tag closed before the B and I elements closed.
<p>This is <b><i>hard!</p></b></i> All closed out of order.
Browsers try to help: Your browser will try to figure out what you should have written, but some browsers (the old Netscape in particular) may not be as forgiving. Even in helpful browsers bad nesting can sometimes make parts of the document disappear!