Web Design Stuff
HTML Tutorials    CSS Tutorials    Web Hosting   Resources
Create a Web Page 101
Making Web Pages Intro What is a Web Page? Why Make a Web Page? The History of HTML Learn HTML or XHTML?
Basic HTML
Basic HTML Tutorials Basic HTML Necessities How to Make a Web Page How to Edit a Web Page The Basics of HTML Tags Basic HTML Page Structure HTML Attributes
HTML Font Codes
HTML Font Codes Intro HTML Font Color Codes HTML Font Size Codes HTML Font Style Codes HTML Bold/Italic Codes Combining Font Codes
Formatting Text
Formatting Text Intro Making Paragraphs Miscellaneous Formatting Headings & Subheadings Creating Hyperlinks
Using Graphics
Using Graphics on the Web Add Graphics to Your Pages Graphics and Accessibility How to Align Graphics Page Color & Background Graphics as Hyperlinks Horizontal Rules
Creating Tables
HTML Tables Tutorials HTML Table Fundamentals Background & Border Color Table Frames & Rules Table Width and Alignment Cells 1 -Space & Alignment Cells 2 -Row Column Span Cells 3 -Width & Height
Making Lists
HTML Lists Tutorials Bulleted Lists Numbered Lists Definition Lists
HTML Frames
HTML Frames Tutorials Using Frames for Layout Advanced Frame Layouts Putting Hyperlinks in Frames Frame Border Width Color, Margin and Control Problems with Frames SmartFrames: A Solution SSI: An Alternative to Frames
Web Page Forms
Making Feedback Forms A Simple Feedback Form Installing NMS FormMail Debugging Your Setup My Web Host is Out to Lunch User Input Components Text Fields Checkboxes & Radio Buttons Dropdown Menus Push Buttons Layout and Presentation
Basic CSS
Basic CSS Tutorials What is CSS? Why You Should Use CSS How to Use CSS Inline Styles Embedded Style Sheets External Style Sheets Class Selectors ID Selectors Combining Selectors
CSS Properties
CSS Properties Intro Font Styles Width, Height & Spacing Borders Backgrounds Position Float & Alignment Hyperlinks
All About Web Hosting
Hosting Your Own Website What is a Web Host? Your Website's Home Page Building a Website Offline About Free Web Hosting Best Free Web Hosting Commercial Web Hosting How to Get a Domain Name Ecommerce Web Hosting Web Hosting Terminology
Free Web Design Tools
Best Free Website Tools Best Free Text Editors Best Free Graphics Editors Free Website Analysis Tools
Setting Up HTML Kit
HTML Kit Introduction How to install HTML Kit Screenshot Breakdown Basic Configuration Overall Appearance Shortcuts and Startup Editing Window Customizing Toolbars Using the Favorites Tab Making a New Actions Bar Odds and Ends
Free Templates
Free Website Templates Two Column Fixed Width Three Column Liquid Layout Miscellaneous Templates Dynamic Menu Effects Two Column Experimental Terms of Use About These Templates
Website Templates Help
Getting Started Template Zip File Download How to Edit Your Template What to Edit in the HTML How to Add Your Logo Making a Website
Web Design Tips
Web Design Basics Tables vs. Tableless Using Tables for Layout Example Table Layouts World's Crappiest Web Page
Twitter Backgrounds
Twitter Backgrounds Intro Cool Twitter Backgrounds Cool Twitter Backgrounds 2 Plain Twitter Backgrounds Dark Twitter Backgrounds Best Twitter Backgrounds Cute Twitter Backgrounds Music Twitter Backgrounds Music Twitter Backgrounds 2 Twitter Backgrounds 101 TERMS OF USE
All About Web Browsers
What is a Web Browser? Mozilla Firefox Internet Explorer Opera How to Set Up Firefox Top 5 Firefox Extensions
 
Contact
Post Some Feedback Send Me An Email Iron Spider Blog About Iron Spider... Site Conventions
 
 
 

 
Click here to read about the Main Menu. Click here to read about the Toolbars. Click here to read about the Actions Bar. Click here to read about the Workspace. Click here to read about the Editing Window. Click here to read about the Message Window. Click here to read about the Taskbar. Click here to read about the Status Bar.

Screenshot Breakdown

 
I'm assuming that you've downloaded and installed HTML Kit, you've started it up and are now staring blankly at your computer monitor while mumbling something akin to "What the [insert expletive]...?"

Well here comes the cavalry. First of all let's clearly define what's what...


Screenshot of HTML Kit
(Click on various sections in the image to jump to an explanation.)
Screenshot of HTML Kit - Labelled


And now let's break it down:

  • Main Menu ~ This is commonly known as the 'File Menu bar' and typically runs across the top of most computer programs. For the purposes of clarity we will stick with the name, Main Menu. Clicking on each item in the Main Menu will reveal a drop-down submenu of options. Hovering your mouse pointer over each item in the sub-menus will reveal a explanatory message in the Status Bar at the bottom of the program. You can't close the Main Menu but you can move it around anywhere you want (more on this later...)

    Every command in HTML Kit can be accessed from the Main Menu. Hence, according to Iron Spider site conventions, all paths that I will show you leading you to various HTML Kit program commands will begin in the Main Menu (unless otherwise specified). There will be times, however, when I will also include some alternate paths to the same command in order to tutor you on the various program icons and keyboard shortcuts. HTML Kit is highly redundant, i.e. quite often there are a kazillion ways to get to the same place.
    (Back to screenshot)


  • Toolbars ~ This contains a row of icons which activate various common and frequently used commands. Drawing from experience from other programs, you may be immediately familiar with most of these icons' functions. If not then hover your mouse pointer over each icon to see a pop-up tool tip with an explanatory message. This tooltip will also be mirrored as a message in the Status Bar. Be advised that many of the Toolbars icons have little black arrows pointing down which can be clicked on to reveal a drop-down menu of more related functions and options. The Toolbars section is actually 4 separate Toolbars, all lined up horizontally and named from left to right: File, Edit, Windows and Tools.

    Like the Main Menu, all the Toolbars can be repositioned and, unlike the Main Menu, they can also be turned off completely (more later...)
    (Back to screenshot)


  • Actions Bar ~ The Actions bar is similar to the Toolbars except that it is fully loaded, and I mean FULLY LOADED with every possible push-button instant wizard known to mankind that automates the process of HTML editing. And if that isn't enough, there are literally hundreds more buttons and drop-down menus that you can download and install. These optional Actions Bar installations are called 'Plugins' and you can get them for free at the HTML Kit plugins page. And if that isn't enough (Please! Stop! I hear some saying...) you can even create your own plugins. In fact, you can conceivably strip down HTML Kit to just the Main Menu and then rebuild an entirely custom-made version of the program that will especially suit your needs.
    (Back to screenshot)


  • Editing Window ~ This is the space you will use to actually write up your HTML code, javascripts, css files and what-not. This is your text editing area, i.e. your principal theatre of action, and most commands on the Main Menu, Toolbars and Actions Bar apply to what you are doing here.
    (Back to screenshot)


  • Workspace ~ This area is your link to various .htm, graphics and other web related files on your hard drive and, if applicable, your online website. You can use the Workspace to import stuff to HTML Kit and you can also use it to upload files to your website using the built-in FTP program (no kidding...). The Workspace can be turned on or off anytime to expand your available editing space. It can also be floated for repositioning and docked to the left or right of the program window.
    (Back to screenshot)


  • Message Window ~ This window will display messages related to validating web files using various utilities such as HTML Tidy. HTML Tidy is a built-in tool that will check your HTML code for errors according to certain specifications. The Message Window also displays messages related to using the built-in FTP program (see Workspace) indicating you have accessed your web host server, a file has been uploaded, etcetera. And finally, the Command Prompt tab in the Message Window can be used to type in and enter —á la DOS style— HTML Kit system commands.
    (Back to screenshot)


  • Task Bar ~ The Task Bar is one of the tools you can use to switch between multiple documents (when applicable) and it can be configured in numerous ways, either aesthetic or practical. Take special note of four tiny buttons to the far left of the Task Bar referred to in the Preferences dialog as the Task Bar icons which can be used to instantly configure the HTML Kit program view. Hover over each button to see an explanatory message in the Status Bar. The Task Bar icons have been collectively dubbed the 'Action box' in other tutorials about HTML Kit although I'm not sure where this name came from as I see no mention of it in the program itself. Possibly the name was invented by the author for purposes of convenience. In any case, we will get back to these buttons very shortly.
    (Back to screenshot)


  • Status Bar ~ To all newbies, this is your lifeline to HTML Kit as it will almost always display some kind of explanatory message about what your mouse pointer is currently hovering over. It is, in my humble opinion, much more reliable than the tooltips which disappear after several seconds and don't always give you time to thoroughly digest what is being said. In the little section at the far left of the Status Bar, you will also typically see two numbers separated by a colon (:) which will indicate what row number and what column number the flashing text cursor is currently situated at in the Editing Window.
    (Back to screenshot)


Alrighty then let's strip this monster down and whip it into shape so it'll sit up and bark everytime you snap your fingers...





Web Hosting 101

Learn about web hosting without the technobabble!

What is Web Hosting?
Best Free Web Hosting
Affordable Domain Names
Affordable Web Hosting

See also:

How to Make a Web Page
Free Website Templates

 

If you need a .COM web address, you can get one quick and easy at...

www.GoDaddy.com
<~ BACK TOP NEXT ~>
 
HTML Tutorials |  CSS Tutorials |  Web Hosting |  Domain Names |  Web Design Resources
Iron Spider © Copyright 2004-2011 Robert Darrell