Introduction to HTML
Franklin K. Amoo
Course Objective
• We will learn what HTML is and how it works
• We will learn some basic features of HTML
• We will learn some common development
environments for creating HTML codes and
documents
• We will learn how to use HTML to create
websites
What is HTML?
• HTML stands for Hypertext Markup Language
• Hypertext is a method for linking particular
words or phrases within HTML documents to
other HTML documents
• Markup Language is a method for providing
instructions within text documents
HTML – How it Works
• HTML markup provides instructions to
determine how HTML documents will be
formatted and displayed on the web
• HTML uses special symbols called tags to
indicate that certain parts of the document
should produce certain effects when displayed
on the web
HTML Tags
• HTML tags are enclosed within angle brackets
to distinguish the tags from the content of the
document
• Angle brackets consists of the lesser than
symbol (<) and the greater than symbol (>)
• The tags are sandwiched within the lesser
than symbol and the greater than symbol
HTML Tags Explained
• Each HTML tag has two parts – a start tag and
an end tag which begins with a forward slash
• Angle brackets are as <> and </>
• An example of HTML tag is as follows
– <start tag> Some words in tags </end tag>
• The HTML instructions in the tag applies to the
content sandwiched between the start and
end tags
General HTML Document
<html>
<head>
<title>Page Title Goes Here</title>
</head>
<body>
The body goes here. Text, images, movies tables,
and all others are placed within the body
</body>
</html>
Sample HTML Document
<html>
<head>
<title>Introduction to HTML</title>
</head>
<body>
<h1>Welcome to HTML Lesson 1</h1>
<p>This is a Level 1 heading</p> </br>
<p>This is a <b>typical</b> HTML paragraph</p>
</body>
</html>
Basic Tags Meaning
• The header <h1> </h1> tag indicates that the
content should be formatted as level 1
heading
• The paragraph <p> </p> tag indicates that the
text within should be formatted as a
paragraph
• The bold <b> </b> tag indicates that the
content should be bold face
HTML Elements
• Tags define parts of the document known as
elements
• The <p> </p> tags define the paragraph
element just as the <b> </b> defines the bold
element
• The terms tag and elements are used
interchangeably
• <table>This is the table tag</table>
• <font>This is the font element</font>
HTML Attributes and Values
• Certain characteristics can be assigned to HTML
elements by adding attributes within the tag
• Each HTML element has its own unique attributes
• As an example, we can add some attributes
within the body tag to specify the background
colour and text colour
• <body bgcolor = “gold” text = “red”>
• In the above bgcolor and text are body tag
attributes
HTML Attributes and Values
• Each attribute must have a value assigned to it
• Attributes and values come together as
attribute-value pairs and written as an
equation
• The values are usually placed in quotation
marks
• The font tag has the color attribute and it is
written as
• <font color = “blue”> My text</font>
Web Browser
• The software or program that interprets and
displays the HTML document on a computer is
known as web browser
• Some popular web browsers include
– Internet Explorer
– Netscape Navigator
– Mozilla Firefox
– Flock
– Safari
– Google Chrome
Displaying in Different Browsers
• While different web browsers may display the
same HTML document with some noticeable
differences, most major and popular browsers
display the same web page almost identically
• Since HTML is a growing and evolving
standard, people with older browsers may not
be able to view new HTML elements
Browser and HTML Updates
• New HTML tags and attributes continue to be
developed.
• Therefore HTML codes and browsers receive
frequent updates every few years.
• The organisation responsible for the updates
and development of HTML standards is the
World Wide Web Consortium (W3C)
• The W3C publishes each version of HTML
• New browsers are made to support the latest
enhancement to the HTML codes
HTML Enhancements
• Every new version of HTML provides support for
new technologies that are innovative to reflect
current user needs
• Some earlier and recent features have included
supports for
– Texts and gif images
– Colours for backgrounds and text, forms, tables,
JavaScript
– Java, Frames and fonts
– Style sheets, improved versions of frames, forms and
tables
HTML Compatibility
• Users with older browsers may not be able to read
web documents that use recent enhancements
• In order to reach a larger audience it is advisable to
use tags that have been in use for a number of years
• HTML codes do not become obsolete within few
years because of deprecation of the HTML tags
downward compatibility of the HTML versions
• Deprecation is a process by which HTML tags and
attributes are succeeded by newer methods, but
continue to be supported by newer HTML standards
and by major browsers
What HTML Can Do
• We shall learn how to insert and format text in
an HTML document
• We shall also learn about what HTML can do
with tables, frames, and navigational links and
images
• The skills we gain will include inserting text on a
web page, creating headings, paragraphs, other
text elements
• We shall also learn how to change font size,
format bulleted list and numbered lists
Creating tables and Links
• HTML tables were designed to display data in
rows and columns
• HTML tables have become popular tools for
page layout design
• We shall learn how to create links in an HTML
document
• We shall also learn how to create links to other
pages of a website or other sites
• We shall also display a linked page
• The links are called Hyperlinks
HTML Development Environment
• HTML was commonly typed in any text editor or
word processor
• Today there are many software products for
creating web pages and HTML codes
• Two main categories of HTML editors
– visual environments that create HTML codes but
hide the codes behind graphics interface by drag
and drop (WYSIWYG)
– Second category is made of HTML Editors, software
products with features that allow users to work
directly with HTML codes
Using WYSIWYG Products
• Popular WYSIWYG programs range from
simple freeware as Netscape Composer to
complex and integrated software as
Dreamweaver, Microsoft FrontPage
• WYSIWYG stands for What You See Is What
You Get
• The advantage of using WYSIWYG programs is
that these type of programs allow users with
or no knowledge of HTML to create web pages
easily and quickly
Publishing Your Website
• Once the website design is completed we would
want to publish the document on the web where
it can be accessed by the public
• To publish the document, we need to upload all
documents including their correct folders to a
Web server
• A web server is a computer with software that
receives and responds to request for information
• All web files that can be accessed on the internet
reside on web servers
Options for Web Publishing
• There are different ways a web site can reside on a
web server
• The site can reside on a personal computer that
has a server software and kept online for public
access
• The site can reside on a remote computer, probably
one owned by an Internet Service Provider (ISP)
• It can also reside on a Company computer that has
a server software
• It can also be on a school/university’s computer
that has a server
Uploading Web Documents
• HTML documents are commonly uploaded to
a web server by a method called File Transfer
Protocol (FTP)
• FTP allows file transfer between different
computers on a network
• It is often easier to use FTP with an FTP client
which can be downloaded for a small fee or
some times for free
• An example is WS_FTP Pro
Exercise
• Web browsers can distinguish HTML tags from
the content of the documents because HTML
instructions are
a. Written with reserved text elements
b. Located only at the top of the document
c. Provided in separate document
d. Given in tags within angle brackets
• Web developers can assign special characteristics
to segments of web content by adding _______
to HTML tags
a. Texts and images
b. Attributes and values
c. Enhancements and versions
d. Elements and entities
Q3.
• Because of downward compatibility and
deprecation of tags code written in previous
version of HTML usually
a. Can be displayed by new browsers
b. Can not be displayed by new browsers
c. Can be displayed by only the major browsers
d. Can not be displayed by old browsers
Q4
• Adding Hyperlinks to an HTML document
allows users to
a. Increase the speed of internet access
b. Access other document
c. See more than one page in the same window
d. Split screens into two parts
Q5
• Using a WYSIWYG editor allows users to
a. Edit code directly using special tools
b. Use pre-packaged text and pictures
c. Create HTML documents without writing a code
d. Implement the most advanced HTML functions
• Web browsers can distinguish HTML tags from
the content of the documents because HTML
instructions are
– d. Given in tags within angle brackets
• Web developers can assign special
characteristics to segments of web content by
adding _______ to HTML tags
b. Attributes and values
Solutions to Exercises
• Because of downward compatibility and
deprecation of tags code written in previous
version of HTML usually
a. Can be displayed by new browsers
• Adding Hyperlinks to an HTML document
allows users to
b. Access other document
Solutions
• Using a WYSIWYG editor allows users to
c. Create HTML documents without writing a code
