HTML editor also called Web editor or Web authoring editor
Required to upload your page/site to the Internet
What are HTML & CSS
HTML stands for Hypertext Markup Language, a language specifically designed to produce Web pages to go on the World Wide Web, WWW.
IT is Markup Language, not a programming language and much easier to learn.
CSS stands for Cascading Style Sheets and is used to style the Web pages
HTML handles the Web Pages Content and CSS handles the Web Pages or even the entire Web Sites Style.
The basics of both HTML & CSS are very easy to learn
What are HTML Tags & HTML Elements
HTML tags are the Markup Language and very easy to spot when you view a web page source code.
These tags are information for the web browsers, telling the browser about the type of information that follows.
The browser does not display the tags
They are all enclosed in <> symbols
The vast majority of them work in pairs with an opening tag <> & a closing tag </>
Examples of HTML Tags
Between the opening & closing tag is placed the content. The content is displayed by the browser and the tag defines how the browser should display the content.
<p>The P tag defines a Paragraph. It is the most widley used HTML tag.</p>
<strong>Words between these strong tags will be emphased in a bold font.</strong>
<h1>Is used to display the pages main heading </h1>
The HTML tags Plus content are known as HTML Elements.
The 2 words, tags & elements do tend to get intermixed
You are ready to start to write your own web page as soon as you get a modern day Windows or Mac computer because web pages are only text files and a text editor is already provided with the computer.
- Windows PC use Notepad
- Mac Computer use TextEdit
The problem with these editors are:
- The editor does not insert any code, You have to type or paste in, all the code
- You can not easily preview the results. You have to save then load into a browser window.
Using such text editors is hard work and a better approach is to obtain a proper Web Editor.
or easy learning you need a What you see is what you get (WYSIWYG pronownced wiz-ee-wig) to be able to view 2 things:
- The Code View usually called Source Code, or something similar. This is the code that produces the web page.
- The Design View A simulation of the finished resulting page.
In this tutorial, suitable for complete beginners, we will give instructions for 3 editors but many other editors are suitable if they easily allow the above 2 views to be seen.
Popular Editors are:
The best editor available, Dreamweaver from adobe. Please note this is available as a stand alone program or can be purchased in a choice of packages of programs. Adobe sometimes offer up to 80% off the normal price for students, including OU students.
The full price is high.
Blue Griffin HTML Editor
Blue Griffin HTML Editor Free available from http://bluegriffon.org/
There are a couple of free add-ons but most add ons are to be paid for, including editing style sheets and Full Screen view
Pay for Guide Price in Euro €
Users Manual 6.00€
CSS Pro Editor 11.50€
More are availableVideos & basic instructions for Blue Griffin HTML Editor
KompZer Web editor
KompZer is a free Web editor available to download from http://kompozer.net/ This was the editor isued with the Open University Design and the Web Course T183. This editor uses HTML 4.01 & does not edit for HTML5 the latest HTML version
Web Matrix Editor
Free discontinued editor by Microsoft
Google Web Designer
Builds Responsive Web Pages so that they can be viewed on a desktop computer or a mobile screen
After a quick look at this program it appears to be too advanced to be used by an absolute beginner learning HTML & CSS.
For example Creating a new file produces over 100 lines of Code. Dreamweaver and most editors produce around 10 lines of code
For the experienced web designer Google Web Designer looks more promising, although it may be better for producing Ad Designs rather than Web pages.
Web browsers are programs that display web pages. The
files that are displayed can either be on your hard drive
or can be downloaded by the browser from the Internet.
Because you are reading this page you probably already
know that that you can download this page by entering
the following URL into your browsers Location:
Files on your hard disk can also be displayed. Often when you are surfing the web the page displayed on your screen was downloaded on a previous visit to that web site and stored in a cache on your hard drive. The stored cache page is displayed, a much quicker method for the browser to perform. For students visiting their Universities web site to obtain the latest course information can be fooled by this cashed display.
To avoid this possible problem, either:
- Make use of the browsers Refresh button.
- Change the settings in your browser, to always download, although this will slow your browsing experience.
You will soon learn how different browsers will display a web page differently. The HTML that works in one browser will not work in another. It is therefore essential when you are testing the appearance of your web pages that you do so in various web browsers, the main ones are listed below. If possible use new & older versions.
This checking can be done online using a checking site such as https://browsershots.org
Microsoft Internet Explorer
No longer the most popular web browser, now in 3rd place.
Obtain the latest version
Chrome is now in the Number 1 slot & the most popular browser. It is produced by Google well known for the the Top Search Engine and its famous maps.
Obtain the latest version
For For Windows 8/7/Vista/XP Computers Chrome Windows Download
For Mac Mac OS X 10.6 or later Chrome MAC Download
For Computers using Linux Operating System Chrome Linux Download
Firefox holds the Number 2 position
Claims to be the fastest browser in the world. Good W3C compliance.
Latest version 5.1. The official browser and authoring tool of the W3C. Excellent for debugging for Non compliance. Terrible user interface.
Required to upload your page/site to the Internet
A Broadband Service Provider also called an Internet service providers (ISP) is required, who will provide you with access to the Internet. This is nowadays normally broadband
The ISP usually provide you with a front end program and a router that connect between your Computer & your phone line, to connects you to the internet.
You can obtain bundled packages that include telephone, broadband and with some operators additional TV programs
There are 2 main costs with surfing the web. ISP charges, and possible telephone charges.
You can now find ISP that do not charge a monthly fee. They will provide you with a telephone number that is the equivalent of a BT local call. Check on this. The ISP will bill you for calls to this number rather than BT.
Other ISP will charge a monthly fee. Usually connection speed and the service provided are better with a pay ISP.
A free ISP usually provide help via premium charge telephone lines, these can be expensive, such as £1 a minute.
A pay ISP usually provide a free help service. Do check the small print.
It is possible that you may be charged for your telephone time but now this is unusual
Some ISP charge an all inclusive fee a month and provide you with a free telephone number to connect to them.
Find a provider
You most likely have plenty of junk mail sent to you by these providers.
Broadband price comparisons
You can obtain price Broadband price comparisons from
After careful consideration of the hosting market this site is hosted by 1&1 Click the link for details.
A hosting service allows you to store your web pages on their server. When you first obtain a service it will probably be as a shared hosting. This is where numerous Web sites are shared on one server.
This service may be provided free or you may have to pay. Note that some free site have a bad reputation. If your site becomes commercially viable you may find that you have lost copyright of your material, to the service. Read the small print, before accepting the service.
If you wish to use your own Domain name, such as tutorials4u.com you will have to pay for web hosting.
Many ISPs provide a hosting service.
You may require your hosting service to provide some extensions so that your web site can be enhanced. Such as:
- FrontPage extensions
- Server side scripting.
- Active Server Page (ASP).
- Common Gateway Interface (CGI).
- Database support.
- Multimedia streaming.
Not all hosting services can provide these extras, or may charge for the service.
Some hosting services charge for bandwidth. The busier the site the more you pay. Usually measured in GB a month, with possible individual daily maximum totals for downloads. This is often done with "Adult" sites. An alternative way of dealing with large bandwidths without paying extra is that the site works very slowly and may grind to a halt. For the general run of the mill personal site, this is not a problem, but if you think you will have a winner of a website, then you will have to look further into this possible problem.
A firewall prevents unauthorised access to your computer through the ports that connect you to the Internet or network. A firewall can be hardware, usually used by businesses, or software used by home users. If you are using the Internet then a firewall is a must.
Kaspersky is one of the best security programs available
Free to use for personal use
An excellent free to use for personal use. Simple to use with fairly basic configuration options.
Norton Personal Firewall
Price Guide £29.99
Simple to set up with 3 levels of protection. Experienced users can use a more flexible set of rules. Will protect against potentially risky Active X or Java components.
A Fast broadband connection is made via a router, slower modems are now rarely used.
A modem converts digital signals used by a computer to analogue signals that can be transmitted along telephone lines.
If your computer does not have a built in router/modem, these are available to plug into the computer or to connect to it by WiFi:
- On a card that can be placed into a slot inside your computer case.
- As a PC card typically for notebooks with a PC card connection.
- As an external box that plugs into one of the computer ports now usually wireless connection to the computer by WiFi.
Many factors alter the speed of your connection.
- The speed of the modem is crucial in the speed of your connection.
- Connect the modem with as short a cable as possible to the telephone wall socket.
- The quality of your telephone connection. Have a word with BT to check the line, and if required increase the gain. Be persistent they always say the line is OK.
- If you have telephone extensions around the house, speed is sometimes improved if the other telephones, answer machines etc. are unplugged.
- The amount of traffic on the Internet during the UK evening and night (American day and evening) times are the worst.
- Modern Optical Cable Telephone / Telephone exchange connections are better than the older wire system
- The speed is govered by the slowest section
Next Lesson - My First Web Page