Basic Notepad Coding

Posted on  by

A website is simply a collection of web-pages. A web page or web documents written in HTML (HyperText Markup Language). These Web pages can be viewed using any web browser and Internet.

Html Language is used to write code and programs to create a webpage. It is easy to create a webpage and you can learn it with few basic steps mentioned below:

Basic Notepad Coding

HTML Program or page can be created by many HTML or Text Editors. These editors are software that help us writing our code with easy user interface. Today, we will see how to create a html or webpage using Notepad Editor.

In this post, you are going to learn to make a basic notepad app. This is a great project to get to grips with because it will lend itself to a range of alternative uses as similar concepts can be. Now we discuss the code for Open Function.The openfiledialog control is used in the code.The main Function of Openfiledialog control use to browse data from the computer. So whenever the open option is clicked it will browse Data from the Computer and displays the selected file in notepad. Basically batch is a scripting language which works in windows, DOS and OS 2 platform and can be programmed in notepad or simply in windows Command Prompt Shell. It Consist of simple commands to be executed by command line interpreter. The file extension type of batch program is “.bat”. Simple Example Of Batch Program. Create Diary on Notepad. This Notepad trick will allow you to create Notepad note in such a format. Doing so turns your current Notepad document into an HTML document. At this point, you can proceed with setting up your webpage's initial structure. If Notepad inadvertently closes or you have to come back to your document later, you can right-click the HTML file and then click Edit in the resulting drop-down menu.

Notepad editor is built-in text editor in Windows Computers. You can find similar editors in Mac and Linux Operating system as well.

There are many advanced HTML editor or software are also available. However, we will recommend using default and simple editor like notepad for the beginners. That is always a good way to start learning HTML.

Creating a Simple HTML Page using Notepad Editor

Follow the four steps below to create your first web page with Notepad.

Step 1: Open Notepad (Windows)

Windows 8 or later:
Open the Start Screen and Search (Type Notepad)

Windows 7 or previous Windows:
Open Start > Programs > Accessories > Notepad

Step 2: Create a New Document

Go to Notepad Menu: File > New

A New blank document will be opened and you can start writing your first HTML Program here.

Step 3: Write Some HTML code or Program

Write some HTML code. If you do not know about HTML Yet, read few chapters in HTML Tutorials Section.

Write your own HTML code or simply copy the following HTML Simple Program into notepad document.

Step 4: Save the HTML Page

Go to Notepad Menu: File > Save (or use short-key CTRL + S)

It will ask you to Save the file on your computer. Give it a name with .html extension and Save it (for example program.html)

Note: HTML page should be saved with .html extension carefully.

Step 5: View the HTML Page using Browser

Web browsers are programs or software that are used to view Webpages/Websites. You can find Internet Explored by default if using Windows Computer machine. You can also download other popular web browsers such as Google Chrome or Firefox. Use any of them.

Now Simply, open the saved HTML file in any browser:
Double click on the file or right-click on the file and choose “Open with” option to select other browser.

You HTML File will be opened in web browser and it will show output based on your html program.

Congratulations if you are able to run your first HTML Program.

You can now learn more about HTML Tags and create more HTML web pages. Using these HTML Pages, you can easily create your own website as well.

Tutorials
HTML Page Structure
Exercises & Assignments
Steps to Create a Webpage in HTML using Notepad
Write an HTML program to display hello world.
Interview Questions & Answers
No Content Found.

The first tag in any HTML file is the <HTML> tag. This tells web browsers that the document is an HTML file.

The second tag is a <HEAD> tag. Information between the HEAD tags doesn't appear in the browser window, but is still important. It is called meta information. The most important meta information in the HEAD tag is the <TITLE> tag. All HTML documents must have a title. Generally, the title should reflect the contents of the page (like a book's title reflects the contents of the book), so you will be changing this title to better describe whatever sort of web page you are creating. The document title will appear in the title bar (the bar at the top of your browser window). Look up at the top of your browser window right now. It says 'basic html tags'. The title text doesn't show up in the main browser window (where the text you are now reading is located).

Basic

The true content of your web page starts after the HTML, HEAD and TITLE tags. It is contained inside the <BODY></BODY> tags.

So the basic skeleton of every web page looks like this (the tags will always appear in this order) and you will have one only of each of these tags on your web page):

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Notice that all the tags have these < > around them? These brackets tell the browser that the text inside the brackets is to be read as an HTML command. Look at <HTML> and </HTML>. Do you see the difference? The first one, <HTML>, has no / (forward slash). It is the opening tag. The second one, </HTML>, has a / (this is called a forward slash). It is the closing tag. You need to be very careful about closing your HTML tags.

There are very few HTML tags that don't require a closing tag, so be sure you get into the habit of closing your tags.

Now we are ready to start creating the true content of the web page by putting information between the <BODY></BODY> tags. Generally, the first line of an HTML page will be a HEADING tag. If you think about a HEADING as part of an outline of a document, the first HEADING (<H1></H1>) tag is roman numeral one, a second level heading (<H2></H2>) would be roman numeral two, and so on. In most cases, the first heading on a web page will be the same as, or similar to, the document title to let people know right off what the page is about.

<H1> is the largest size heading, which you would normally use at the start of a document. <H6> is the smallest, with <H2> to <H5> of varying sizes in between them.

This text is an example of an H1 heading

Coding Notepad Online

here is the HTML for this: <H1>This text is an example of an H1 heading</H1>

This text is an example of an H6 heading

here is the HTML for this: <H6>This text is an example of an H6 heading</H6>

Always remember to CLOSE your HTML tags!

Style Elements:

When we talk about style elements in HTML, we mean tags that affect the appearance of the text on a page. That can mean how the text is spaced, and also how the text looks.

Page formatting tags:

These tags affect how the text is spaced on a page:

<P> </P> - Paragraph. Inserts an empty line (it's like double-spacing in word processing).

The spaces between this line and the line above and below are examples of paragraph tags.

<HR> - Horizontal line. Useful for breaking up sections of your page. Creates a shadowed line across the page. The shadowed line you see below this text is an example of the <HR> tag. The <HR> tag is one of those exceptions I mentioned, and doesn't need a closing tag.
<BR> - Line break. Doesn't insert a space between lines, just forces a break between lines of text. TIP: if you want to create blank lines on your page, use multiple <BR> tags, not the <P> tag as the browser only sees the first <P> tag and ignores the others but sees and creates a line break for all <BR> tags.
The space (or lack of it, actually) between this line and the line above it is an example of a line break. The <BR> tag doesn't need a closing tag.

Text style tags:

Text style tags affect the appearance of text on a page. You already know about text style tags as you use them all the time in word processors like MS Word. When you select text and click on the B button in MS Word your text turns bold, right? HTML works the same way, but we need to use HTML tags to tell the browser what text style to use.

The two most useful text style tags are:

Basic Notepad Coding Test

<B> ... </B> - Bold
<B>Example of bold text tag.</B>
<I> ... </I> - Italics
<I>Example of italicized text tag at work.</I>

Remember: you have to CLOSE the text style tags just like you have to close heading tags.

Now let's start the actual building of a web page.

To begin your page:

  1. Open Notepad (it is usually found from the Start button, under Programs in the Accessories folder). Mac users: open TextEdit or SimpleText.
  2. Create your 'template' (basic page) which must contain the tags we discussed at the beginning of this section by typing the following HTML tags that make up the structure of every web page.
<HTML>
<HEAD>
<TITLE> XYZ Library </TITLE>
</HEAD>
<BODY>
<H1>XYZ Library</H1>
The actual content of your page will go between the opening and closing BODY tags. Everything before the <BODY> is information that describes your document to web browser and server software. It doesn't appear in the browser window.
</BODY>
</HTML>

TIP: If you are comfortable copying and pasting, you can copy and paste the tags into Notepad. To copy and paste on a PC:

  1. Take your mouse and place your cursor at the beginning of the text, click the left mouse button then pull your mouse over the text. This highlights the text.
  2. Release the left mouse button.
  3. With the cursor over the highlighted text, right click the mouse for options, and select Copy or use the keyboard shortcut CTRL+C to copy the selected text.
  4. Go to your open Notepad window and make sure your cursor is in the Notepad window.
  5. Right-click your mouse again and select Paste or use the keyboard shortcut CTRL+V to paste the copied text.
  6. The text you copied will be pasted into the Notepad window.

To copy and paste on a Mac:

  1. Take your mouse and place your cursor at the beginning of the text, click and hold the mouse button then pull your mouse over the text. This highlights the text.
  2. With the cursor over the highlighted text, press the Control key and click and hold the mouse down on the highlighted text and select Copy from the menu or use the keyboard shortcut Apple+C to copy the selected text.
  3. Go to your TextEdit or SimpleText window and click inside it so your cursor is in the right place.
  4. Control-click your mouse again and select Paste or use the keyboard shortcut Apple+V to paste the copied text.

Note on using TextEdit (Mac OS X users): Before you start creating your HTML page using TextEdit, change the preferences by going to the TextEdit menu and selecting Preferences. Under New Document Attributes, check Make Plain Text and Wrap Text. Under Saving, uncheck the Append '.txt' extension to plain text files button. Then click the red button in the upper left corner of the Preferences window to save these changes. If you don't do this it will make your page RTF (Rich Text Format) which will destroy all your HTML coding.

A note about copying and pasting: the tags may not be aligned to the left of the Notepad window after you paste them in. While this won't affect the HTML, it may be confusing for you visually, so feel free to clean up the tags and line them up to the left in your Notepad window.

Basic Coding Using Notepad

Next: Saving Your Work