INTERNET AND THE WORLD WIDE WEB

What is the World Wide Web?

The World Wide Web (commonly abbreviated as the “Web”) is a system of interlinked hypertext documents
accessed via the Internet. The World Wide Web (WWW) is part of the Internet, which itself is "a network of
interconnected computers", in other words the physical infrastructure used to transfer data (for example, emails,
web documents etc.) between computers.

The WWW is a body of virtual information stored on web servers. A web server is a computer system that
runs software to allow people to look at the web pages stored on it from their own PCs. From home, you have
to connect (you must be registered first) to the web server of an Internet Service Provider (ISP) to access the
Internet.

History
The World Wide Web Consortium (W3C) is the main international standards organization for the Web. This
consortium develops and upgrades the standards for the web. If you don’t like something, it’s their fault.
Seriously, though, Tim Berners-Lee published what is considered to be the first website in August 1991.
Berners-Lee was the first to combine Internet communication (which had been carrying email and the Usenet
for decades) with hypertext (which had also been around for decades, but limited to browsing information
stored on a single computer, such as interactive CD-ROM design).

Internet is the largest network in the world that connects hundreds of thousands of individual networks all over
the world. No one knows exactly how many computers are connected to the Internet. It is certain, however,
that this number is in the millions and is increasing at a rapid rate. No one owns the internet and no one is in
charge of the Internet. There are organizations which develop technical aspects of this network and set
standards for creating applications on it, but no governing body is in control. Private companies own the
Internet backbone, through which Internet traffic flows. Internet has no formal management organization.
Rather than moving through geographical space, the internet moves your ideas and information through
cyberspace – the space of electronic movement of ideas and information.

Then
originally meant for the free sharing of knowledge, the Web has transitioned from basic documents to the use
of URLs to get to addresses, and from simple text and basic image pages to highly styled websites. It’s gone
from scientific and information-based to edutainment, e-commerce and promotion-based sites. It has become
a primary way for us to get research, news, products, social interaction, etc.
It wasn’t always this way. Back in the day, websites were written in a markup language called HTML, and early
versions were very basic, only giving a website’s basic structure (headings and paragraphs), and the ability to

Web Authoring: By Ms. Hafswa Nakato 2020 1

link using hypertext. This was new and different from the then existing forms of communication, since visitors
could now easily navigate to other pages by following hyperlinks from page to page.

Now
Right now the Web is becoming our primary source of information, entertainment, education, shopping,
promotion, and more. There are applications, social media, multimedia, games, and just about anything you can
imagine. If it’s not there, it soon will be.

The World Wide Web: Applications

i. Distributing and Sharing Scientific Data: Share scientific information (data, papers, databases)
among scientists around the world.
ii. E-Commerce: Electronic marketing and advertising, online shopping (order/purchase, payment),
online trading, online customer services.
iii. Online Education and Training: On-line courses, training program and information, distance
learning
iv. Organization and Public Service: Distributing public service information for organizations and
government offices.
v. Online Publishing: Online books, magazines and journals, newspapers, Video, CD.
vi. Online Banking and Trading: Support online bank transactions for banks and stockbrokerages etc..

Web Addresses
Anyone who has searched for something on the Internet using Google or another search engine has seen the
results, with hyperlinks to the related website. The address of these websites are known as URLs. The URL
(Uniform Resource Locator) is the full web address: http://www.studiobast.com.

The URL specifies the Internet address of a file stored on a host computer connected to the Internet. To
identify Web pages exact location, Web browsers rely on Uniform Resource Locator (URL).

URL is a four-part addressing scheme that tells the Web browser;

a) What Transfer Protocol to use for transporting the file
b)The Domain Name of the computer on which the file resides
c) The Pathname of the folder or directory on the computer on which the file resides.
d)File Name of the file

 HTTP (Hypertext Transfer Protocol) is a protocol for distributed, collaborative, hypermedia

information systems. It is used for retrieving inter-linked resources, and is integral
to the universal web address: http://www.studiobast.com. Sometimes you’ll see HTTPS,
which is a secure version of the URL, such as when you have logged into a website. This tells you that
you are looking at/working with hyperlinked pages.

 WWW is the part of the URL address that reaches out to the World Wide Web:
http:// www.studiobast.com.

 The Domain name refers to your domain, or the domain the Web host you use has assigned to you:
http://www.studiobast.com, http://www.freehostia.yoursite.com.

 The pathname and File name refers to where the website is hosted and organization type:
http://www.studiobast.com, where.com indicates this is a commercial address.

Web Authoring: By Ms. Hafswa Nakato 2020 2

NOTE:
Endings of web pages tells us a bit about the page. This tells you where the webpage is registered, and
often tells you what kind of website it is. Some common endings to web addresses are:
 com--business or commercial
 edu--educational (e.g. a college or university)
 mil—military
 net--network resource
 org--organization (frequently nonprofit in nature)
 it--international organizations (such as NATO or the United Nations)

You might also see addresses that add a country code as the last part of the address such as:
• au—Australia
• ca –Canada
• fr – France
• ie—Ireland
• is—Israel
• it—Italy
• nz--New Zealand
• ru --Russia

Web Authoring: By Ms. Hafswa Nakato 2020 3

How People Access the Web
Before we look at the code used to build websites it is important to consider the different ways in which people
access the web and clarify some terminology;

1. Browsers
People access websites using software called a web browser.
An Internet Browser/web browser is a software program that enables you to view Web pages on
your computer. Browsers connect computers to the Internet, and allow people to “surf the Web.”
Popular examples include Firefox, Internet Explorer, Safari, Chrome, and Opera.

In order to view a web page, users might type a web address into their browser, follow a link from
another site, or use a bookmark. Software manufacturers regularly release new versions of browsers
with new features and supporting new additions to languages. It is important, however, to remember
that many computer owners will not be running the latest versions of these browsers.

2. Web servers
When you ask your browser for a web page, the request is sent across the Internet to a special computer
known as a web server which hosts the website. Web servers are special computers that are constantly
connected to the Internet, and are optimized to send web pages out to people who request them. Some
big companies run their own web servers, but it is more common to use the services of a web hosting
company who charge a fee to host your site.

3. Devices
People are accessing websites on an increasing range of devices including desktop computers, laptops,
tablets, and mobile phones. It is important to remember that various devices have different screen sizes
and some have faster connections to the web than others.

4. Screen readers
Screen readers are programs that read out the contents of a computer screen to a user. They are
commonly used by people with visual impairments. In the same way that many countries have
legislations that require public buildings to be accessible to those with disabilities, many laws have also
been passed that require websites be accessible to those with disabilities.
It is interesting to note that technologies similar to those employed by screen readers are also being
used in other areas where people are unable to read a screen, such as when they driving or jogging.

How websites are created

All websites use HTML and CSS, but content management systems, blogging software, and e-commerce
Platforms often add a few more technologies into the mix.

What you see

When you are looking at a website, it is most likely that your browser will be receiving HTML and CSS from
the web server that hosts the site. The web browser interprets the HTML and CSS code to create the page that
you see. Most web pages also include extra content such as images, audio, video, or animations. Some sites also
send JavaScript or Flash to your browser.

Web Authoring: By Ms. Hafswa Nakato 2020 4

How it is created?
Small websites are often written just using HTML and CSS. Larger websites; in particular those that are updated
regularly and use a content management system (CMS), blogging tools, or e-commerce software often make
use of more complex technologies on the web server, but these technologies are actually used to produce
HTML and CSS that is then sent to the browser. So, if your site uses these technologies, you will be able to use
your new HTML and CSS knowledge to take more control over how your site looks.
Larger, more complex sites may use a database to store data, and programming languages such as PHP,
ASP.Net, Java, or Ruby on the web server, but you do not need to know these technologies to improve what
the user sees.

How the web works?

When you visit a website, the web server hosting that site could be anywhere in the world. In order for you to
find the location of the web server, your browser will first connect to a Domain Name System (DNS) server.

On this page you can see examples that demonstrate how the web server that hosts the website you are visiting
can be anywhere in the world. It is the DNS servers that tell your browser how to find the website.
 A user in Barcelona visits sony.jp in Tokyo
 A user in New York visits google.com in San Francisco
 A user in Stockholm visits qantas.com.au in Sydney
 A user in Vancouver visits airindia.in in Bangalore

On addition, you can see what happens when a web user in England wants to view the website of the Louvre
art gallery in France which is located at www.louvre.fr. Firstly, the browser in Cambridge contacts a DNS
server in London. The DNS server then tells the browser the location of the web server hosting the site in
Paris.

Web Authoring: By Ms. Hafswa Nakato 2020 5

 1. When you connect to the web, you do so via an Internet Service Provider (ISP). You type a domain name
or web address into your browser to visit a site; for example: google.com, bbc.co.uk, microsoft.com.

2. Your computer contacts a network of servers called Domain Name System (DNS) servers. These act
like phone books; they tell your computer the IP address associated with the requested domain name.
An IP address is a number of up to 12 digits separated by periods / full stops. Every device connected
to the web has a unique IP address; it is like the phone number for that computer.

3. DNS server returns to your computer allows your browser to contact the web server that hosts the
website you requested. A web server is a computer that is constantly connected to the web, and is set
up especially to send web pages to users.

4. The web server then sends the page you requested back to your web browser.

Understanding the structure

We come across all kinds of documents every day of our lives. Newspapers, insurance forms, shop catalogues...
the list goes on. Many web pages act like electronic versions of these documents. For example, newspapers
show the same stories in print as they do on websites; you can apply for insurance over the web; and stores
have online catalogs and e-commerce facilities.

In all kinds of documents, structure is very important in helping readers to understand the messages you are
trying to convey and to navigate around the document. So, in order to learn how to write web pages, it is very
important to understand how to structure documents. Thus to understand the structure of the web page, we
shall look at;
 See how HTML describes the structure of a web page
 Learn how tags or elements are added to your document
 Write your first web page
 etc...

How Pages use Structure

Think about the stories you read in a newspaper: for each story, there will be a headline, some text, and possibly
some images. If the article is a long piece, there may be subheadings that split the story into separate sections
or quotes from those involved. Structure helps readers understand the stories in the newspaper.

The structure is very similar when a news story is viewed online (although it may also feature audio or video).
This is illustrated on the right with a copy of a newspaper alongside the corresponding article on its website.

Now think about a very different type of document; an insurance form. Insurance forms often have headings
for different sections, and each section contains a list of questions with areas for you to fill in details or
checkboxes to tick. Again, the structure is very similar online.

Web Authoring: By Ms. Hafswa Nakato 2020 6

 WEB AUTHORING
What is Web Authoring?
Web authoring refers to the work involved from the beginning to the end of a web project.
Web authors don’t just code/build cool sites; the really employable and valued web specialists train and gain
experience in the whole range of skills that are involved in designing the website concept, producing it, and
testing/releasing the website for launch. Web authoring takes the following stages below;

1. Planning
A web author has to start at the beginning, even if s/he inherits a previous web project. This includes
getting to know the website client and the requirements of the project, often through client meetings,
and/or a client survey. You need to set up your administrative information for organizing and billing
the project, like contracts, charter, forms, communication methods, etc. Planning also includes
getting clear on who the website visitors are going to be, and what they are supposed to accomplish/
Web authors use planning tools like an AIA table, wireframes, project calendars, interviews, and
various research methods. Finally, planning includes setting the timeline and budget, researching the
website needs, and gathering the resources and tools needed to do the work, like the content, images,
web host, etc. You can’t design a website if you don’t know why and for whom.

What do you need to consider in developing a website plan? For typical website construction,
the basic aspects you need to consider include:
a) The usability: The site should be visitor-friendly, with the interface and navigation made
simple and reliable.
b) The content: The substance and information on the site should be relevant to the site and
should target the audience(s) that the website is focused upon.
c) The appearance: The graphics and text should include a consistent and clean style that flows
throughout the website. The style should be professional, appealing and relevant, primarily to
the target audience.
d) The visibility: The site must also be easy to find with major search engines and advertising
media.

2. Design
The design part of web authoring goes hand-in-hand with understanding the expected website
visitors, accessibility, and usable layout. Design isn’t just about being cool, but is mostly about
crafting a website design that the visitors can actually easily use and react to. This also includes doing
the anticipated sitemap, wireframes, and approval comps. You can’t produce a website until you have
a clear, and client-approved design plan.

3. Coding
Coding the website is part of the production, and means writing the actual HTML and CSS (and
related client-side script) of the website. Some web builders like to use WYSI- WYG tools for this,
where they click on icons and assemble pieces in a visual way, rather than writing the code itself.
Some programs are very good with being clean code translators, while others are not.

4. Production
Production refers to the assembling of the website, including the coding, placing of images and
media, linking, and creating clean navigation elements. It can also include the creation and/or editing
of content, like received text or stuff you write, preparing images for web readiness, updating existing
pages, and merging with tools and resources that the website might provide to visitors.

Web Authoring: By Ms. Hafswa Nakato 2020 7

 5. Pre-launch Preparation
Before you can launch a website, you have a whole bunch of considerations on your checklist: revisions,
finding/contacting a web host, revisions, uploading, page testing, client-side testing, server-side testing,
form testing, link testing, cross-browser comparisons, revisions, validation, revisions, and more
revisions.

6. Launch/Maintenance
Whew! Then you are done. Or are you? Part of your relationship with your client/web project is
getting it launched and closing the project properly. Launching includes making sure the site will be
indexed by search engines and that it is reachable on the Web by a URL and a visitors’ search. Closing
the project means knowing who will maintain the site (if you will not) and making sure you leave
clean and accessible code for your replacement, as well as any necessary documentation about quirks
and concerns. Finally, you need to close your administrative functions on the web project: invoice,
turning over files to the client, etc.

Website Page Types

Websites offer two types of web pages; static and dynamic. Your website may have primarily static pages, such
as for a portfolio website, a brochure site for projects, or business listing sites that provide information but
don’t actually sell from the site. You can also design dynamic pages, especially if your client wants to sell from
the website, you need an updating blog, are including contact forms, or displaying lists of information you want
people to be able to sort and filter. Let’s look at both types of pages.

1. Static pages
These look and act the same whenever a visitor enters them. They are like pages in a brochure,
presenting information and prompting but not actually expecting the visitor to do anything but read
on or visit a linked page that might be dynamic. While you can add little semi-dynamic touches, like
embedded media, a rotating phrase of the day, or a slideshow, the actual web page doesn’t change
content and layout with every request unless a human (web master/programmer) manually updates the
page. A simple HTML page is an example of static content.

2. Dynamic pages
These adapt their content and/or appearance depending on the visitor’s interaction or changes in the
computing environment (visitor, time, database modifications, etc.) For instance, ever notice how
Amazon.com offers you reading material based on your preferences once you log in? Submitting a
form, logging in, answering a poll, sorting a book list, and purchasing a product are dynamic page
activities. These kind of pages need client-side scripting like JavaScript, and/or server-side
Programming, like PHP, Perl, ASP.net, etc.

Website Page Categories

Based on your information and category organization above, you can start planning what the actual pages and
navigation will look like. This is where you consider how to easily break down information and activities into
small chunks for easy reading and action. There are many kinds of pages that websites include, and here are
examples.
First, you will always have some basic pages, regardless of the information flow you have decided to follow:
 Home page – also known as the welcome or landing page
 Disclaimer page
 Contact information
 Sitemap

Web Authoring: By Ms. Hafswa Nakato 2020 8

Then, based on the information flow you have chosen, you can mix and match the pages as they relate to the
categories you decided upon:
 About Us
 Products
 Services
 Testimonials
 Instructions/How to do
 Purchasing
 Networking Info
 Gallery
 Privacy Policy
 Contact Us
 Directions
 News and Updates
 FAQs
 And more

Website Page Levels

1. Main Level
Main level pages are the ones we just discussed – the priority categories your website requires to reach
the audience. These are the pages which will be your primary navigation links. Your home page is one
of them, and you would choose the others based on the website’s purpose. For instance, for a products
website, you might include the products, testimonials, FAQs, purchasing, and Contact Us.

2. Second Level
Second level pages also include important information, but are mostly sub categories of your main
pages. You would not list them in your main navigation, although if you design drop-down navigation,
the first sub level, or this second level, would be listed there. For example, for your products website,
your Testimonials section might include an industry reviews page, a customer satisfaction page, and a
page of news article links where your product has been covered.

3. Third Level
You may find, depending on the size and complexity of your website, that you have a third (fourth,
fifth, etc.) level of pages, like tree branches with smaller twigs.

UTILITY PAGES
Utility pages are, simply put, necessary pages on your website that do not relate to the main categories. These
include your Legal/Disclaimer page, your Sitemap page, and can include your Contact Us page if you want to
link that somewhere other than the main navigation.

Navigation Order
The navigation order is also critical. You want to draw the visitor in with clear choices so s/he can move to the
needed category/page link, then from there move to the next level and/or action to be taken.

a) Main navigation (top level) takes visitors to the main categories (pages) of the website where they
can learn more about the categories of information and move to the acting or decision-making step.
On a book products website, Mystery could be a top level

b) Sub navigation (second-level) is for sub categories of the main section. In the case of a Books website
with a main level of Mystery, sub navigation might include thrillers, cozies, forensic, etc.

Web Authoring: By Ms. Hafswa Nakato 2020 9

 c) Footer navigation is for utility and client information links - website support links. These include
pages like privacy rights, disclaimer, email link, links to a contact form, and link to directions, the
website sitemap, etc.

Web Authoring Rules

Okay, now you know something about the planning stage of a web project. It’s not over yet. Before you touch
fingers to keypad, you also need to add the design planning to the mix. Once you have a clear idea of the website
purpose, target audience, nature of the content and a breakdown into categories, you have the core information
to help you create a design concept. In this chapter we’ll chat about the various considerations that go into
translating the website needs into solid website design.

The first, main, and most important thing to remember is that websites are useless if they do not serve the
audience they are intended to attract. If the visitors can’t or won’t use the website, the client’s communications
plan and the web author’s design fails. Websites must be planned, designed, and produced with the
visitor/customer as the first priority. This is known as User-Centered or Customer-Centered design.

Web Visitor Needs

Web visitors have pretty simple needs when they visit a website:
 Solve a problem.
 Get information fast to solve a problem.
 Buy something quickly and safely to resolve a need.
 Do something fun to relax their stress (like games).
 Make something happen quickly so they can move on.
 Get accurate information when they need to research/make a rapid decision.

Visitors do not need:

 Anxiety  Unclear choices
 Stress  Wrong choices
 Headaches
 Ear-splitting sounds
 Flashing or jumping content
 Distracting interruptions
 Irrelevant time wasting
 Dangerous or insecure transactions
 Tiny print that smacks of legalese
 Too many choices

Web Authoring: By Ms. Hafswa Nakato 2020 10

 INTRODUCTION TO HTML
Welcome to HTML Basics.
This course unit leads you through the basics of Hyper Text Markup Language (HTML). HTML is the building block
for web pages. You will learn to use HTML to author an HTML page to display in a web browser.

Reading materials
1. HTML & CSS Design and Build Websites by Jon DuCkeTT
2. Web Authoring-Boot Camp by .J. Bothell

Objectives:
By the end of this course, you will be able to:
 Use a text editor to author an HTML document.
 Be able to use basic tags to denote paragraphs, emphasis or special type.
 Create hyperlinks to other documents.
 Create an email link.
 Add images to your document.
 Use a table for layout.
 Apply colors to your HTML document

Pre-requisites:
You will need a text editor, such as Notepad and an Internet browser, such as Internet Explorer etc.

Question: What is Notepad and where do I get it?

Answer: Notepad is the default Windows text editor. On most Windows systems;
 Click your Start button
 Choose Programs then Accessories. It should be a little blue notebook.

Mac Users: SimpleText is the default text editor on the Mac. In OSX use Text Edit and change the
following preferences:
 Select (in the preferences window) Plain text instead of Rich text and
then select Ignore rich text commands in HTML files.
 This is very important because if you don't do this HTML codes probably won't work.

NOTE: One thing you should avoid using is a word processor (like Microsoft Word) for authoring your
HTML documents.

What is an html File?

 HTML stands for Hyper Text Markup Language.
 The public files on the web servers are ordinary text files, much like the files used by word-
processing software. To allow Web browser software to read them, the text must be formatted
according to a generally accepted standard. The standard used on the web is Hypertext markup
language (HTML).
 HTML uses codes, or tags, to tell the Web browser software how to display the text contained in the
document.
 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an html or html file extension

Web Authoring: By Ms. Hafswa Nakato 2020 11

HTML Page Structure
 The first thing to know about any HTML/XHTML page code structure is that, other than the doctype,
all coding falls into one of three sections. This structure is built like a plain cheeseburger: a top and
bottom bun, a slice of cheese below the top bun, and a patty (beef, chicken, garden) below the cheese
and above the bottom bun.
a) HTML - the bun
b) Head - the cheese
c) Body - the meat (or garden) patty

Body (the visible stuff)

 Everything inside this element is shown inside the main browser window.
 The body section of the web page code is where you will code for all the content the visitor will see:
the banner segment, navigation segment, content segment, footer segment, and content segment
sidebars.
<html>
<head>
</head>
<body>
All visual web page segments here.
</body>
</html>

Head (the hidden stuff)

 The head section of the web page code contains mostly hidden information about the page, called
meta tags, title, script, and style.

 Before the <body> element you will often see a <head> element. This contains information about
the page (rather than information that is shown within the main part of the browser window
 You will usually find a <title> element inside the <head> element.

Web Authoring: By Ms. Hafswa Nakato 2020 12

Try out
<html>
<head>NATURE IS OUR BEAUTY.
</head>
</html>

Title <title>
The contents of the <title> element are either shown in the top of the browser, above where you usually type
in the URL of the page you want to visit, or on the tab for that page (if your browser uses tabs to allow you to
view multiple pages at the same time).

All web pages in a website require a title. This title tells the search engines what the web page is, and appears in
the search engine results as the Link to the web page. It also appears on the browser tab opened to show the
web page itself. Each page in a website can and should have its own specific title as needed. – give a useful title
name.
Ways of writing;
1. <title>My Web Page</title>
2. <title>Adopt-A-Furry-Friend: About Us</title>

Try out?
<html>
<head>
</head>
<title>Nature is our Beauty
</title>
</body>
</html>
Anything written between the title tags will appear in the title bar or on top of the browser Window.

Anything written between the body tags will appear between the main browser window.

Web Authoring: By Ms. Hafswa Nakato 2020 13

HTML ELEMENTS
Elements are usually made up of two tags: an opening tag and a closing tag. Opening tag is a lesser sign (<)
and a closing tag is a greater sign (>). The closing tag has an extra forward slash in it.
Each HTML element tells the browser something about the information that sits between its opening and
closing tags.
 The HTML element begins with a start tag: <b>
 And HTML element ends with an end tag: </b>
The content of the HTML element is: This text is bold

Example 1:
This is an HTML element:
<html>
<head>
</head>
<title>My First Webpage
</title>
<body>
This is my first homepage.<b>Your welcome!!</b>
</body>
</html>

<b>This text is bold</b>

The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

Example II:
This is also an HTML element:
<body>This is my first homepage. <b>This text is bold</b>
</body>

This HTML element starts with the start tag <body>, and ends with the end tag </body>.
The purpose of the <body> tag is to define the HTML element that contains the body of the HTML
document.

HTML TAGS
What are HTML tags?
Tags act like containers. They tell you something about the information that lies between their opening and
closing tags.
 HTML tags are used to mark-up HTML elements
 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The text between the start and end tags is the element content
 HTML tags are not case sensitive, <b> means the same as <B>

Furthermore;
 The opening <html> tag indicates that anything between it and a closing </html> tag is HTML
code.
 The <body> tag indicates that anything between it and the closing

Web Authoring: By Ms. Hafswa Nakato 2020 14

  </body> tag should be shown inside the main browser window.
 Words between <h1> and </h1> are a main heading.
 A paragraph of text appears between these <p> and </p> tags.
 Words between <h2> and </h2> form a sub-heading.
 Here is another paragraph between opening <p> and closing </p> tags.
 Another sub-heading inside <h2> and </h2> tags.
 Another paragraph inside <p> and </p> tags.
 The closing </body> tag indicates the end of what should appear in the main browser window.
 The closing </html> tag indicates that it is the end of the HTML code.

Logical vs. Physical Tags

 In HTML there are both logical tags and physical tags.
 Logical tags; are designed to describe (to the browser) the enclosed text's meaning. An example of a
logical tag is the <strong> </strong> tag. By placing text in between these tags you are telling the
browser that the text has some greater importance. By default all browsers make the text appear bold
when in between the <strong> and </strong> tags.
 In the table below are some examples of logical tags;

Tag Description
<abbr> Defines abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<cite> Defines a citation
<code> Defines computer code text
<blockquote> Defines a long quotation
<dfn> Defines a definition term
<del> Defines text
<em> Defines emphasized text
<ins> Defines inserted text
<kbd> Defines keyboard text
<pre> Defines preformatted text
<q> Defines a short quotation
<samp> Defines sample computer code
<strong> Defines strong text

Physical tags on the other hand, provide specific instructions on how to display the text they enclose.
 Physical tags were invented to add style to HTML pages because style sheets were not around, though
the original intention of HTML was to not have physical tags. Rather than use physical tags to style
your HTML pages, you should use style sheets.
 In table below are examples of physical tags;

Tag Description
<b> Defines bold text
<big> Defines big text
<i> Defines italic text
<small> Defines small text
<sup> Defines superscripted text
<sub> Defines subscripted text
<tt> Defines teletype text
<u> Deprecated. Use styles instead

Web Authoring: By Ms. Hafswa Nakato 2020 15

NESTED TAGS
 You may have noticed in the example above, the <body> tag also contains other tags, like the <b>
tab.
 When you enclose an element in with multiple tags, the last tag opened should be the first tag closed.

For example:
<p><b><em>This is NOT the proper way to close nested tags.</p></em></b>
<p><b><em>This is the proper way to close nested tags. </em></b></p>

Note: It doesn't matter which tag is first, but they must be closed in the proper order.

Why Use Lowercase Tags?

 You may notice we've used lowercase tags even though I said that HTML tags are not case sensitive.
 <B> means the same as <b>. The World Wide Web Consortium (W3C), the group responsible for
developing web standards, recommends lowercase tags in their HTML 4 recommendation, and
XHTML (the next generation HTML) requires lowercase tags.

Saving your first page

 Go to the File menu and select Save as... You will need to save the file somewhere you can
remember. If you like, you could create a folder for your work.
 Save this file as file name.html.
 Make sure that the Save as type drop down has All Files selected.

HTM or HTML Extension?

 When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension
comes from the past when some of the commonly used software only allowed three letter extensions.
 It is perfectly safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are
treated as different files by the browser.

Viewing your page in a browser

 Start your web browser. Go to the File menu and select Open.
 Browse to the file that you just created, select it and click on the Open button. The result should look
something like the screen shot below.

Web Authoring: By Ms. Hafswa Nakato 2020 16

  If it doesn't look like this, find the file you just created on your computer and make sure that it has the
file extension .html (if it is .txt then you need to go back to Notepad and save the file again, but this
time put quote marks around the name "firsttest.html").

Try It?
Open your text editor and type the following text:
<! DOCTYPE html>
<html>
<head>
<title>My First Webpage
</title>
</head>
<body>
This is my first homepage.<b>Your Welcome!!</b>
</body>
</html>

Save the file as mypage.html. Start your Internet browser. Select Open (or Open Page) in the File menu of
your browser. A dialog box will appear. Select Browse (or Choose File) and locate the html file you just created
- mypage.html - select it and click Open. Now you should see an address in the dialog box, for example
C:\MyDocuments\mypage.html. Click OK, and the browser will display the page.

Example Explained
 What you just made is a skeleton html document. This is the minimum required information for a web
document and all web documents should contain these basic components.
 The DOCTYPE declaration defines the document type to be HTML.
 The first tag in your html document is <html>. This tag tells your browser that this is the
start of an html document.
 The last tag in your document is </html>. This tag tells your browser that this is the end
of the html document.
 The text between the <head> tag and the </head> tag is header information. Header
information is not displayed in the browser window.
 The text between the <title> tags is the title of your document. The <title> tag is used to
uniquely identify each document and is also displayed in the title bar of the browser
window.
 The text between the <body> tags is the text that will be displayed in your browser.
 The text between the <b> and </b> tags will be displayed in a bold font.

Looking at how other Sites are built

 A good way to learn HTML is to look at how other people have coded their html pages.
 To find out, simply click on the View option in your browsers toolbar and select Source or Page
Source. This will open a window that shows you the actual HTML of the page. Go ahead and view
the source html for this page.

To try this out for yourself, simply go to the sample code for this chapter, at www.htmlandcssbook.com/
code/ and click on the link called "View Source."
Once you have opened this page, you can look for the View menu in your browser, and select the option that
says Source or View source. (The title changes depending on what browser you are using.)
You should see a new window appear, and it will contain the source code that was used to create that page.

Web Authoring: By Ms. Hafswa Nakato 2020 17

 BASIC HTML TAGS
The most important tags in HTML are tags that define headings, paragraphs and line breaks.

Headings
 Headings are defined with the <h1> to <h6> tags.
 <h1> defines the largest heading while <h6> defines the smallest.

Note:
<h1 HTML automatically
align="left">Succeed adds</h1>
We Must an extra blank line before and after a heading. A useful heading attribute
is align.
<h3 align="center">When you’re at MUST. </h3>
<h6 align="right">Accompanied with hard work, patience, prayers and respect…</h6>

Paragraphs
 Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the
align attribute with a paragraph tag as well.
<p align="left">Succeed We Must </p>
<p align="center">When you’re at MUST. </p>
<p align="right">Accompanied with hard work, patience, and prayers….</p>

Web Authoring: By Ms. Hafswa Nakato 2020 18

 This code Would
This
display
code Would
<p align="left">Succeed We Must </p>
<p align="center">When you’re at MUST. </p>
<p align="right">Accompanied with hard work, patience, and prayers…</p>

<p>Succeed We Must </p>

Succeed We Must
<p>When you’re at MUST. </p>
<p>Accompanied with hard work, patience, prayers…</p>
When you’re at MUST.

Accompanied with hard work, patience,

prayers and respect…

Line Breaks
 The <br> tag is used when you want to start a new line, but don't want to start a new paragraph. The
<br> tag forces a line break wherever you place it. It is similar to single spacing in a document.

This code Would display

<p>Life <br>Is what you make it and no one Life
signs in for good or bad life<br> abit Is what you make it and no one signs in for good
interesting...<br></p> or bad life
abit interesting...

Note: The <br> tag has no closing tag.

Horizontal Rule
 The <hr> element is used for horizontal rules that act as dividers between sections.
 The horizontal rule does not have a closing tag. It takes attributes such as align and width. For instance:

This code Would display

<hr width=”50” align=”center”>

Comments in HTML
 The comment tag is used to insert a comment in the HTML source code. A comment can be placed
anywhere in the document and the browser will ignore everything inside the brackets. You can use
comments to write notes to yourself, or write a helpful message to someone looking at your source
code.

This code Would display

<p> This html comment would <!—This is a This HTML comment would be displayed like
comment --> be displayed like this.</p> this.

Notice you don't see the text between the tags <! -- and -->. If you look at the source code, you would see the
comment. To view the source code for this page, in your browser window, select View and then select Source.
Note: You need an exclamation point after the opening bracket <! -- but not before the
closing bracket -->.
.
Web Authoring: By Ms. Hafswa Nakato 2020 19
Try It Out!
Open your text editor and type the following text:
<html>
<head>
<title>My First Webpage
</title>
</head>
<body>
<h1 align="center">My First Webpage</h1>
<p>Welcome to my first web page. I am writing this page using a text editor and plain
old html. </p>
<p>By learning html, I'll be able to create web pages…<br>
which I am of course. </p>
</body>
</html>

Save the page as mypage2.html. Open the file in your Internet browser. To view how the page
Should look,

HTML FONTS
 The <font> tag in HTML is deprecated. The World Wide Web Consortium (W3C) has removed the
<font> tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to
define the layout and display properties of HTML elements.

 The <font> Tag Should NOT be used.

HTML BACKGROUNDS
Backgrounds
 The <body> tag has two attributes where you can specify backgrounds. The background can be a
color or an image.

Bgcolor
 The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute
can be a hexadecimal number, an RGB value, or a color name:

 The lines below all sets the background-color to black.

<body bgcolor="#000000">
<body bgcolor="rgb (0, 0, 0)">
<body bgcolor="black">

Background
 The background attribute can also specify a background-image for an HTML page. The value of this
attribute is the URL of the image you want to use. If the image is smaller than the browser window,
the image will repeat itself until it fills the entire browser window.
<body background="clouds.gif">
<body background="http://profdevtrain.austincc.edu/html/graphics/clouds.gif">

 The URL can be relative (as in the first line above) or absolute (as in the second line above). If you
want to use a background image, you should keep in mind:
 Will the background image increase the loading time too much?

Web Authoring: By Ms. Hafswa Nakato 2020 20

  Will the background image look good with other images on the page?
 Will the background image look good with the text colors on the page?
 Will the background image look good when it is repeated on the page?
 Will the background image take away the focus from the text?

Note: The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions
of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes
from its recommendations. Style sheets (CSS) should be used instead (to define the layout and display properties
of HTML elements).

Try It Out!
Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>
<body background="gradution.jpg"
bgcolor="#EDDD9E">
<h1 align="center">My First Webpage</h1>
<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text
editor and plain old html.</p>
<p>By learning html, I'll be able to create webpages like a <del>beginner</del>
pro....<br>
which I am of course.</p>
</body>
</html>

Save your page as mypage3.html and view it in your browser. To view how the page should look, visit this
web page:

 Notice: we gave our page a background color as well as a background image. If for some reason the
web page is unable to find the picture, it will display our background color.

HTML COLORS
Color Values
 Colors are defined using a hexadecimal notation for the combination of red, green, and blue color
values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value
is 255 (hex #FF). This table shows the result of combining red, green, and blue:

Web Authoring: By Ms. Hafswa Nakato 2020 21

Color Names
 A collection of color names is supported by most browsers. To view a table of color names that are
supported by most browsers visit this web page:
http://profdevtrain.austincc.edu/html/color_names.htm

Note: Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors you should
use the Color HEX value.

HTML LISTS
 HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered
lists).

a) Ordered Lists
 An ordered list is a list of items marked with numbers.
 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Web Authoring: By Ms. Hafswa Nakato 2020 22

 This code Would display
<ol>
<li>Coffee</li> 1. Coffee
<li>Milk</li> 2. Milk
</ol>

Unordered Lists
 An unordered list is a list of items marked with bullets (typically small black circles).
 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

This code Would display

<ul>
<li>Coffee</li>  Coffee
<li>Milk</li>  Milk
</ul>

Definition Lists
 Definition lists consist of two parts: a term and a description. To mark up a definition list, you need
three HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>.

This code Would display

<dl> Cascading Style Sheets Style sheets are

<dt>Cascading Style Sheets</dt> used to provide presentational suggestions
<dd>Style sheets are used to provide for
presentational suggestions for documents marked up in HTML.
documents marked up in HTML.
</dd>
</dl>

Try It out
Open your text editor and type the following:
<html>
<head>
<title>My First Webpage</title>
</head>
<body bgcolor="#EDDD9E">
<h1 align="center">My First Webpage</h1>
<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text
editor and plain old html.</p>
<p>By learning html, I'll be able to create web pages like a pro....<br>
which I am of course.</p>
Here's what I've learned:
<ul>
<li>How to use HTML tags</li>
<li>How to use HTML colors</li>

Web Authoring: By Ms. Hafswa Nakato 2020 23

<li>How to create Lists</li>
</ul>
</body>
</html>

Save your page as mypage4.html and view it in your browser. To see how your page should look;

TABLES
 Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each
row is divided into data cells (with the <td> tag).
 The letters td stands for table data, which is the content of a data cell. A data cell can contain text,
images, lists, paragraphs, forms, horizontal rules, tables, etc.

Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table.

Table Row;

This code Would display

<table>
<tr> row 1, cell 1 row 1, cell 2
<td>row 1, cell 1</td> row 2, cell 1 row 2, cell 2
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Tables and the Border Attribute

 To display a table with borders, you will use the border attribute.

This code Would display

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Web Authoring: By Ms. Hafswa Nakato 2020 24

and......

This code Would display

<table border="5">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Open up your text editor. Type in your <html>, <head> and <body> tags. From here on I will only be
writing what goes between the <body> tags.

Type in the following:

<table border="1">
<tr>
<td>Tables can be used to layout information</td>
<td> <img src="http://profdevtrain.austincc.edu/html/graphics/chef.gif">
</td>
</tr>
</table>

Save your page as mytable1.html and view it in your browser. To see how your page should look like.

Headings in a Table
 Headings in a table are defined with the <th> tag.

This code Would display

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
…</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Cell Padding and Spacing

 Cell spacing is the pixel width between the individual data cells in the table (The thickness of the lines
making the table grid). The default is zero. If the border is set at 0, the cell spacing lines will be invisible.
 The <table> tag has two attributes known as cells pacing and cell padding. Here is a table example without
these properties. These properties may be used separately or together.

Web Authoring: By Ms. Hafswa Nakato 2020 25

 This code Would display
<table border="1">
<tr>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>

Table with cell spacing and cell padding attributes;

This code Would display

<table border="1" cellspacing="5">
<tr>
<td>some text</td>
<td>some text</td>
</tr><tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>

 Cell padding is the pixel space between the cell contents and the cell border. The default for this
property is also zero. This feature is not used often, but sometimes comes in handy when you have
your borders turned on and you want the contents to be away from the border a bit for easy viewing.
 Cell padding is invisible, even with the border property turned on. Cell padding can be handled in a
style sheet.
This code Would display
<table border="1" cellpadding="10">
<tr>
<td>some text</td>
<td>some text</td>
</tr><tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>

Table Size
Table Width
 The width attribute can be used to define the width of your table. It can be defined as a fixed width or
a relative width. A fixed table width is one where the width of the table is specified in pixels. For

Web Authoring: By Ms. Hafswa Nakato 2020 26

example, this code, <table width="550">, will produce a table that is 550 pixels wide. A relative table
width is specified as a percentage of the width of the visitor's viewing window. Hence this code, <table
width="80 %">, will produce a table that occupies 80 percent of the screen.

Web Authoring: By Ms. Hafswa Nakato 2020 27

HTML Layout - Using Tables
 One very common practice with HTML, is to use HTML tables to format the layout of an
HTML page. A part of this page is formatted with two columns. As you can see on this page, there is a left
column and a right column. This text is displayed in the left column.
 An HTML <table> is used to divide apart of this web page into columns. This trick is to use a table without
borders, and may be a little extra cell-padding. No matter how much text you add to this page, it will stay inside
its column borders.

Try It Out!
Let's put everything you've learned together to create a simple page. Open your text editor and type the
following text:
<html>
<head>
<title>My First Web Page </title>
</head>
<body>
<table width="90%" cellpadding="5" cellspacing="0" >
<tr bgcolor="#EDDD9E">
<td width="200" align="top"><img src="graphics/contact.gif" width="100"
height="100"></td>
<td align="top"><h1 align="right">Janet Doeson</h1>
<h3 align="right">Technical Specialist</h3></td></tr>
<tr>
<td width="200">
<h3>Menu</h3>
<ul>
<li><a href="home.html">Home</a></li>
<li> <a href="faq.html">FAQ</a></li>
<li> <a href="contact.html">Contact</a></li>
<li> <a href="http://www.austincc.edu">Links</a> </li>
</ul></td>
<td align="top"><h2 align="center">Welcome!</h2>
<p>Welcome to my first webpage. I created this webpage without the assistance of a
webpage editor. Just my little text editor and a keen understanding of html. </p>
<p>Look around. Notice I'm able to use paragraphs, lists and headings. You may not
be able to tell, but the layout is done with a table. I'm very clever. </p>
<blockquote>
<p>I always wanted to be somebody, but now I realize I should have been more
specific.</p>
<cite>Lily Tomlin </cite> </blockquote> </td>
</tr>
</table>
<hr width="90%" align="left">
<address>
Janet Doeson<br>
Technical Specialist<br>
512.555.5555
</address>
<p>Contact me at <a href="mailto:[email protected]">[email protected]</a> </p>
</body>
</html>
Save your page as mytable2.html and view it in your browser.

Web Authoring: By Ms. Hafswa Nakato 2020 28