Post on 31-Dec-2015
Chapter 2Chapter 2
Introduction to HTML
Learning Outcomes
Describe Hypertext Markup Language (HTML).
Introduce HTML syntax. Recognize basic structure of HTML: Head,
Title and Body. Explain basic text formatting, headings, line
breaks, paragraphs and lists.
Hypertext Markup Language (HTML)
A markup language. Not case-sensitive. (recommended in small
case) An organization called the World Wide Web
Consortium (W3C) was created to develop common standard, maintain compatibility and promote WWW.
HTML syntax
All HTML commands or keyword (tag) must be enclosed in angle brackets (<keyword>)
Most HTML tags come in pairs – starting tag and ending tag. E.g. <html> </html>
Does not recognize line breaks or paragraph breaks or more than one blank space.
HTML tags may have attributes such as width, height and color that affect the appearance of the content.
… continued HTML files is actually a text file. File must be saved as .htm or .html Make sure all file names are in small-case and in
one word (no spacing in file name). Browser will open the file as web page only if the
first and last tag are <html> ... </html> tags.
You can create HTML file using any text editor such as notepad. (do not use Microsoft Word)
Basic structure
<html>
<head>
<title>My first page</title>
<body>
Insert content here …
</body>
</html>
Hmm… there is
something missing ..
… continued
<head> and <title> HTML document is divided into two; head and body.
<head> section contains all of the document’s header information.
<title> tags is placed in the head section which define the title of the document.
Title can be seen at the top of the browser’s title bar and also appears in the history list/bookmark.
… continued
<body> <body> comes after the <head> structure.
Make sure you close with </head> before you start <body>.
Contents you want to display in the browser must be inserted between the
<body> … </body> tags This includes text, graphics, links, etc.
Basic structure<html>
<head>
<title>My first page</title>
</head>
<body>
Insert content here …
</body>
</html>
Comment tag
If you wish to leave notes in a HTML document but do not want them to appear when you open a browser window, you would need to use the COMMENT Tag.
Example:
<!-- Hi , I am a comment. -->
Heading tags <h1> … <h6>
Heading structures are the most commonly used to set apart documents or section titles.
There are 6 levels of headings From Heading 1(<h1>) through Heading 6
(<h6>)
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6
Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6
A heading always begins at the margin of a line and always forces a line break at the end of the heading.
You cannot have two heading levels on the same line.
You should not highlight the text in the middle of a paragraph by marking it as a heading. It would produce unwanted effects.
… continued
Example (Heading)
<html>
<body>
<h1>VISION</h1>
To be a leader in offering quality diploma programmes to the public.
</body>
</html>
Output
If you wish to end a line after a certain word you can invoke the line break tag.
Otherwise, the browser will display as many words as it can in one line, then continue the remaining words in the next line.
Denoted by <br> No corresponding </br> Tag Forces a line break wherever you place it in the
content. (add multiple <br> to get more empty lines)
Line Breaks
Example (no linebreak)
<html>
<body>
The Centre for Diploma Programme (CDP) is an academic centre which is located at the second floor, Block B, Melaka Campus. It offers diploma programmes and collaborates with local colleges and international institutions of higher learning on academic matters.
</body>
</html>
Output
Example (with linebreak)
<html>
<body>
The Centre for Diploma Programme (CDP)<br>
is an academic centre which is located at the second<br>
floor, Block B, Melaka Campus. It offers diploma<br>
Programmes and collaborates with local colleges and<br>
international institutions of higher learning on<br>
academic matters.
</body>
</html>
Output
Paragraph break is similar to line break but it will add one empty line.
The beginning of a paragraph is denoted by <p>
The ending tag </p> is optional. However, if you put multiple <p> you will
not get extra lines.
Paragraph break
Example (with paragraph break)
<html>
<body>
<p>
The Centre for Diploma Programme (CDP)<br>
is an academic centre which is located at the second<br>
floor, Block B, Melaka Campus.
<p>
It offers diploma programmes and collaborates with<br>
Local colleges and international institutions of<br>
Higher learning on academic matters.
</body>
</html>
Output
Blockquotes are handy for those long pieces of text, which are quoted material and therefore need to be set apart and indented.
Blockquotes are set up as follows
<blockquote> content </blockquote>
Blockquotes
Example (with blockquote)
<html>
<body>
Diploma in Business Information Technology (DBIS)
<blockquote>Pass SPM or equivalent with at least 4Cs or<br>
Pass STPM or equivalent with at least 2 Principals.
</blockquote>
</body>
</html>
Output
Simple in concept, powerful in execution Three main types
• unordered lists• ordered lists• definition lists
Lists
Unordered lists are basically bullet lists List of items each one preceded by a
“bullet” Begins and ends with <ul> and </ul> Each item in the list is denoted by <li>
with an optional closing </li> tag
Unordered lists
<ul>
<li>Monday
<li>Tuesday
<li>Wednesday
<li>Thursday
<li>Friday
</ul>
Example (Unordered lists)
Monday Tuesday Wednesday Thursday Friday
Example 2 (Unordered lists)
<html>
<body>
<h2>MISSION</h2>
<ul>
<li>To uphold the mission of Multimedia University.
<li>To produce professionals, flexible, well-trained and competent individual<br>to meet the demands of the nation's industry.
<li>To extend educational opportunities to a wider cross-section of Malaysian
</ul>
</body>
</html>
Output
Also called as Numbered list Denoted by <ol> and </ol> When ordered list is displayed in Web
Browser, it uses an automatically generated sequence as if item markers
Ordered lists
<ol>
<li>Monday
<li>Tuesday
<li>Wednesday
<li>Thursday
<li>Friday
</ol>
Example (Ordered lists)
1. Monday2. Tuesday3. Wednesday4. Thursday5. Friday
Almost anything can be put into a list item• line breaks, • entire paragraphs,• images, • links and • even other lists (nested lists).
Unordered lists can be nested in ordered lists and vice-versa
Nested lists
<ol>
<li>Monday
<li>Tuesday
<li>Wednesday
<ul>
<li>6am - 9am
<li>10am-12pm
</ul>
<li>Thursday
<li>Friday
</ol>
Nested lists
1. Monday2. Tuesday3. Wednesday
• 6am – 9am• 10am – 12pm
4. Thursday5. Friday
Begins and ends with <dl> and </dl> Definition lists are not based on list items
like ordered and unordered lists (unmarked list)
Definition lists are based on term-definition pairs denoted by <dt> and <dd>
<dt> stands for Definition-List Term <dd> stands for Definition-List Definition
Definition list
<dl><dt>Do<dd>a deer, a female deer<dt>Re<dd>a drop of golden sun<dt>Mi<dd>a name, I call myself</dl>
Example (Definition lists)
Output
Basic text formatting
You can apply styles such as bold, italics or underline to your text. (underline is not recommended so that user won’t confuse it with hyperlink.
To create a bold text, you can use a pair of <b> … </b> or <strong> … </strong>
To create an italicize text, put it between <i> … </i> or <em> … </em>
<html><head><title>Basic Formatting</title></head><body>Look I am <b>bold</b> and <strong>strong</strong><br>I have been <i>italicized</i> and <em> emphasized</em></body></html>
Example
Output
Horizontal rules
This tag creates a horizontal rule across the document
Can be achieved using <HR> No corresponding </HR> Not allowed within headings Can act as a section divider
Example (Horizontal rules)
<html>
<body>
<h1>VISION</h1>
<hr>
To be a leader in offering quality diploma programmes to the public.
</body>
</html>
Output
Special characters
Some characters such < , > and = have special meaning in HTML.
There are also special character that can not be type such as © and ™ or even a blank space.
There is a special way to insert these characters in HTML document.
We can use either number entities or named entities.
Special charactersCommonly-Used Special Characters
Name Symbol HTML Equivalent
ampersand & &
cent sign ¢ ¢
copyright symbol © © or ©
degree sign ° °
greater than > >
less than < <
Quote “ "
non-breaking space
registered trademark ® ®
trademark ™ ™
Example
<html>
<head>
<title>Basic Formatting</title>
</head>
<body>
<br> for line break<br>
Multimedia University©
</body>
</html>
Output
Summary
HTML was designed specifically for use on the World Wide Web.
Most of the HTML commands have an opening and closing tag.
HTML documents are divided into two segments: the head and the body.
The head segment is where you would place JavaScript, style sheets, Meta commands, etc.
Summary
A Web page's title identifies the subject or purpose of the page.
The body of the Web page contains the information that displays in the browser window.
Normal text also can be formatted to display as bold (<B>), italic (<I>) or underlined (<U>) text and must end with the ending tag.
Summary
Headings are used as a title for a paragraph. Line break tag (<br>) ends a line whether
following text or graphics. The paragraph tags (<p>) tells the browser
the text is in one separate paragraph. There are three primary types of list :
ordered lists, unordered lists and definition lists.