The amazing thing about Web page creation is how very simple it is to do. It truly brings the ability to "publish" interactive content into the hands of anyone with Internet access and a willingness to learn by a little trial and error. If it were rocket science, there wouldn't be so many more web designers than there are rocket scientists.
Web page creation doesn't even require expensive software. To get started all you need is a browser (which you already have if you are reading this) and a basic text editor such as TextEdit (included with Macs) or Notepad (included with Windows PCs).
The basic procedure is:
- Launch both the text editor and browser.
- Create some HTML "code" in the text editor.
- Save the file with an .html suffix.
- Open this .html file with the browser to view it as it will appear on the web.
- Go back to the text editor to add more content or make changes.
- Save the file again.
- Go back to the browser and click Reload or Refresh to see how the changes look.
That's it: type/save/reload, type/save/reload over and over until you reach perfection - or as close to perfection as you care to get.
The first time you do it, it's like magic. After you've been doing it a few years, it's still like magic.
Click the box below to select this minimal HTML template. Then copy and paste it into your text editor to begin a (simple) new page.
Text Editor Specifics
A large number of text editing applications are available for both Macintosh and Windows computers but, for basic HTML coding, you can use the "free" programs that are included with your operating system.
On Macs, this would be TextEdit and on Windows, NotePad. (WordPad, also available on Windows, is not the right tool for this job since text formatting is not a concern when you are writing code.)
Macintosh Set-Up
The applications needed for writing HTML are:
- TextEdit
- A Web Browser (Later, you will want several browsers to check compatibility of your code but, for now, one will do.)
To prepare TextEdit for writing HTML, you have to alter some of its default preference settings:
In the New Document pane
for
Format
select
Plain text.
Optionally, you can adjust the Window Size to suit your workspace.
In the Open and Save pane
for
When Opening a File,
select
Display HTML files as HTML code instead of formatted text
Under
When Saving a File,
uncheck
Add ".txt" extension to plain text files
Once those prefs are set, you can open a new TextEdit document and begin keying in your HTML code:
and then save it:
Which should give you a file that looks like this:
(If your file has a .txt suffix instead of .html, manually change the suffix to .html.)
Now, you can open your html file in the browser to preview it.
This is the index.html file that was created in TextEdit as displayed in Safari:
And this is the same file displayed in Chrome:
Windows Set-Up
The applications needed for writing HTML are:
- NotePad
- A Web Browser (Later, you will want several browsers to check compatibility of your code but, for now, one will do.)
Open a new NotePad document and begin keying in your HTML code:
and then save it:
Set
Save as type
To
All Files
Title your document
index.html
Now, you can open your html file in the browser to preview it.
This is the index.html file that was created in Notepad as displayed in Internet Explorer:
And this is the same file displayed in Firefox:
Advanced Text Editors
TextEdit and Notepad work well as very basic HTML coding applications but as your coding becomes more complicated, using such simple tools starts to slow you down.
There are several text editors available that can greatly streamline your code-writing—making you not only faster but more error-free. Here are three that are worth considering:
Notepad++
Free
Syntax Highlighting
Syntax Folding
PCRE (Perl Compatible Regular Expression) Search/Replace
GUI entirely customizable
Document Map
Word completion
Function completion
More »
Text Wrangler
Free
General Purpose Text Editor
Programmer's Text Editor
Unix And Server Administrator's Tool
Powerful Text Transformer And Manipulator
Good Mac OS Citizen
Powerfully Useful Tool
High performance
Ease of use
Rich feature set
More »
BBEdit
$49.99
Exercise Total Control Over Text
Work YOUR Way
Command Files, Folders, Disks, and Servers
Enjoy Textual Omnipotence
Live Up To Standards
Integrate Smoothly Into Existing Workflows
More »
(Author's note: Though Notepad++ and Text Wrangler are both huge improvements over simple text editors, BBEdit is the one that will change your life.)
