Scribd
Upload
27 views

Document Structure: OBM255 Slide HTML 3

The document describes the basic structure and tags of HTML documents. It discusses how HTML uses tags enclosed in angle brackets to provide instructions to web browsers on how to display and structure content. It covers common tags like <html>, <head>, <title>, <body>, <p>, and <br> as well as text formatting tags like <b>, <i>, and <u>. The document also provides examples of creating simple HTML files using the Notepad text editor and viewing them in a web browser.

Uploaded by

shikakochi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

Document Structure: OBM255 Slide HTML 3

The document describes the basic structure and tags of HTML documents. It discusses how HTML uses tags enclosed in angle brackets to provide instructions to web browsers on how to display and structure content. It covers common tags like <html>, <head>, <title>, <body>, <p>, and <br> as well as text formatting tags like <b>, <i>, and <u>. The document also provides examples of creating simple HTML files using the Notepad text editor and viewing them in a web browser.

Uploaded by

shikakochi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

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 <BR>, 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 <P ALIGN=”center”>

• 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 <P>
• Insert a carriage return a blank line. Additional texts you enter will follow the
blank line. Without <p> 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>
WELCOME TO MY FIRST WEBPAGE
Everybody nowadays can have his or her own Web pages. <p> It can be built as
simply ABC as long you have the web browsers, text editors and knowing the
command of HTML.<p> 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 <P>
THE OUTPUT AS SEEN FROM A WEB BROWSER
16

BREAK LINE OR BREAK ROWS <BR>


• <BR> Its function is to identify the line break.
• Using file2.html edit words as seen below:

Exercises (lab3)
<html>
<body>
WELCOME TO MY FIRST WEBPAGE
<br>Everybody nowadays can have his or her own Web pages. <br> It can
be built as simply ABC as long you have the web browsers, text editors and
knowing the command of HTML.
</body>
</html>

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


17

BREAK LINE OR BREAK ROWS <BR>


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
<H2> </H2> Heading level 2
<H3> </H3> Heading level 3
<H4> </H4> Heading level 4
<H5> </H5> Heading level 5
<H6> </H6> Heading level 6
19

HEADINGS
Open a new Notepad file

Exercises (lab4)
<html>
<body>
<h1> this is Heading1</h1>
<h2> this is Heading2</h2>
<h3> this is Heading3</h3>
<h4> this is Heading4</h4>
<h5> this is Heading5</h5>
<h6> this is Heading6</h6>
</body>
</html>

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


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 <b>…</b> you will have the bold text.


• Italic <I>…</I> the text will become italic style
• Underline <u>…</u> it will underline the text
• Small <small>…</small> text will slightly smaller than normal
• Big <big>…</big> text will slightly bigger than normal
• Superscript <sup>…</sup> superscript text
• Subscript <sub>…</sub> 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
CHARACTER FORMATTING
Open a new Notepad file, do Lab5 & Save As “file5.html” change type “All files”

Exercises (lab5)
<html>
<body>
This is <b> boldface text </b>
This is <i> italic text </i>
This is <u> underline text </u>
This is <small> smaller text </small>
This is <big> bigger text </big>
<br>
Superscript text can be found in 4<sup>4</sup>
Subscript text can be found in H<sub>3</sub>
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

<p id="blink">This text will blink!</p> <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";
setTimeout(whiteFunc,blacktime);
}
</script>
24
CHARACTER FORMATTING
EDIT Exercises (lab5)
This text is <strike>strikethrough</strike>
<p id="blink">This text will blink!</p> <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";
setTimeout(whiteFunc,blacktime);
}
</script>
This is<b>bold text and it can be italic<i>within in</i> whereas <u> is normal underlined
text</u>
</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
<P align= “left”>…</p>

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


margin
<P align= “right”>…</p>

• Center is where the new paragraph will begin at the


center.
<P align= “center”>…</p>
26

TEXT ALIGNMENT
Open a new Notepad and do Lab6.

Exercises (lab6)
<html>
<body>
<center> WELCOME TO MY FIRST WEBPAGE</center>
<br>

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


<br>
<P align=“left”> It can be built as simply ABC as long you have the web browsers,
text editors and knowing the command of HTML. </P>
<br>
<P align=“right”>No need to hire a person to built your We pages and it saves you a
lots.</P>

</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 <font size= “1,2,3,4,5,6,7”…</font> 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>
<Font size=”1”> this is font size 1</font>
<Font size=”2”> this is font size 2</font>
<Font size=”3”> this is font size 3</font>
<Font size=”4”> this is font size 4</font>
<Font size=”5”> this is font size 5</font>
<Font size=”6”> this is font size 6</font>
<Font size=”7”> this is font size 7</font>
</body>
</html>
28

FONT CONTROL
Font color : You can have a color text by inserting the HTML color tags.
<font color= “red,blue…etc”>… </font>

Open a new Notepad file, do Lab8 & Save As “file8.html” change type
“All files”

Exercises (lab8)

<html>
<body>
<Font color=”red”> this text is red</font>
<Font color=”green”> this text is green</font>
<Font color=”yellow”> this text is yellow</font>
<Font color=”blue”> this text is blue</font>
<Font color=”purple”> this text is purple</font>
</body>
</html>
29
FONT CONTROL
FONT FACE : This tag will enable you to have the variety font text such
as Arial, Tahoma, Algerian…etc. <font face= “Arial,
Tahoma…etc”…</font>
Open a new Notepad file, do Lab9 & Save As “file9.html” change type
“All files”

Exercises (lab9)
<html>
<body>
<Font face=”Arial”> this is an Arial font</font>
<Font face=”Tahoma”> this is a Tahoma font</font>
<Font face=”Algerian”> this is an Algerian font</font>
<Font face=”Comic Sans MS”> this is a Comic Sans MS font</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>
<font size=”6”, font face=”Arial”, font color=”red”> WELCOME TO MY
FIRST WEB PAGE</font>
</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

You might also like