Part I

HTML Basics
Key Skills & Concepts
● Understand the Internet as a Medium for Disseminating Information

● Plan for the Audience, Goals, Structure, Content, and Navigation of Your Site

● Identify the Best HTML Editor for You

● Learn from the Pros Using the View Source Command of Popular Web Browsers

Understand the Internet as a Medium for Disseminating Information

Even when you are required to submit a research paper, you don’t just sit down and begin writing. You
have to do research first before writing the paper. In the same manner, designing a website requires a
similar approach.

The Anatomy of a Web Site

1. URL

URLs The fancy word for “web address” is uniform resource locator, also referenced by its acronym URL .

URLs start with http://, and they usually end with .com, .org, .edu, or .net. (Other possibilities include .tv,
.biz, and .info example http://www.iat.co.ke.

Every web site has a URL—for instance, Google’s is www.google.com.

One part of a URL is the domain name, which helps identify and locate computers on the Internet.
To avoid confusion, each domain name is unique. You can think of the domain name as a label or shortcut.
Behind that shortcut is a series of numbers, called an IP address, which gives the specific address of where
the site you’re looking for is located on the Internet.
 2. Web Servers

Every web site and web page also needs a web server. Quite simply, a web server is a computer, running
special software, which is always connected to the Internet. When you type a URL into your web browser or
click a link in a web page, you send a request to the server housing that information.

3. Web Page

A web page is what you see on the screen when you type in a web address, click on a link, or put a query
in a search engine. A web page can contain any type of information, and can include text, color, graphics,
animation and sound.

4. Website

It is a set of related web pages typically served from a single web domain.

5. Web browser

A web browser is a piece of software that runs on your personal computer and enables you to view
web pages. Web browsers, often simply called “browsers,” interpret the HTML code and provide a
visual layout displayed on the screen.

Examples:……………………………………………………………………………………………………………….
 6. WWW

It means World Wide Web. an information system on the Internet that allows documents to be
connected to other documents by hypertext links, enabling the user to search for information by moving
from one document to another.

Internet service provider

An Internet Service Provider (ISP) is a company that provides you with access to the Internet, usually
for a fee.

Examples:……………………………………………………………………..

Plan for the Audience, Goals, Structure, Content, and Navigation of Your Site
In addition to learning about the medium, you also need to do the following:

 Identify your target audience.

 Set goals for your site.
 Create your web site’s structure.
 Organize your web site’s content.
 Develop your web site’s navigation

Identify the Target Audience

If you are creating a web site for a business, a group, or an organization, you are most likely targeting
people who might buy or use the company’s products or services.

Even if your site is set up purely for the purpose of disseminating information, you must target a certain
audience. Consider whether you have existing research regarding your client or user base.
Knowing your target audience will influence how you design and develop your web site. For example, if you
are developing a site for beginners to learn about the Internet, you want to create a site that is extremely
easy to use and does not stray from standard computer conventions.

Once you identify your target audience, you need to think about what functions each part of that audience
can perform at your site.

I.e

Set Goals
Since the Web’s inception, millions of new web sites have been created. To compete in such a large
market, you need to set clear goals for the site. For instance, the site might

● Sell products/services

● Recruit potential employees

● Entertain

● Educate

● Communicate with customers

Always remember the goals when developing the site to avoid unnecessary content. If a page or section of
content on your site doesn’t meet one of the goals, it may confuse or turn away visitors.

Create the Structure

Once you align your site’s goals with the functions performed by the target audience, you will see a
structure forming. Consider a site whose primary goal is to sell office supplies to businesses and whose
secondary goal is to recruit potential employees.
This site would most likely contain two main topic areas: shop for office supplies and browse available jobs.
Many people use tree diagrams, such as the one shown

Organize Content
All the content for the site should fit under each of the topic areas in the site structure, and you might have
several subcategories in each topic area. So, the “shop for office supplies” section from the preceding
example might be broken down into several subcategories, according to the different types of products
available.

Develop Navigation
After the site structure has been defined and the content has been placed into the structure accordingly,
you will want to plan out how a visitor to this site navigates between each of the pages and sections. A
good practice is to include a standard navigation bar on all pages for consistency and ease of use. This
navigation bar probably should include links to your home page and any major topic areas. It should
probably also contain the name of your business or a logo so that a simple visual clue lets the user know
she has not moved beyond your site by accident.
Content Organization

Identify the Best HTML Editor for You

EmEditor
Geany
HTML-Kit
HomeSite
Notepad++
NetBeans IDE
NoteTab
PHPEdit
PhpStorm IDE
Programmer's Notepad
PSPad
RJ TextEd
SciTE
Smultron

Learn from the Pros Using the View Source Command of Popular Web
Browsers
One of the best ways to learn HTML is to surf the Web and look at the HTML for sites you like (as well as
those you don’t like).
Most web browsers enable you to view the HTML source code of web pages, using the following
commands:
● In your favorite web browser, bring up the page whose source you would like to view.
● Right click the page and click view page source

Project: Develop a Web Site

The best way to practice HTML is to develop web sites. While developing a personal site might be fun, I
think you can sometimes learn more about the whole development process by working on a site for a
business or organization. In fact, volunteering your time to develop a web site for a nonprofit organization is
a wonderful way to start.
This specific project takes you through the planning phase of the web development project. Goals for this
project include
● Identifying your target audience
● Setting goals for your site
● Creating your web site’s structure
● Organizing your web site’s content
● Developing your web site’s navigation
Prepare a two-page summary of your target organization/business and include the above.
Steps to guide you
1. Spend some time researching your organization/business. Try to learn as much about its business as
possible. If you know people within the company, do some interviews to help you identify your target
audience, as well as the site goals. If you can’t speak with them, visit other similar sites to determine
what type of people the competition is targeting. Some questions to ask and things to consider include
● What business problem(s) will the web site address? What do you want to accomplish? What are
your goals for the web site?
● Who are the targeted users/visitors of the site? Do you have any existing research regarding
your client or user base, such as demographics, statistics, or other marketing information?
● To determine the appropriate direction for the site, you must match the targeted users and the
functions they will perform when visiting the site
2. After you decide on the target audience and goals for the site, it’s time to evaluate your content. This is
best accomplished through conversations with the people you’re developing the site for. If this isn’t
possible, be creative and come up with a list of content you think could be appropriate.
3. Use the answers to the following questions as a springboard for building the structure of your site. Then
develop a tree diagram, similar to the one shown above, to identify all the pieces of your site and where
they fit within the overall structure.
 Does an official logo have to be used on the web site?
 Is all the content written and available in digital format?
 What are the main sections of the site? Does all the content fit within those sections?
 List all the content for the site. Assign each piece of content to a section (as necessary) and
define the filenames.
Chapter
Basic Page Structure
2

Key Skills & Concepts

● Create an HTML File
● Preview an HTML File in a Browser
● Describe and Apply the Basic HTML Document Format
● Use Character Entities to Display Special Characters
● Add Comments to an HTML File
● Set Up Style Sheets in an HTML File
Create an HTML File
At their very core, HTML files are simply text files with two additional features.
1. HTML files have an .html or .htm file extension. A file extension is an abbreviation that associates the
file with the appropriate program or tool needed to access it. In most cases, this abbreviation follows a
period and is three or four letters long. In the following example, notice that the Yahoo! home page
ends in an .html file extension.

2. HTML files have tags. Tags are commands or code used to tell the computer how to display the page
content. After right clicking page source, you can see some of the HTML tags in IAT website home
page (www.iat.co.ke).

Naming Conventions
Remember the following few points when naming your HTML files.
1. Although in most cases it doesn’t matter whether you use .html or .htm, you should be consistent to
avoid confusing yourself, the browser, and your users.
2. Some web servers are case-sensitive, so remember this when naming and referencing filenames and
try to be consistent. If you name your file MyPage.html, and then reference it later using mypage.html,
you may end up with a broken link
3. Use simple filenames with only letters and numbers. Don’t use spaces, punctuation, or special
characters, other than hyphens (-) and underscores (_). Good examples might be home.html, my-
story.html, and contactme.html