|
|
This guide is an html
text primer for those who have little or no experience
using
html.
You
won't need to install any software on your system
to easily format text and ready it for the web
with
our HTML
Text Area Editor
(requires Internet Explorer 5.5+).
The
editor is an online tool (also available in
out Tools Area)
that functions much like a word processor, with the added
advantage that you'll be able to immediately
view the HTML source code you produce.
The guide below is also integrated into the HTML Text Area
Editor for those accessing the editor from another page.
Creating
HTML Text
(also available in our Tools Area by using the HTML Text
Area Editor)
Contributor: Mike de Sousa,
Director, AbleStable
Overview
The HTML Text Area Editor has been developed by interactivetools.com
as a WYSIWYG (what you see is what you get) editor to compose
<textarea> html fields. Their freeware editor is called
htmlArea. We've renamed our version of the editor to make
the limit of its functionality clearer to our users.
Here at AbleStable® we've modified the design and code
of the editor and provided this online guide. This offers
our users a useful and instructional live tool that provides
a simple means of generating HTML text fields remotely,
and helps people understand the basics of HTML through first
hand practical experience.
The HTML Text Area Editor lets you:
• Format text to be bold,
italicised, or underlined
• Change the face, size,
style, and colour of fonts
• Left, centre, or right-justify
paragraphs
• Make bulleted or numbered
lists
• Indent or un-indent
paragraphs
• Insert a horizontal
line
• Insert hyperlinks and
images
• View the raw HTML source
of what you're editing
go to top
Browser
Limitation
The HTML Text Area Editor requires Internet Explorer 5.5
or better on Windows to run. This is because it makes use
of some advanced features of IE5.5+ that aren't currently
available in other browsers. It is however backwards compatible
with other browsers where a regular text area will appear
instead of a WYSIWYG editor.
go to top
Using
The HTML Text Area Editor
Think of the HTML Text Area Editor as a word processor that
formats text in a variety of ways, and adds HTML tags automatically.
Remember that the editor is limited to producing html source
code for the text area alone. To create a functioning web
page you'll have to add a few more lines of code and save
a document as an html file.
To find out more about the process of making a web page
go to our html introduction below.
go to top
Kinds
of Fonts
Select a font from the drop-down menu. The fonts available
are limited to the following browser restricted fonts: Arial;
Courier New; Georgia; Tahoma; Times New Roman; Verdana;
Impact; Wingdings.
Be aware several of these fonts may not be recognised by
all browsers and computer systems. For cross browser/platform
compatibility use: Arial; Courier New; Georgia; Times New
Roman; and Verdana.
go to top
Font
Sizes in HTML
Traditional text measurement specifies font size size in
points. A point is 1/72 of an inch. In web pages there are
seven sizes for text, where 1 is the smallest, and 7 the
largest. The following list shows each web font size followed
by their equivalent print sizes:
| 1 > 8pt | 2 > 10pt | 3 > 12pt | 4 > 14pt |
5 > 18pt | 6 > 24pt | 7 > 36pt |
To make matters more complicated, different browsers (Internet
Explorer and Netscape) and computer systems (PC and Mac)
display fonts in different ways. For instance, the web size
1 is all but unreadable on a Mac using Netscape! The best
way of ensuring your web page is viewable to a wide audience
is to check it in a variety of browsers on a range of computers.
go to top
Substitute
Fonts
Web browsers sometimes substitute fonts if they are not
available on the host computer. The following list shows
the font selected, followed by the substitute fonts the
browser will render in priority. For example, if the Arial
font is not available on the host computer, Helvetica will
replace it, if that is not available, the Sans-Serif font
will replace it, and so on.
You'll note there are no replacement fonts specified for
Impact or Wingdings. These fonts will only be reliably shown
on a browser that uses a Windows based system:
Arial: Arial
> Helvetica > Sans-Serif
Courier New:
Courier New > Courier > Mono
Georgia: Georgia
> Times New Roman > Times > Serif
Tahoma: Tahoma
> Arial > Helvetica > Sans-Serif
Times New Roman:
Times New Roman > Times > Serif
Verdana: Verdana
> Arial > Helvetica > sans-serif
Impact: Impact
WingDings:
WingDings
go to top
Fancy
Formatting
Keep your text formatting basic. Although we've provided
the full range of HTML text formatting options in the editor,
stick to plain text, bold, and italicised if you want your
web page to be viewed by the widest audience. You'll also
find the following formatting options to experiment with:
• Underlined; Strikethrough;
Subscript; Superscript
• Left, Centre, or Right-Justify
Paragraphs
• Font Colour and Background
Colour
• Bulleted or Numbered
Lists
• Indent or Un-indent
Paragraphs
• Insert a Horizontal
Line
go to top
Hyperlinks
and Images
You may insert Hyperlinks and Images using the HTML Text
Area Editor. When you insert a hyperlink use the full URL.
If you are linking to a homepage remember to add a trailing
slash at the end of the URL eg. http://www.your-site.com/
Note that any images you insert will also have to contain
an absolute URL. That is, your image must already have a
web address
eg. http://www.your-site.com/images/your-image.gif
go to top
View
HTML
The HTML Text Editor allows you to easily view the raw HTML
source of what you're editing. Simply use the button marked
<> to view the HTML in the editor window, or use the
link below the editor window 'Review HTML' which will pop
up a small informational window with the HTML source code.
Note that you'll only be able to copy and paste the HTML
using the first method.
go to top
A
Basic Introduction to HTML
You'll be able to produce a web page using a basic text
editor like Windows 'Notepad' (you'll find this by using
Start > My Programs > Accessories > Notepad). Don't
use a rich text editor like Word or Wordpad as they will
introduce many unwanted elements.
go to top
The
Head and Body
Simple web pages like an html page (rather than more complex
pages like those served from a database server), require
two main elements. A hidden 'head' element that contains
important information about the document for the browser
to correctly interpret the page, and a 'body' element that
contains the page contents that are viewable in an Internet
browser (using your browser, select 'view source' from your
browser menu to see both elements in action).
The head area of a web page can also contain 'Meta Tags'
which provide information about the page contents. Small
programs that automatically search web pages for content
like 'robots' discover then index web pages for future reference
using meta tags (this method of indexing is often used by
search engines).
The second element, the 'body', contains all the viewable
content including your text, images, links, forms, and anything
else.
go to top
HTML
Tags
Web pages use a range of different 'languages' or 'codes'
to ensure web pages resolve and are viewable in web browsers.
Hypertext Markup Language (HTML) is historically the elder
of these languages, but you'll also come across many others
like XHTML, ASP, CFM, PHP etc. You'll notice the last few
letters of a URL gives a clue to the kind of language that
a web page is using.
HTML uses many opening <> and closing </> tags
as part of the code that browsers recognise. Tags are generally
one or two letter abbreviations, but sometimes they can
be entire words. Here's a basic tag that makes text bold:
<b>the words between these tags will appear bold</b>.
As you learn HTML you'll become familiar with the many HTML
tags there are, and how to effectively use them. There's
a lot more to using HTML, but as you'll discover, you can
create an HTML page relatively easily.
The HTML Text Area Editor is limited to creating the text
area fields of an HTML document in basic HTML. A web page
may have many additional elements that go beyond the scope
of this guide, however, we'll now show you the essential
elements that make up a basic HTML web page.
go to top
The
Basic Web Page
go to top
The following html source code provides all the elements
to produce a web page that will be viewable in a browser.
Open your basic text editor (eg Notepad), then save your
document as index.html (it's important to keep to a general
rule of only using lower case letters when naming html files).
The index.html page is the default page a web browser looks
up, so if you enter www.ablestable.com the actual file name
served will be the 'absolute URL' http://www.ablestable.com/index.html.
You may use a dash to separate longer names for the sake
of legibility, but keep the names of your files simple (eg
first-steps.html).
Copy and paste everything between (but not including) the
dashed lines:
----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>The title of your page goes here</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
/
<body>
/
The text you create using the HTML Text Area Editor goes
here...
/
</body>
</html>
----------------------------------------
go to top
Additional
Web Page Header Elements
There are many additional tags that can be used to provide
further information to the browser and search engines. The
use of the Meta tag below is of particular significance
in making your web pages viewable to a wider audience.
----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>The title of your page goes here</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta name="description" content="The
description of your page goes here. Don't use marketing
language, the search engines don't like it">
<meta name="abstract" content="an abstract
of your page goes here. Don't use marketing language, the
search engines don't like it">
<meta name="keywords" content="Enter your
keywords for the page here. Type your keywords with a comma
in between each keyword. Don't use spaces or capital letters.
Don't repeat a keyword more than five times">
<meta http-equiv="Content-Language" content="Your
country code goes here. For example: EN-GB (England, Great
Britain)">
<meta name="Author" content="The web page
author's name goes here">
<meta name="distribution" content="Global">
<meta name="copyright" content="your name©2003">
<meta name="robots" content="FOLLOW,INDEX">
<meta http-equiv="pragma" content="no-cache">
<meta name="revisit-after" content="15
Days">
<meta name="rating" content="GENERAL">
<meta name="Classification" content="the
classification of your site goes here, for example 'creative'.">
<meta http-equiv="reply-to" content="you're
contact email address goes here">
</head>
/
<body>
/
The text you create using the HTML Text Area Editor goes
here...
/
</body>
</html>
----------------------------------------
We've many more resources at AbleStable® that will help
you to improve and broaden your skills in creating web pages.
If you'd like to find out more about web site development
visit our Articles on Web
Design, and find explanations about many technical terms
and phrases in our comprehensive creative Glossary.
go to top
Feedback
We hope you've found the HTML Text Editor and our Guide
useful. If you have any comments or suggestions about this
resource we'd like to hear from you. Go to Feedback
and complete the simple form.
Copyright
Notice
Although our contents are free and
may be browsed without restriction, copyright resides with
the originators of all works accessed at AbleStable®,
and unauthorised copying or publication of our site contents
for profitable use is strictly prohibited. To use selected
content go to our Syndication
Centre.
AbleStable © 2002-2008
|
