Learn HTML and how to publish on the internet

This course is designed to provide the student with a starting point for understanding the world of Web Development. It will provide sufficient training for you to start producing your own HTML pages and publish them to the Internet.

• Learn to create web pages.

• Explore different methods of laying out an HTML page.

• Investigate some of the techniques employed by web developers to Navigate between web pages.

• Experiment with the use of images and background images on web pages.

• Use style sheets to change the look and feel of a web page.

• Build a web site based on a client design specification.
  

This course complements our JavaScript course to develop dynamic webpages.

• Start this excellent course at any time.
  
• Study in your own home and at your own pace.
  
• Learn from our helpful and highly experienced tutors.
  

COURSE STRUCTURE AND CONTENT
Course Duration: 100 hours.

Start Date: Start at any time - study at a pace that suits you, and with full tutor support for the duration of your studies.

Content: There are 8 lessons as follows:

1. Getting Started

• What is HTML.
  
• What is a tag.
  
• Create an html page.
  
• Write a file.
  
• File Naming.
  
• View your First Page.
  
• Your First Page Explained.
  
• Structure of an HTML page.
  
• Structure of Tags.
  
• Tag Attributes.
  
• Adding More Detail to a Page.
  
• Laying out Text.
• Adding Colour.
• External Style Sheet.
  
• Validation.

2. Page Layout

• What is CSS
• Defining a Style
• Using CSS for Web Page Layout
• Importing CSS Styles into HTML
• Styles used for page content and layout
• Margins
• Padding
• The Box Model
• Maximum Heights and Widths
• Using the Display Properly
• Position
• Float
• CSS Units
• Common Layouts
• Text Layout
• Terminology

3. Navigation

• What is a Hyperlink?
  
• External Links.
  
• Text Links.
  
• Naming Links.
  
• Image Links.
  
• The Target Attribute.
  
• Email Links.
  
• Internal Links.
  
• Navigation Bar.
  
• Navigation and Usability.
  
• Terminology.
  

4. Images and Page Weights

• Image Format.
  
• Selecting Image Type.
  
• Sourcing Images.
  
• Viewing Images on a Web Page.
  
• Background Images.
  
• Tricks with Background Images.
  
• Page Weight.
  
• Optimal Page Weight.
  
• Image Optimisation.
  

5. Colour and Style

• Designing with Colours and Styles.
  
• Colour.
  
• Understanding Hexadecimal.
  
• Named Colours.
  
• Named Colours vs Hexadecimal.
  
• Web Safe colours.
  
• Tags that Support Colour.
  
• CSS - Cascading Style Sheets.
  
• Cascading Styles.
  
• Font Matching.
  
• Inline Styles Using an ID.
  
• CSS Classes.
  
• IDs and Classes.
  
• External Style Sheets (ESS).
  
• Linking a Page to ESS.
  

6. Designing a Web Site

• Planning your Design.
  
• Interviewing a Client.
  
• Design Review.
  
• Prototypes.
  
• Signoff.
  
• Designing a Home Page.
  

7. Building and Testing a Web Site

• Planning a Site Before you Build.
  
• Prototype Design.
  
• Navigation and Build.
  
• Test during and after Build.
  
• W3.
  
• HTML Standards.
  
• Well Formatted HTML.
  
• Validation.
  
• Usability Checks.
  
• Checklist.
  

8. FTP

• What is FTP.
  
• Anonymous FTP.
  
• FTP Client.
  
• Registering your Domain.
  
• Web Hosting.
  
• Affording the Overheads.
  

COURSE AIMS

• Understand the basics of HTML and create your first HTML Page.
  
• Explore the use of HTML tables to layout a web page.
  
• Recognise the many different types of HTML links used to navigate a web page and web site.
  
• Understand the importance of navigation in relation to people browsing your site.
  
• Learn how to add images to a web page and understand the importance of page weights and download speeds.
  
• Understand the web safe palette and the use of style sheets to control the look of a web page.
  
• To be capable of designing and planning a basic web site that satisfies a client requirement.
  
• Understand the importance of interpreting web site specifications in the planning and constructing of a web site.
  
• Make your web site visible to the outside world.
  

What is a hyperlink?
“An element in an electronic document that links to another place in the same document or to an entirely different document.” www.webopedia.com

The HTML tag for a hyperlink is the <a> tag closed with an ending tag </a>. The hyperlink tag must contain an attribute which specifies the file or location to be linked to, that is, href=”…”, with the URL of the page or location placed between the quotes. For example:

<a href=”http://www.mySite.com/myPics.html”>My Pictures</a>

External Links
An external hyperlink is one that when clicked will take the user to a new page within your site or to a new site. By default the new page will be displayed within the same browser window. Later we’ll look at how to specify a different or new window.

Text Links
The hyperlink tag surrounds text which is displayed highlighted and is the link that the user may click. As displayed to the user, the hyperlink looks like this:

This is a text hyperlink

… and the HTML code looks like this:

<a href=“http://www.somewhere.com”>This is a text hyperlink</a>

When the user clicks the link they will be taken to the web site www.somewhere.com. The destination is specified using the href attribute. In this example, the link is to another website and not another page within the current site, and therefore includes http://www. The link points to a domain name and not a specific page within that site. If a particular page is not specified, then the hyperlink will link to the default page for the site which should be named default.htm (an internet-wide standard).

To link to a page within your site you would simply specify the file name of the page you wish to link to, e.g. <a href=”myotherpage.htm”>…</a>. Notice that you do not need to include http://www or any folder information for a page that is saved in the same location as the current page.

Within your own site, if the page you wish to link to is located in a different folder to the current page, you will need to include the folder as well, for example:

<a href=”/myPics/myPics.htm”>My Pictures</a>

The above hyperlink will link to a page called myPics.htm in a sub-folder of the current one, called myPics.

The location of files is called pathing, and just like locating files on your computer, files on websites use the same conventions. To reference the folder above the one you are currently at, use two dots before the slash, e.g. <a href=”../default.htm”>


HOW THE COURSE WORKS
You can start the course at any time.

It is studied by distance learning, so you can study in the comfort of your own home. But this doesn't mean you are all alone in your studies.  Our highly qualified and friendly tutors are there to help you every step of the way.  If you have any questions at all, they are always happy to help.


THE ADVANTAGES OF STUDYING WITH ACS

• You can start the course at any time and study at your own pace.

• Fit your studies around your own busy lifestyle - we provide full tutor support for all the time you are studying.

• Study where you want to - online studies offer the flexibility for you to determine where and when you study.
  

WHY SHOULD YOU STUDY THIS COURSE?

• Learn about HTML and publishing on the internet.
  
  
• Learn to create web pages.
  
  
• Learn about web design and page navigation.
  
  
• Learn about building a web site for your business.