Build an HTML Web Page With Notepad on Your Computer Desktop
Browse articles:
Auto Beauty Business Culture Dieting DIY Events Fashion Finance Food Freelancing Gardening Health Hobbies Home Internet Jobs Law Local Media Men's Health Mobile Nutrition Parenting Pets Pregnancy Products Psychology Real Estate Relationships Science Seniors Sports Technology Travel Wellness Women's Health
Browse companies:
Automotive Crafts & Gifts Department Stores Electronics Fashion Food & Drink Health & Beauty Home & Garden Online Services Sports & Outdoors Subscription Boxes Toys, Kids & Baby Travel & Events

Build an HTML Web Page With Notepad on Your Computer Desktop

How to build web page? You can create an HTML web page using the tools and programs on your Windows PC, -no special programs are required. If you desire to register a domain and create your own site, you will need to create HTML pages to populate the site. While many hosting solutions have templates for this, you may instead opt for creating your own pages from scratch

Build a Web Page with HTML without a Special Program

Creating a HTML document, or 'building a web page," is fairly easy to do with a WYSIWYG software. WYSIWYG (pron. "Wizzy-Wig") is the expression used for "What You See is What You Get" software. It can produce a web document fairly quickly with point-and-click and text-drop features but these programs are quite limited in scope and abilities. Pages created using these proprietary programs tend to favor their own sponsor and can often look terrible in other platforms and other browsers.

WYSIWYG web creation software generally inserts a lot of proprietary (vendor-specific) code that mostly only works on their own or affiliated Operating Systems. Typically, programs written by or for Microsoft tend to be the biggest offender when it come to proprietary biased software, but other companies do it as well.

A good web browser should be 'Standards Compliant' and thus, display all pages the same even on competitor browsers and Operating Systems. "Standards Compliant" browser simply means that the browser adheres to a recognized set of non-proprietary 'standardized' rules created for HTML. While different browsers may not render the content 100% exactly the same in appearance, all the same content and features are equally represented and approximately the same.

If you create your own web document from scratch, it is likely to be free from proprietary code. The benefits of a Standards-Compliant web page document is that has a much smaller footprint and will load faster because it does not contain the platform-specific code. All features on the page will work the same to some degree for all browsers. A Complaint web document is compatible with any browser that adheres to the Standards Recommendations set forth by the World Wide Wed Consortium ("W3C".)

Let's Build a Simple Compliant HTML Web Page Document.

This is a 'long-hand' method to build a Standards Compliant HTML Web Page, free from proprietary code and without specific high-end software.

Anywhere on your computer desktop, right-click using your mouse pointer and create NEW - TEXT DOCUMENT in Notepad.

This is the Notepad text document utility. We use this program to write or 'code' our HTML page.

create a text document on your desktop

Be sure that you are using "Notepad" ("Text Document") and not "MS_Word" when you do this.

Notepad creates a file called "New Text Document" on your desktop, as seen in this thumbnail image.

new text document is created on your desktop Double-click this image icon which opens the blank Notepad text document, and type the following text tags exactly as shown below:

  •  
  •  

Recommended Tags in HTML

basic html tags

The recommended tags in HTML are html, head, title and body.

When a tag is called (opened, or created) it is said to be an opening tag. Whatever content it affects comes immediately after the opening tag. The 'opened tag' must be implicitly closed for the tag to be valid.

Note that the "" tags are 'nested' inside of the "" tags, and that the "" begins immediately AFTER the the closing-head-tag, and is itself 'nested' inside of the "" tags. These ordered rules are important.

Most tags in HTML require an implicit closing tag which is written exactly like the opening tag but with a forward slash in front of it, such as "</html>" This example would be called the 'closing HTML tag.'

The "" tag is very important for SEO ("Search Engine Optimization") searches as the text in the title tag is usually what is displayed in the returned results. The TITLE text is possibly the most important text on the entire document as far as indexing and SEO of the document are concerned. Therefore, you want good strong dative text using at least two 'keywords' that define your entire document.

You want the TITLE text to be relatively short too, -usually 60 characters or less. Most social and SEARCH sites only display the first 60 letters of the TITLE and if there are any more than this, the title is truncated (not displayed.)

So for good SEO, keep the TITLE shorter than 60-characters in length; you want the entire TITLE tag visible and displayed on all user-agents (monitors, hand-held devices, cellular, etc.) Use optimal wording too. Avoid the non-specific words like "Welcome to my..." or "This is my..." to begin your TITLE tag. These are superfluous words that your SEO-strong web page does not need. If the HTML document you are writing is about how to build a web page in HTML, the TITLE tag should explicitly say so, such as:

How to Build a Web Page in HTML

This TITLE tag is just 24 characters in length (31 including white-spaces.) It is concise, direct, and to the point. You have no doubt what the rest of the page is about. Anything more ("Welcome to my..." or "This is my...", etc.) is just 'keyword dilution' of your most important tag, the TITLE.

Anyone doing a SEARCH using the phrase "How do I build a web page in HTML?" or anything similar should be shown your page high-up in the returned results.

Enter the TITLE Text, and next create the Six HEADER Tags Incrementally 1-6

add the title and heading tags

"Heading" or "Header" tags in HTML consist of numerical integers, h1 - h6.

The First Header ("") is probably the SECOND-most important element on your web document after the "TITLE." It should emphasize or reiterate the meaning of the TITLE. Again, for SEO you want a strong TITLE and equally strong First Header. (For the sake of this tutorial however, the Header tags are merely labeled by their number.)

After the First Header comes the Second Header, which is a subset of the first header, and so forth. You may not need to use all six headings but they are included here for demonstration purposes.

Whatever paragraph ("") text we add below each Heading is like the chapter text in a book with the associated Heading preceding it as the chapter's title. Each Heading should roughly sum-up the paragraph(s) to follow. Use of Header tags make the document more indexable, and greatly aids user-agents for the Handicapped (Accessibility s.508) such as for use in tabbed-content browsing (no mouse or pointer-tool for navigability,) fortopicand section delineation as used in text to-speech, text-to-braille user-agents, etc.

Not everyone accesses your HTML document ("web page") using a visual monitor, keyboard and mouse. So in regards to the use of Headers tags for SEO and Accessibility: please include them in your content.

After the First Heading Tag, add the First Paragraph Tag and some Sample Text

add text to the paragraph tags just below the First Header

"Lorem Ipsum Dolar" is '...a nonsense paragraph sometimes used to demonstrate a font. (1)'  It was first used by printers (of hard-copy) and now, by web authors. People tend to spend more time reading and analyzing the copy text than looking at and approving of the font used, which was its intent.

Here, the short snippet of "lorem ipsum dolar" text is used exactly for this reason; to demonstrate 'visual content' but with no real meaning. It is just used as a space-holder.

We now have enough basic layout and some simple content on the Notepad document to go ahead and create an HTML file. In the creation of web pages, the first or 'main page' of a web is always named "index.html" no matter what. Other pages can have whatever name you wish, but the first page searched is always "index" (the extension ".html" is typically not shown, but it is there.) So let's name this text document "index.html" and create our first web page.

On the menu bar at the top of the Notepad document, click "FILE - SAVE AS." A menu appears. At the bottom of the window that pops-up are three text fields, populated with the default text. We need to change the first two lines.

naming the HTML file in Notepad so we can SAVE it as an HTML-file

  1. In the first text field where it says "New Text Document" change it to "index.html" (Note the period between "index" and "html" this is required)
  2. In the middle or second text field, click the drop-down arrow and select "All Files"
  3. The third text field you can probably leave as-is (whatever your default setting already is.) This one of several options (ANSI, Unicode, Unicode big endian, UFT-8, etc.)
  4. Next, Click SAVE

The Notepad text-document is SAVED as an HTML file to your Desktop or wherever you SAVE files to ("My Documents,", etc.)

Here is the HTML Document we Created and Saved

index.html icon image as it will appear on your computer Desktop

The icon that is generated is an HTML document of your default browser (mine is Firefox; your default browser can vary so the image will be different for users of other browsers.)

Locate the file "index" that you saved. This is a genuine html document. When you double-click this icon, it launches the default browser and displays the simple web document that we created.

A Simple Web Page That We Built

a web page

Here in this partially-minimized browser window we see the actual HTML web document that we just created. The size and spacing of the Headers and paragraph text is controlled by settings in your browser's chrome, or shell. These can be overridden by the use of a STYLESHEET dedicated to the HTML-document. This stylesheet would take precedence over the browser's 'factory setting' your browser uses although users at home can set their browser to 'force' their preferred settings over the ones that you, the web page builder, provided. Most people however are not even aware of this ability and option that browsers have and therefore, see what the web page builder provided.

The default settings of a browser's chrome or shell are more than just arbitrarily chosen; they are to provide visually-handicapped persons with content that is highly visible and easier to read. That is why, to put it simply, we do not typically see light gray text over a black background but instead see black text ("foreground") over a white (or nearly white) background color. Some settings in a browser's chrome are hard-set can cannot be altered, such as the width (and colors) of the scrollbars (although early versions of the browser OPERA permitted users to change the color of the scrollbars in HTML documents.) This is not advised lest we get user-defined scrollbars that are color-invisible ("inaccessible") to colorblind persons. Such would be the situation with green scrollbars on a blue background; the navigation device (the scrollbar) would be factually 'invisible' to the visually handicapped.

In a HTML document, the font-style, colors, margins and padding, widths, heights, text size, letter-spacing and a host of other characteristics can be changed to really add character to this very simple and plain web page. The insertion of more text, images, links and other elements can greatly expand the overall appearance and attractiveness to the page. This was only the very beginning of what can be done with HTML.

Best of all, this will look identical (or nearly identical) on all browsers because it was built to Standards Compliance without the use of proprietary code.

Need an answer?
Get insightful answers from community-recommended
experts
in Web Design & Development on Knoji.
Would you recommend this author as an expert in Web Design & Development?
You have 0 recommendations remaining to grant today.
Comments (6)

Nice article, I'm going ta try that right now!

That's a great tutorial on html. Clear and straightforward.

Thanks Stickman.

Really nice graphics too! I love playing with bits of code :D - thanks Stickman

I'm looking forward to return to this post when I have to build my website. Well presented my friend.

Great directions, I might just need to use this one day. :-)

ARTICLE DETAILS
RELATED ARTICLES
RELATED CATEGORIES
RECENT SEARCHES ON KNOJI SHOPPING