HTML Tutorial Lesson 1

Page Contents

Required to upload your page/site to the Internet

What are HTML & CSS

HTML

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

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

HTML Tags & HTML Elements

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

Examples

<p>
<strong>
<h1>

The vast majority of them work in pairs with an opening tag <> & a closing tag </>

Examples of HTML Tags

<p></p>
<strong></strong>
<h1></h1>

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.

Examples

<p>The P tag defines a Paragraph. It is the most widely used HTML tag.</p>

<strong>Words between these strong tags will be emphasised, 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

Initially Required to Create a Web Page

Editors

Text Editors

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.

Videos & basic instructions for Notebook Text Editor

WYSIWYG Editors

or easy learning you need a What you see is what you get (WYSIWYG pronounced 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:

Videos & basic instructions for KompoZer Web Editor
Notepad  Very basic text editor with no HTML help

Dreamweaver

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.

Videos & basic instructions for Dreamweaver Web Editor

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

BlueGriffon Add-ons

Pay for      Guide Price in Euro €

Users Manual      6.00€

CSS Pro Editor  11.50€

EyeDropper       4.99€

More are available

Videos & 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 issued 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

Videos & basic instructions for KompoZer Web Editor

Web Matrix Editor

Free discontinued editor by Microsoft

Editors

Videos & basic instructions for Web Matrix Web Editor

Google Web Designer

Free Beta

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 Advert Designs rather than Web pages.

Download

More editor information

Web Browsers - Required to View your 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: box.
http://www.tutorials4u/html/editors.htm

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

www.microsoft.com/windows/ie/

Chrome

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 Download

Chrome Windows Download

Firefox

Firefox holds the Number 2 position

Opera

Claims to be the fastest browser in the world. Good W3C compliance.

http://www.opera.com/download/

Amaya

Latest version 5.1. The official browser and authoring tool of the W3C. Excellent for debugging for Non compliance. Terrible user interface. Also dated does not support HTML5 & CSS 3

http://www.w3.org/Amaya/ Home page
http://www.w3.org/Amaya/Amaya.html overview
http://www.w3.org/Amaya/User/BinDist.html Download
http://www.w3.org/Amaya/User/Manual.html Manual

Required to upload your page/site to the Internet

Broadband Service Provider

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

Search & Compare prices for Broadband

Program

Graphic Program

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.

Bundled packages

You can obtain bundled packages that include telephone, broadband and with some operators additional TV programs

Costs

There are 2 main costs with surfing the web. ISP charges, and possible telephone charges.

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

Help charges

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.

Telephone Charges

It is possible that you may be charged for your telephone time but now this is unusual

All Inclusive

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

compare the market

Hosting Service

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.

List of Hosting companies

Internet Security - Anti Virus & Firewalls

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.

Firewall FAQ

Kaspersky

Kaspersky is one of the best security programs available

Norton Personal Firewall

Price Guide £29.99

B00005OB54

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.

Check for the latest price and additional information with Amazon.

Routers & Modem

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.

Internet Speed

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 governed by the slowest section

 Next Lesson - My First Web Page