Webwork
/
Getting Started

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).

Jay Boersma's Webwork HTML Tutorial

The basic procedure is:

  1. Launch both the text editor and browser.
  2. Create some HTML "code" in the text editor.
  3. Save the file with an .html suffix.
  4. Open this .html file with the browser to view it as it will appear on the web.
  5. Go back to the text editor to add more content or make changes.
  6. Save the file again.
  7. 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:

  1. TextEdit
  2. 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:

textedit-prefs1

In the New Document pane
for
Format
select
Plain text.

Optionally, you can adjust the Window Size to suit your workspace.

textedit-prefs2

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:

text-edit-window

and then save it:

textedit-save

Which should give you a file that looks like this:

textedit-html-file

(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:

textedit-safari

And this is the same file displayed in Chrome:

textedit-chrome


Windows Set-Up

The applications needed for writing HTML are:

  1. NotePad
  2. 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:

notepad-window

and then save it:

notepad-save-as

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:

notepad-ie

And this is the same file displayed in Firefox:

notepad-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++
Windows_logo_and_wordmark_-_2012.svg

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
mac-logo

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
mac-logo

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.)



< Previous     Webwork Table of Contents     Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com