Scribd
Upload
61 views

Website and HTML Basics-1

This document discusses the basics of websites and HTML. It defines a website as a collection of related webpages stored together and hosted by a server. Webpages can include text, images, video, sound, and use hyperlinks to connect pages. HTML is the programming language used to create webpages and tags tell browsers how to display information. The document then outlines how to set up a practice project in FrontPage to learn skills like using tables, text formatting, colors, and hyperlinks. Layout and color choice are important design considerations for webpages.

Uploaded by

srini
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

Website and HTML Basics-1

This document discusses the basics of websites and HTML. It defines a website as a collection of related webpages stored together and hosted by a server. Webpages can include text, images, video, sound, and use hyperlinks to connect pages. HTML is the programming language used to create webpages and tags tell browsers how to display information. The document then outlines how to set up a practice project in FrontPage to learn skills like using tables, text formatting, colors, and hyperlinks. Layout and color choice are important design considerations for webpages.

Uploaded by

srini
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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

You might also like