Scribd
Upload
17 views42 pages

Lecture 2

Uploaded by

iakambamu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
17 views42 pages

Lecture 2

Uploaded by

iakambamu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 42

Internet Technologies & webpage

authoring

Introduction to HTML
Pre-requisites

 Before beginning this lesson, the student


must be able to…
 Have a basic understanding of how to use
computers and Windows
 Have a reasonable amount of experience in
using the Internet and the World Wide Web
 Be able to Access web pages and navigate the web

 Use search engines to locate specific information

 Download graphics from web pages


Objectives

 After completing this lesson, the student


will be able to…
 View the source of any web page
 Name and explain the uses of basic HTML tags:
<HTML></HTML><HEAD></HEAD><TITLE></TITLE>
<BODY></BODY><B></B><I></I><HR><BR><IMG...>
<P></P><UL></LI></UL>, links (awareness), header sizes
 Gather text and graphic information about a topic
 Create a simple web page using a word processing program or a text
editor
 Display the web page using a browser
Purpose of this Lesson

 The purpose is to help the student begin to


recognize the structure of HTML & Html basic
functionalities.

 Do not try to memorize the information you see. You


can always refer to an HTML reference list.
What is html
 HTML is a markup language used to write /create web
pages/documents, which can then be displayed using a
web browser program. Using HTML, you can create a
Web page with text, graphics, sound, and video.
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, but a markup
language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages
 Each HTML tag describes different document content
 HTML “tags” tell the browser (like Internet Explorer)
how to display the page.
 For example, <B>HI THERE</B> would display the
words HI THERE in bold.
HTML Tags
 HTML tags are keywords (tag names) surrounded by
angle brackets: like <html>;
<tagname>content</tagname>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag, the second tag is
the end tag, also known as opening and closing tags
respectively. The end tag is written like the start tag, but
with a slash before the tag name.
 The affected text is between the two tags
 Note: not all tags in html are paired.
 Web Browsers
 The purpose of a web browser (Chrome, IE, Firefox,
Safari etc) is to read HTML documents and display them.
 The browser does not display the HTML tags, but uses
them to determine how to display the document:
Paired Tags

Most HTML tags are paired, meaning that they have


a tag to indicate the beginning of a command and
another tag, with a forward slash ( / ) inside it, to
indicate where that command should end.
 E.g. HTML documents begin with
 <HTML>
 to indicate the beginning of the document and
finish with
 </HTML>
 to indicate the end of the document.
Nested tags
 Whenever you have HTML tags within other HTML
tags, you must close the nearest tag first
 Example:
<H1> <I> The Nation </I> </H1>

 Avoid overlapping tags as this may cause


problems in some browsers. I.e.
 <TAG1><TAG2> …. </TAG1></TAG2>
 is incorrect and some browsers may ignore
both tags
 The correct HTML would be
 <TAG1><TAG2> …. </TAG2></TAG1>
HTML Example
 <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
 The DOCTYPE declaration defines the document type
 The text between <html> and </html> describes the
web document
 The text between <body> and </body> describes the
visible page content
 The text between <h1> and </h1> describes a heading
 The text between <p> and </p> describes paragraph
The <!DOCTYPE) Declaration
 The <!DOCTYPE> declaration helps the browser to display
a web page correctly.
 There are many different documents on the web, and To
display a document correctly, the browser must know both
type and version.
 The doctype declaration is not case sensitive. All cases are
acceptable:
 E.g. <!DOCTYPE html>, <!DOCTYPE HTML>, <!
doctype html>, <!Doctype Html>
 Common Declarations
 HTML5
 <!DOCTYPE html>
 HTML 4.01
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 XHTML 1.0
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Standard Structure of HTML
 HTML consists of standard ASCI (American
Standard Character Interchange) text surrounded
by html tags. Tags are instructions which tell a web
browser how to display a document. HTML tags are
enclosed within the < and > symbols, the editor
knows that anything within those symbols needs to
be interpreted as an instruction rather than being
displayed as text.
 HTML files are saved with an .html or .htm
extension.
Sections of an Html Document

 An html document is divided into two main


sections – the head section and the body section.
The head section contains information about the
document. This is usually placed at the top of the
html document (so it can load into the browser
first) and won’t be displayed inside your browser
window. The body section contains the content of
your document that will be displayed, such as
text and images.
HTML Structure
 Each web page has a HEAD and a BODY.
 All web pages have required tags like these:
<HTML> {begin the page}
<HEAD> {some set up instructions
</HEAD> are here}
<BODY> {the main part of the page
</BODY> is here}
</HTML> {end the page}
 The HEAD section often contains web page instruction tags
like title tag that displays a page title.
 The title is displayed at the top of the window (not on the
page).
 Here is an example: <HEAD>
<TITLE>My Web Page</TITLE></HEAD>
HTML Structure

 The BODY section contains all the instructions


for the actual page display.

 Inside the body section of a web page you will


find tags that control text, graphics, lines,
links, tables and other special functions.

 Remember that some, but not all, tags come in


pairs. Like <hr><br> etc.
HTML structure

<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY>
This is where you would include the text and
images on your Web page.
</BODY>
</HTML>
The <TITLE> Tag
 The title of your Web page is very key and must
be chosen very careful;

 The title of a Web page determines its ranking in


certain search engines.

 The title will also appear on Favorite lists,


History lists, and Bookmark lists to identify your
page, and search engines always search
according to titles of web documents.
HTML Paragraph Tag
 HTML documents are divided into paragraphs.
 Paragraphs are defined with the <p> tag.
 Example;
 <p>This is a paragraph</p>
<p>This is another paragraph</p>
 Note: Browsers automatically adds an empty
line before and after paragraphs.
 Don't Forget the End Tag
 Most browsers will display HTML correctly even
if you forget the end tag:
 Example
 <p>This is a paragraph
this is unreliable as it can cause un expected
results or errors.
Text Formatting
 Manipulating text in HTML can be tricky; Often
times, what you see is NOT what you get
 For instance, special HTML tags are needed to
create paragraphs, move to the next line, and
create headings.
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
More on formatting text

 Now we will go through some of the tags that may


be used to format text. Remember that some
older browsers may not support some of these
tags.
 Bold <B> </B>
 Physical tag that will display text as bold
 <STRONG> </STRONG>
 Logical tag typically displayed as bold
 Italic <I> </I>
 Physical tag that will display text in italics
 <EM> </EM> Logical tag that will emphasize text,
typically displayed in italics
Text Formatting
 NOTE: Though there is a tag for underlining (<U>
</U>) it is not a good idea to underline text. It may
be confused with a link, since they are usually
underlined.
 The <FONT> </FONT> tag pair can be used to
change other aspects of text (e.g. color, size, etc). It
will be presented in a later chapter.
 You will often see text displayed in large, bold type,
almost like a newspaper headline.
 The “header” tags are used for this purpose.
 The largest “header” tag is <H1> </H1> (larger
numbers make smaller headers). An example:
<H1>MY PAGE</H1> displays MY PAGE <H6>MY
PAGE</H6> displays MY PAGE
Center Tag

 To center a header, the tag pair <CENTER>


</CENTER> is used.
 An example:
<CENTER>
<H1>TRAINS</H1>
</CENTER>

displays…

TRAINS
Changing the Font
 The expression <FONT FACE = “fontname”> …
</FONT> can be used to change the font of the
enclosed text
 To change the size of text use the expression
<FONT SIZE=n> …. </FONT> where n is a
number between 1 and 7
 To change the color, use <FONT
COLOR=“red”>…. </FONT>; The color can also
be defined using hexadecimal representation
( Example: #ffffff )
 These attributes can be combined to change the
font, size, and color of the text all at once; For
example, <FONT SIZE=4 FACE=“Courier”
COLOR=“red”> …. </FONT>
Headings
 HTML was originally intended to define the structure
of web documents, and Web pages are typically
organized into sections with headings. There are 6
heading levels in html with 1 being the largest so
that the most important heading should use a <H1>
tag; subheadings should use <H2> tags etc.. <h1>
defines the largest heading. <h6> defines the
smallest heading.
 To create a heading use the expression <Hn>….</Hn>
where n is a number between 1 and 6

<H1>Level 1 heading</H1>
<H2>Level 2 heading</H2>
<H3>Level 3 heading</H3>
<H4>Level 4 heading</H4>
<H5>Level 5 heading</H5>
<H6>Level 6 heading</H6>
Use the HTML heading tags for headings only. Don't use
headings to make something BIG or bold.
Aligning Text
 There are several ways of aligning text within
html. By default, text is ALIGNED to the left.
 Any tag that creates a block of text is referred to
as a block tag. <H1>, <P> and <DIV> are all
examples of block tags. Each of these tags can
use an ALIGN attribute to align the contents of the
block of text. With this method you can align a
block of text to the center, left or right.
 The ALIGN attribute can be inserted in the <P>
and <Hn> tags to right justify, center, or left
justify the text
 For example, <H1 ALIGN=CENTER> Kampala
International University </H1> would create a
centered heading of the largest size for KIU.
 <P ALIGN=”center”>All of this text would be
aligned to the Centre of the page</P>
Aligning Text
 <DIV ALIGN=”center”>This text would appear in
the centre of the page</DIV>

 Note that it is not necessary to include the ALIGN


attribute in the closing tag. When you close a tag
you also close all of its attributes.

 Note <DIV ALIGN=”center”> </DIV> is exactly


the same as <CENTER> </CENTER>. CENTER
was introduced by Netscape before they added
support for the HTML 3.0 DIV element. It was
retained in HTML 3.2 on account of its
widespread use. Now even used in html5.
Page formatting
 To define the background color, use the
BGCOLOR attribute in the <BODY> tag
 To define the text color, use the TEXT attribute
in the <BODY> tag
 To define the size of the text, type <BASEFONT
SIZE=n>
Example

<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and
images on your Web page.
</BODY>
</HTML>
Lines
 Many web pages use horizontal lines to divide the
page.
 The <HR> tag is used to draw a line.
 You can control the size (thickness in pixels) and
width (% of the window).
 Examples:
 <HR> {one pixel thick, 100% of window}
 <HR SIZE=4 WIDTH=50%>
{4 pixels thick, 50% of window}
Attributes for the <HR> tag
 WIDTH Can be specified in pixels or percentage of page
width <HR WIDTH=”150”> or <HR WIDTH=”80%”>

 ALIGN Specifies if the line will be aligned to the left,


center (use US spelling) or right <HR ALIGN=”center”>

 SIZE Specifies the height (thickness) of the line in pixels


<HR SIZE=”5”>

 NOSHADE Normally a horizontal rule will appear as an


engraved line. Specifying this option will make it appear
as a solid color. <HR NOSHADE>
IMAGE Tag

 The <IMG> tag is used to display graphics or


images in web pages.

 The main requirement for the IMG tag is the file


name (“source”) of the image.

 NOTE: Web page images DO NOT become part of a


web page file. They are separate files and must be
located in the same folder as the web page file
unless otherwise noted.
Image tag

 Type <IMG SRC = “image.ext”>, where


image.ext indicates the image name and its
extension (jpeg, png, gif etc)
 The WIDTH=n and HEIGHT=n attributes can be
used to adjust the size of an image
 The attribute BORDER=n can be used to add a
border n pixels thick around the image
 The ALT attribute can also be used as text to
display in case the image doesn’t load for
some reason.
Alternate Text

 Some browsers don’t support images. In this


case, the ALT attribute can be used to create
text that appears instead of the image.
 Example:
<IMG SRC=“risen.jpg” ALT = “Picture of
Jesus”>
IMAGE Tag
 An example of an IMG tag that displays a graphic
called ME.JPG ; <IMG SRC=“ME.JPG”>

 In the example above, the name (“source” or SRC)


of the picture file is ME.JPG (stored in the same
folder as the web page file).

 NOTE: The image file’s name must be exactly as


stored (upper/lower case, etc.)

 .JPG and .GIF indicate types of images appropriate


for web pages. Web graphics will be discussed in
more detail in a later lesson.
Lists

 Many web pages contain lists, much like you


see in this PowerPoint presentation.

 Lists can be “unordered” (using bullets like this


list) or “ordered” (with numbers or letters).

 <UL> </UL> indicates an unordered (bulleted)


list.

 <OL> </OL> indicates an ordered list.

 <LI> </LI> is used for each list item.


Ordered lists

Ordered lists are a list


of numbered items. This is how it
To create an ordered would look on the
list, type as below; Web:
 <OL> 1. Dogs
 <LI>Dogs</LI> 2. Cats
 <LI>Cats</LI> 3. Lizards
 <LI>Lizards</LI>
 </OL>
List Examples

These tags… Produce this list…


 <UL> • Dogs
 <LI>Dogs</LI> • Cats
 <LI>Cats</LI> • Lizards
 <LI>Lizards</LI>
 </UL>
More on Ordered Lists….

 The TYPE=x attribute allows you to change the


the kind of symbol that appears in the list.
 A is for capital letters
 a is for lowercase letters
 I is for capital roman numerals
 i is for lowercase roman numerals
Un ordered lists

 An unordered list is a
list of bulleted items
Here’s how it would
 To create an unordered look on the Web:
list, type:
<UL>
<LI> First item in list
</LI>
<LI> Second item in
list</LI>
<LI> Third item in
list</LI>
</UL>
More on Unordered Lists...

 The TYPE=shape attribute allows you to


change the type of bullet that appears
 circle corresponds to an empty round bullet
 square corresponds to a square bullet
 disc corresponds to a solid round bullet; this
is the default value
Definition lists
 These are lists of terms and their corresponding
descriptions. Definition lists are typically formatted
with the term on the left with its description on the
right or on the next line. The definition text is
typically indented with respect to the term.
 The opening list Tag is <DL>, it is followed by an
optional list Header (<LH>Caption</LH>) and then
by the definition term tag <DT>, and then the
definition Description tag <DD>.
 Example: <DL>
<LH>List header</LH>
<DT>Term 1<DD>This is the description
of the first term.</DD></DT>
<DT>Term 2<DD>This is the description
of the SECOND term.</DD></DT>
</DL>
HTML Comments

 Comments can be inserted in the HTML code to


make it more readable and understandable.
Comments are ignored by the browser and not
displayed.
 Comment statements are notes in the HTML code
that explain the important features of the code
 The comments do not appear on the Web page itself
but are a useful reference to the author of the page
and other programmers
 To create a comment statement use the tags below;
 <!-- This is a comment -->
HTML Line Breaks
 Use the <br /> or <br> tag if you want a line
break (a new line) without starting a new
paragraph:
 Example
 <p>This is<br />a para<br />graph with line
breaks</p>

 The <br /> tag is an empty tag. It has no end tag


like </br>.
 You can read more about empty HTML tags in the
next chapters of this tutorial.
 <br> or <br />
 In XHTML, XML, and future versions of HTML, tags
with no end tags (closing tags) are not allowed.
 Even if <br> works in all browsers, writing <br />
instead is more future proof.

You might also like