|Internet & Web Development ( Introduction | Advanced )
|Personal Learning Environment | What is HTML? | Web authoring | Resources | Help Desk
|Creating a basic web site
|HTML editor | Basic tags | Head tag | Linking pages | Formating and lines | Lists | Tables | Special characters | Page icon
|graphics and images | Connected media | Audio | Video | Image map
|Cascading style sheets
|Inline, embedded, linked | Language | Example
|Web page layout
|Tables | CSS | iFrame | Frames | Other | Responsive
|Tours of Hawke's Bay
|Example | mailto | Add Google
The following sequence will guide you through creating a simple web page. Web pages are made up of content and display instructions written in ASCII. Notepad is an ASCII text editor that comes with Windows, and is usually found under [Start | All Programs | Accessories]. At this beginning point you are expected to use the Windows ASCII editor notepad to create your web page. If you are using an Apple computer you will need to find another ASCII text editing program (would appreciate an Apple user adding options).
By the end of this page you will be able to:
Creating a first Web page using notepad
An ASCII editor allows you to enter text and some basic special characters like the end of a line, or the end of a file. It does not let you apply any special formatting like bold, underline or to change fonts. An html page uses "tags" that the web browser interprets to create a flashy web page. At this stage it is not recommend that you use a Word processor and use "save as HTML", as many extra tags (often non-standard tags) are added to the web page. So to create a web page you will need to have two applications open, the editor (here notepad) and a web browser (Internet Explorer or Netscape Navigator). To toggle between them you can; use [Alt] +[Tab], or arrange them on your desktop so both are visible, or use the task bar buttons at the bottom of the screen. After changes are made in notepad Save the file then in the web browser "Reload" the page to display the changes.
Notes when creating html files with notepad
- Create a folder where you will store your web pages.
- In notepad when you save the file for the first time don’t forget to save into the correct folder, and add the ".html" (or ".htm") extension. Also change "Save as type" to [All Files]. If you don’t notepad may automatically add a ".txt" extension.
- Save all files in lowercase. This becomes significant if you upload to a Unix server (which is common) as file names are case sensitive (e.g. Myfile.htm, MYFILE.HTM and myfile.htm are all treated as different files).
- Don’t use spaces or special characters in your file names, and keep them short (8 characters will be the most portable).
Hints and techniques - Using notepad to remove formatting
Use notepad to strip formatting out before pasting into your html editor
- Beware of copying text from MS-Word. Word has a proprietary format for displaying html (e.g. Mso-Normal is used for paragraph formatting).
- It is best to copy the text from MS-Word into notepad, then highlight the text IN NOTEPAD and copy and paste into your html editor.
- Alternatively you need to remove all formatting from the Word document. (Highlight whole document (Ctrl+A), select Format | Styles and Formatting then "Clear Formatting"), then copy/paste to your html editor.
- You may still need to change the format from mso.normal to normal in the web editor. In the web authoring tool, highlight the area you have copied from Word then change the style to "normal"
- This technique is also useful when copying information from a web page.
Tip: Use [F5] if you want to insert the current date and time into a notepad file.
- Adobe (Macromedia) Dreamweaver and some other Web authoring applications, have a tool that will clean up MS-Word formatting.
Alternatives to Notepad
- Notepad++ (n.d.).is a free source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License..
- Notepad++(n.d.) Retrieved January 19, 2010 from http://notepad-plus.sourceforge.net/uk/site.htm