Part 1

Websites and HTML – The Basics

What is a website? Definition:

“A collection of individual but related webpages that are stored together and hosted by a web server”.

eos

Features of webpages: • Webpages can be programmed from scratch (E.g. HTML) or

developed using software packages (E.g. FrontPage).

• Webpages can include a variety of different objects such as: o Text o Images o Video o Sound

• We can access webpages by typing in a URL (Address) into the

address bar.

• Hyperlinks are used to move from page to page (or even site to site).

URL (Web Address)

Hyperlinks

• HTML stands for “Hypertext Mark-up Language”.

• It is a form of Programming Language which is specifically used for

creating Web Pages

• HTML is written in the form of Tags which tell the Web Browsers how to display the information.

HTML

EOS

Web Browsers are just the programs that we use to access the Internet such as Internet Explorer and Firefox

HTML: Hypertext Mark-up Language

Click Page, then View Source, to see the HTML code.

Page View Source.

eos

Ways to create Webpages eos

• There are several ways to create webpages:

o Text Editors (Notepad for example) o Word Processing Packages (Microsoft Word for example) o Dedicated Software (FrontPage for example)

FrontPage:

FrontPage offers us the following features: o Menu based web design tool. o Removes the need to understand HTML. o Point and Click interface makes it easy to use. o Enables user to develop fairly advanced features (like menu’s)

without needing overly technical knowledge.

Dedicated Software eos

We will be studying the following these FrontPage skills: Link here

To practice the skills required we will follow a practice project using FrontPage. The topic of the project is “Egypt” and we will:

o Create 3 pages (One homepage and 2 pages of information). o Structure each page using tables. o Use hyperlinks and anchors to navigate around the site. o Use hyperlinks to link to files which will open in a new

window. o Link to a specified email address from the website. o Format tables, text, colours etc. o Use software to enhance and resize images.

Practice Project eos

We will cover all of the FrontPage Checklist Skills items in the course of completing this practice project.

To begin with you will need to access your IGCSE ICT folder. You should then create another folder in there and name it “Website Authoring”. Inside the Website Authoring folder you need a folder called “Practice Project”. Inside the Practice Project folder you need 2 more folders:

o HTML o Images

Setting up your Project eos

To help you to navigate around FrontPage I have created a tutorial we will follow and covers the basics of the program (Link Here). The tutorial will be useful to recap some of the techniques we learn within the class. Access the tutorial from the menu and open.

FrontPage Tutorial and Starting eos

Now lets begin! Access FrontPage from the start menu:

o Windows Button o All Programs o Microsoft FrontPage

NOTE: We will cover Tables, Text and Colours in this lesson.

Layouts are an important consideration to make BEFORE you begin to implement the webpage onto the computer. It is also important to note that Each webpage should use SIMILAR layouts. Here are some typical layouts used for WebPages:

Layouts eos

Links to more layouts Link to example website

Colours are very important to consider when creating a website. It is important that you select colours that follow these rules:

• Complement each other • Text colours are opposite to background colours • Enhance the look and feel of the webpage

Web Colours eos

Example of nasty colour choices

Web Colours Continued eos

Good Color Contrast

Good Color Contrast

Good Color Contrast

Good Color Contrast

Bad Color Contrast

Bad Color Contrast

Bad Color Contrast

Bad Color Contrast

Colour Contrast Colour contrast is the difference between foreground and background colours. Getting this right will ensure that viewers can read your text.