Part 1
Websites and HTML – The Basics
eos
What is a website?
Definition:
“A collection of individual but related webpages that are stored
together and hosted by a web server”.
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
• 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.
Web Browsers are just the programs that we use to access
the Internet such as Internet Explorer and Firefox
EOS
eos
Page View Source.
HTML: Hypertext Mark-up Language
Click Page, then View Source, to see the HTML code.
eos
Ways to create Webpages
• 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)
eos
Dedicated Software
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.
We will be studying the following these FrontPage skills: Link here
eos
Practice Project
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.
We will cover all of the FrontPage Checklist Skills items in the course
of completing this practice project.
eos
Setting up your 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
eos
FrontPage Tutorial and Starting
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.
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.
eos
Layouts
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:
Links to more layouts Link to example website
eos
Web Colours
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
Example of nasty colour choices
eos
Web Colours Continued
Colour Contrast
Colour contrast is the difference between foreground and background
colours. Getting this right will ensure that viewers can read your text.
Good Color Contrast Bad Color Contrast
Good Color Contrast Bad Color Contrast
Good Color Contrast Bad Color Contrast
Good Color Contrast Bad Color Contrast
