Document Structure: OBM255 Slide HTML 3

1
HTML
DOCUMENT
STRUCTURE
OBM255 Slide HTML 3
PRESENTED BY:
Compiled & Edited by: Madam Rozita Mengen (Sr. Lecturer)
2
How HTML is Structured
• 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 < and > symbols
so your 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.
3
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.
4
Paired Tags (Cont’d)
• You should avoid overlapping tags as this may

cause problems in some browsers.
EXAMPLE
• <TAG1><TAG2> …. </TAG1></TAG2>
• is incorrect and some browsers may ignore both tags
• The correct HTML would be

• <TAG1><TAG2> …. </TAG2></TAG1>
• Some tags are not paired.

• EXAMPLE if you indicate a carriage return with a break
tag , there is no need to indicate where the carriage
return finished. It all happens in the one spot.
5
Tag Attributes
• Many HTML tags contain one or more attributes that can give extra
information to tell the browser how to interpret the tag. In most tags, the
attributes are optional.
• example 
• When a tag is using attributes, the name of the tag is written first,
followed by a space. Then the name of the attribute and an equal sign.
Next is the attribute itself enclosed in quotation marks.
• Single quotes can be used but double quotes are more common. Most
browsers will accept attributes without quotation marks but it is best to
include them as in the example below.
• <TAG ATTRIBUTE1=”value1” ATTRIBUTE2=”value2”> </TAG>

6
Tag Attributes (Cont’d)

• When a tag uses attributes, they only need to be written in the opening
tag. A closing tag will end a tag as well as all of its attributes.
• It doesn’t matter if you use upper case tags
<HTML> or lower case tags <html>.
• It is, however, a good idea to be consistent.
• The WWW Consortium recommends writing

your tags and tag attributes in uppercase
letters. That will make it easier for you to recognise and edit your tags
later since uppercase text stands out from normal text.
• Some editors allow you to specify whether the tags they insert are in
uppercase or lowercase characters.
7
STANDARD TAGS AND FORMAT USED

The correct structure for an HTML document starts
with
<html>
<title> MY FIRST WEBPAGE </title>
<body>
IN MY WEB PAGE I WILL SHARE MY PICTURES
</body>
</html>
8
STANDARD TAGS AND FORMAT USED

File naming convention
• Every HTML file should have an extension of “.htm” or ”.html” in order to
the browser can recognize it.
• HTML was originally developed by Tim Berners Lee while at CERN, and
popularized by Mosaic browser development at NCSA.
Hypertext
• Hypertext is text with links. With hypertext the computer makes the
following such references as easy as turning the pages. Readers can
escape from the sequential organization of the pages.
Text editor
• Capable of creating plain text files by using Notepad for Windows and
Simple Text for Macintosh. If you using a word processor program then
you must save your files as plain ASCII text format.
9
LAB EXERCISES
• Before starting the lab exercises using Notepad
• Create a folder named <OBM255_Lab_Xs> in your
thumb drive and then transfer it into your Google drive
as a backup after each class.
• You must always save all your lab work in that folder.
10
STEPS TO LAUNCHED THE NOTEPAD
One of Many Ways to do it:

1. Click your Start button
2. Drag your cursor to the Program folder
3. Locate the Accessories folder
4. Drag the cursor the Notepad applications
OR
1. Go to windows bottom left hand side
2. Use the search option and type Notepad
3. Click on the Notepad ICON and start using it
11
CREATING AND VIEWING YOUR FIRST HTML FILE
Exercise (lab1)
• Open your Notepad & Web Browser on your screen
• Then type this on your Notepad screen
<html>
<title>MY WEB</title>
<body>
WELCOME TO MY FIRST WEBPAGE
</body>
</html>
• Save the file by pressing
• File => Save As “file1.html”
• Change the save as type from <Text Document>
to <All Files>
12
CREATING AND VIEWING YOUR FIRST HTML FILE

13
MODIFYING AN EXISTING HTML FILE
You can at any time to make modifying to your

HTML file. After completely made changes:
• you can simply save the file.
• To confirm the changes you have made, you
need to refresh the page by using the Refresh
button
14
HTML TAGS AND APPLICATIONS

PARAGRAPHS 
• Insert a carriage return a blank line. Additional texts you enter will follow the
blank line. Without tag, the text in your HTML document will appear as
large continuous paragraph.
• Using file1.html edit words as seen below:
Exercises (lab2)
<html>
<body>
Everybody nowadays can have his or her own Web pages. It can be built as
simply ABC as long you have the web browsers, text editors and knowing the
command of HTML. No need to hire a person to built your Web pages and it
saves you a lots.
</body>
</html>
Save As “file2.html” .. reminder !! Change the file type to “All files”
15
PARAGRAPHS 
THE OUTPUT AS SEEN FROM A WEB BROWSER
16
BREAK LINE OR BREAK ROWS 

• Its function is to identify the line break.
• Using file2.html edit words as seen below:
Exercises (lab3)
<html>
<body>
 Everybody nowadays can have his or her own Web pages. It can
be built as simply ABC as long you have the web browsers, text editors and
knowing the command of HTML.
</body>
</html>

17
BREAK LINE OR BREAK ROWS 

18
HEADINGS
Lines of text, formatted differently from the body text that you may use to
structure the content of your Web page. Heading can be section titles,
page titles and so on. There are 6 levels of headings
Opening tag Closing tag Purpose

<H1> </H1> Heading level 1
19
HEADINGS
Open a new Notepad file
Exercises (lab4)
<html>
<body>
<h1> this is Heading1</h1>
</body>
</html>

20
CHARACTER FORMATTING
You can control the appearance and arrangement of text on your web pages by
incorporating boldface, italics and other special text formatting. In using the text
formatting, you can combine more than one tag at the same time. This is
called nested tags or format.
• Boldface … you will have the bold text.

• Italic … the text will become italic style
• Underline … it will underline the text
• Small … text will slightly smaller than normal
• Big <big>…</big> text will slightly bigger than normal
• Superscript … superscript text
• Subscript … subscript text
• Strike <strike>…</strike> strikethrough text
• Blink <blink>…</blink> blinking text (use for theory but is
obsolete and cannot be used
for webpage display)
21
Open a new Notepad file, do Lab5 & Save As “file5.html” change type “All files”
Exercises (lab5)
<html>
<body>
This is boldface text 
This is italic text 
This is underline text 
This is smaller text 
This is <big> bigger text </big>
 
Superscript text can be found in 44
Subscript text can be found in H3
This text is <strike>strikethrough</strike>
</body>
</html>
22
Go to website
https://stackoverflow.com/questions/18105152/alternative-for-blink
23
Go to website
https://stackoverflow.com/questions/18105152/alternative-for-blink
Copy and Paste below’s intruction
This text will blink! <script>

var blacktime = 1000;
var whitetime = 1000;
//These can be as long as you desire in milliseconds
setTimeout(whiteFunc,blacktime);
function whiteFunc(){
document.getElementById("blink").style.color = "white";
setTimeout(blackFunc,whitetime);
}
function blackFunc(){
document.getElementById("blink").style.color = "black";
}
</script>
24
EDIT Exercises (lab5)
This text is <strike>strikethrough</strike>
This text will blink! <script>
var blacktime = 1000;
var whitetime = 1000;
//These can be as long as you desire in milliseconds
function whiteFunc(){
document.getElementById("blink").style.color = "white";
setTimeout(blackFunc,whitetime);
}
function blackFunc(){
document.getElementById("blink").style.color = "black";
}
</script>
This isbold text and it can be italicwithin in whereas is normal underlined
text
</body>
</html>
25
TEXT ALIGNMENT
Helps you to begin the new paragraph either should be aligned
to the left margin, right margin or center of the page
• Left margin is where the paragraph will start at the left margin
…
• Right margin is where the paragraph will start at the right

margin
…
• Center is where the new paragraph will begin at the

center.
…
26
TEXT ALIGNMENT
Open a new Notepad and do Lab6.
Exercises (lab6)
<html>
<body>
<center> WELCOME TO MY FIRST WEBPAGE</center>
 
Everybody nowadays can have his or her own Wepages.

 
 It can be built as simply ABC as long you have the web browsers,
text editors and knowing the command of HTML. 
 
No need to hire a person to built your We pages and it saves you a
lots.
</body>
</html>
Save As “file6.html” change type “All files”
27
Font control: Helps you to To control
the font either in size, face or color.
Font size to set the size of any
text on a Web page. Its valid range are from 1 to 7.
Open a new Notepad file, do Lab7 & Save As “file7.html” change type “All
files”
Exercises (lab7)
<html>
<body>
 this is font size 1
</body>
</html>
28
FONT CONTROL
Font color : You can have a color text by inserting the HTML color tags.
… 
Open a new Notepad file, do Lab8 & Save As “file8.html” change type
“All files”
Exercises (lab8)
<html>
<body>
 this text is red
 this text is green
 this text is yellow
 this text is blue
 this text is purple
</body>
</html>
29
FONT CONTROL
FONT FACE : This tag will enable you to have the variety font text such
as Arial, Tahoma, Algerian…etc. 
Open a new Notepad file, do Lab9 & Save As “file9.html” change type
“All files”
Exercises (lab9)
<html>
<body>
 this is an Arial font
 this is a Tahoma font
 this is an Algerian font
 this is a Comic Sans MS font
</html>
</body>
30
FONT CONTROL
COMBINATION OF FONT TAGS: You can combine all the font tags in
one-text documents such as size, face and color.
Open a new Notepad file, do Lab & Save As “file10.html” change type
“All files”
Exercises (lab10)
<html>
<body>
 WELCOME TO MY
FIRST WEB PAGE
</body>
</html>
31
LAB 11 TO 29
 Open your OBM255 : NOTES COMPLIATION
(6th Edition 2018)
 Turn to page …… until page …… and do the

rest of the lab exercise for HTML
 Save your work as according to the Lab Number

“file11.html …. file29.html”
 You will be ask later on the work done and what

type of tags used for what function.
 BE ALERT ON WHAT YOUR CODING IS ALL
ABOUT!!!
32
THE REST OF THE TAGS CODING

• ARRANGING TEXT LIST • ADD BORDERS
• Ordered lists • CHANGING BACKGROUND
• Bulleted lists COLORS
• Defination list • BACKGROUND IMAGE TILES
• NAVIGATING TEXT • LAYOUT WITH TABLES
• Link to a specific page • Table with different number
• Remote links
and column/rows
• Image in Table
• E-mail links
• PLACING AN IMAGE
• Aligning an image
• Labeling ImageF
• Hot-Spot Image
• No Borders for Image
33
Questions??
Recapturing…
Honestly ..
DID YOU do the lab 11 to 29 exercises
on your own?? OR DID NOT!!!
What have you achieved??
THE END

Document Structure: OBM255 Slide HTML 3

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Document Structure: OBM255 Slide HTML 3

Uploaded by

Copyright:

Available Formats

1

How HTML is Structured

• HTML consists of standard ASCI (American

• E.g. HTML documents begin with <HTML>

Paired Tags (Cont’d)

• You should avoid overlapping tags as this may

• The correct HTML would be

• Some tags are not paired.

• example <P ALIGN=”center”>

• <TAG ATTRIBUTE1=”value1” ATTRIBUTE2=”value2”> </TAG>

Tag Attributes (Cont’d)

• The WWW Consortium recommends writing

STANDARD TAGS AND FORMAT USED

STANDARD TAGS AND FORMAT USED

STEPS TO LAUNCHED THE NOTEPAD

One of Many Ways to do it:

CREATING AND VIEWING YOUR FIRST HTML FILE

CREATING AND VIEWING YOUR FIRST HTML FILE

MODIFYING AN EXISTING HTML FILE

You can at any time to make modifying to your

HTML TAGS AND APPLICATIONS

BREAK LINE OR BREAK ROWS <BR>

Save As “file3.html” .. reminder !! Change the file type to “All files”

BREAK LINE OR BREAK ROWS <BR>

Opening tag Closing tag Purpose

Save As “file4.html” .. reminder !! Change the file type to “All files”

• Boldface <b>…</b> you will have the bold text.

<p id="blink">This text will blink!</p> <script>

• Right margin is where the paragraph will start at the right

• Center is where the new paragraph will begin at the

<P align=“center”>Everybody nowadays can have his or her own Wepages.</P>

 Turn to page …… until page …… and do the

 Save your work as according to the Lab Number

 You will be ask later on the work done and what

THE REST OF THE TAGS CODING

You might also like