nj web site design, atlanta web site design, web site design denver, training and development,
 
    
 
web site design, custom web site design, ecommerce web site design, web site design company web site design chicago, web site design services, professional web site design, free web site web site design san diego, web site design uk, business web site design, small business web site real estate web site design, web site design development, web site design firm, web site design flash web site design, web site design and hosting, web site design software, toronto web site e commerce web site design, wedding web site design, graphic design web site, web site design tampa web site design, web site design service, web site design new york, web site design seo web site design, seattle web site design, web site design bay area, cheap web site design
page 2 of 28
 

HTML Basics

HTML is short for HyperText Markup Language. Web pages are written in HTML - a simple scripting language. No special tools or software is needed to write HTML. It can even be written using Notepad! A more popular choice is to use a special HTML editor - maybe even one that puts focus on the visual result rather than the codes - a so-called WYSIWYG editor ("What You See Is What You Get").

That's all HTML is, just a series of commands written in plain text telling the browser what to put on the page and where to put it. Markup Language is a way of writing layout information within documents.

Images are not contained in an HTML document. Where to put an image and where to get it is written in the code. That's true for any graphical elements. When a browser opens an HTML file, the browser will look for HTML code in the text and use them to change the layout, insert images, or create links to other pages.

Pages are linked using hypertext links or images containing hyper links. Remember linking is a two way street. If you provide a link to another page always provide a link on that page to return to the original page you linked from. If you're linking to a page on another website make sure to open the page in a NEW or _BLANK page.

Some of the most popular HTML editors, such as FrontPage, GoLive or Dreamweaver will let you create web pages more or less as you write the code. Although the most accepted process for creating web pages is to design and create them in Fireworks then slice the image and export to HTML. Using this process makes the coding a breeze.

 

HTML
HTML is the hidden coding behind any web page, which tells the browser what to display on the user's screen. HTML tags are contained within "<" and ">" brackets. Most html tags have an opening tag <tag> and a closing tag </tag> which contains a "/" before the tag name. There are a few exceptions, but it's generally best practice to always include the closing tag -- it makes editing the html easier as you can see where tags close.

HTML tags are NOT case sensitive.

Typical HTML page coding:
-------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert your page title here</title>
</head>

<body bgcolor="#FFFFFF">
Opens the body and tells the browser the background color. Then you need to actually add your content.

All of your content goes between the BODY tags!

</body>
</HTML>

-------------------------------------------------------------------------------------------------------------------------------

It is crucial to have closing tags for the </body> and </html> tags!

back to top

Final Points
Accurate HTML will go a long way to ensuring your site displays correctly and quickly on a variety of browsers
Make your HTML as clean and simple as possible
Double check all your HTML to ensure all quote marks are included, and all opening tags have a corresponding closing tags
Use a spell checker - spelling mistakes are unprofessional
Experimenting is the quickest way to learn HTML
Right click on web sites you like to view the HTML source to see how certain effects were made
Try and keep content and style separate by using a style sheet
Put your page through a validator, such as http://validator.w3.org/

back to top

 

HTML Editors

There are quite a few HTML editors out there, from the basic NotePad to more sophisticated ones, such as Amaya, Frontpage, GoLive and Dreamweaver which actually write the code for you. You can use whichever HTML editor suits you but the best we've found is Macromedia's Dreamweaver.

Here's a brief review of some HTML editors:

Product

Rating

NotePad

  • Comes with Windows - find it under your "Accessories" menu
  • Very basic text editor
  • Commands are basic - File Open, Close, Save, Print, Word Wrap, Find & Replace
  • Limited memory - can't cope with long or complicated html documents

WordPad

  • Very similar to NotePad (Comes with Windows etc)
  • Slightly more sophisticated than NotePad, but still basic
  • Can cope with longer documents

TextPad

  • Available free from http://www.textpad.com/ for evaluation purposes
  • Color codes the different html tags, so your document is easier to read / edit
  • Has a split screen layout
    • View all opened documents
    • Can Insert HTML tags and characters - html knowledge not essential

Excellent for those who have HTML experience

Amaya

  • Available for free from http://www.w3.org/Amaya/
  • It is a complete web browsing and authoring environment
  • Comes equipped with a "WYSIWYG style" of interface
  • Excellent for those with no HTML experience

EditPad

  • Available for free from http://www.editpadclassic.com/
  • Text editor with some additional tools and features
    • Built-in difference tool for comparing 2 files
    • Syntax coloring

Adobe GoLive

This is an excellent product for those new to HTML but does have a learning curve. Not quite enough of a power house for professional use.

MS FrontPage

Dreamweaver

  • Dual view WYSIWYG and HTML editors
  • Formats the html behind the scenes
  • Can link to an external editor of your choice within it
  • Color codes html tags
  • Automates JavaScript writing

Works hand in glove with Fireworks. Saves the designer a huge amount of time developing websites because the HTML is generated at the design level and edited in Dreamweaver. Good for those who prefer not to write HTML code by hand. Many features reduce the learning curve on this dynamic product.

 
HTML Tags
Below we have listed some of the most common HTML tags. Don't forget all of these need a closing tag. -- Some of the attributes are listed below.
back to top    
Element   Description
<!- -->
<!DOCTYPE...>
<A>
<ABBR>
<ACRONYM>
<ADDRESS>
<APPLET>
<AREA>
<B>
<BASE>
<BASEFONT>
<BDO>
<BGSOUND>
<BIG>
<BLINK>
<BLOCKQUOTE>
<BODY>
<BR>
<BUTTON>
<CAPTION>
<CENTER>
<CITE>
<CODE>
<COL>
<COLGROUP>
<COMMENT>
<DD>
<DEL>
<DFN>
<DIR>
<DIV>
<DL>
<DT>
<EM>
<EMBED>
<FIELDSET>
<FONT>
<FORM>
<FRAME>
<FRAMESET>
<H1..H6>
<HEAD>
<HR>
<HTML>
<I>
<IFRAME>
<ILAYER>
<IMG>
<INPUT>
<INS>
<ISINDEX>
<KBD>
<KEYGEN>
<LABEL>
<LAYER>
<LEGEND>
<LI>
<LINK>
<MAP>
<MARQUEE>
<MENU>
<META>
<MULTICOL>
<NOBR>
<NOEMBED>
<NOFRAMES>
<NOLAYER>
<NOSCRIPT>
<OBJECT>
<OL>
<OPTGROUP>
<OPTION>
<P>
<PARAM>
<PRE>
<Q>
<S>
<SAMP>
<SCRIPT>
<SELECT>
<SERVER>
<SMALL>
<SPACER>
<SPAN>
<STRIKE>
<STRONG>
<STYLE>
<SUB>
<SUP>
<TABLE>
<TBODY>
<TD>
<TEXTAREA>
<TFOOT>
<TH>
<THEAD>
<TITLE>
<TR>
<TT>
<U>
<UL>
<VAR>
<WBR>
 

Comment
Document's DTD type
Define hyperlink or target
Abbreviation style
Define acronym
Return-address format
Embed Java applet
Create hot spot on image map
Boldface text
Default URL or frame
Default font size
Bidirectional override
Define background sound in MS IE
Make text large
Make text blink
Indent text
Main content of document
Break to next line
(doesn't need closing tag)
On-screen button
Table caption
Center text or image
Show in citation format
Monospace text
Table column
Column group
Programmer comment
Definition description
Deleted text
Defining instance of a term
Directory list
Define division of content in document

Definition list
Definition term
Emphasize text (italics)

Embed plug-in
Frame page elements
Set font face, color, size
Define a form

Define one frame
Define frames
Display as heading
Define page header
Horizontal rule (line)

Outermost tag
Italics
Inline frame

Inline layer
Graphic image
Form field
Inserted text
Searchable index
Keyboard format
Generate public key materials
Label form control
Define a netscape layer
Set of fields in FIELDSET element

List item
Embed external file
Image map info
Define scrolling text (MS IE)
List of items
Document header info
Newspaper-style columns

No break
Alternative to embedded font
Content for frame-dead browsers
Alternative for layer
Text for non-JavaScript browsers
Embed object
Numbered list
Option group
Select box option
Paragraph
Java applet parameter
Preformatted text
Short quotation
Strikeout
Sample format
Client-side script
Drop-down list
Server-side script
Smaller text
Insert blank space
Small span of content
Strikeout text
Bold text
CSS Style definition
Subscript
Superscript
Define table
Table Body
Table cell
Large form field
Table footer
Table heading
Table heading
Titlebar title
Table row
Typewriter font
Underline
Bulleted list
Variable font
Word break

back to top

web site, dating web site, web site design, internet web site, christian web site, submit web site, web site promotion, web site creation
Tell a Friend