Introduction to HTML

Transcript Introduction to HTML

Introduction to HTML
How much you know about web publishing?
How a website is created? What kind of tools used for
creating a website? Do you own a website?
Compiled by ackoo
Introduction to HTML
Overview:
HTML
XHTML
Reasons for learning HTML
Basic Concept of How HTML works
Do it now!
Compiled by ackoo
HTML
(Hypertext Markup Language)
• HTML is a lingua franca for web pages and creating hypertext
documents.
• It’s a text based language, a text based tool such as NOTEPAD can
be used to create HTML document.
• HTML has been used to build up web pages since 1990s and it has
been using until now and also will be used in the next generation of
web page markup language.
• The last HTML specification, ie HTML 4.01 allowed you to use both
uppercase and lowercase tags.
• The next generation of HTML is XHTML which stands for Extensible
Hypertext Markup Language, was recommended as a standard by
the W3C in 2000.
• The differences between HTML 4.01 and XHTML are actually very
slight. XHTML requires lowercase tags only but HTML can use
either uppercase or lowercase.
Compiled by ackoo
XHTML
(Extensible Hypertext Markup Language)
• XHTML is to create properly constructed
documents.
• It’s cleaner and stricter version of HTML.
• It’s almost identical to HTML 4.01
• It is intended to work with any device or system,
it works in all browser versions but also in
previous browser versions.
• XHTML is recommended by W3C.
• XHTML is the combination of HTML 4.01 with
XML which increase the strength of markup
language and useful for now and in the future.
Compiled by ackoo
“I am able to use many web
authoring tools, do I still need to
learn HTML?”
YES!
Compiled by ackoo
The Reasons…
• HTML is the basic coding of building up
web pages. We must know how it works.
• To troubleshoot broken links, or able to
key in some useful coding to our web page
in HTML forms.
• To copy tricks from other web site.
• To be more confidence in web design.
• etc
Compiled by ackoo
Some examples of HTML
There are so many examples…. browse the
Internet, and click View> Source of your
browser
Compiled by ackoo
Basic Concept of HTML Language
Structure
• HTML is build up from:Elements (orTags), Attributes, Values.
• HTML Elements--The HTML element starts
with a start tag (eg <body> and end with an
end tag (e.g </body> )
• e.g: <body> This is my first homepage
This text is bold </body>
There are two html elements found in this example.
Compiled by ackoo
Basic Concept of HTML Language
Structure
•
Elements/Tags, Attribute, and Value
(1) Container Tag
<tag> The contents that the tag affects. </tag>
<h1>Hot beaches</h1>
This is an introduction paragraph.
Container Tag with Attribute and Value
<tag attribute1=“Value”>The contents that the tag affects. </tag>
Opening Tag
attribute Value
Closing Tag
Hot beaches
<a href=“me.html”>Me</a>
(2) Standalone Tag (These tags must be closed as according to xhtml convention)
 
<img src=“logo.gif” />
<hr width=“50%” size=“6” />
Attribute Value
Opening Tag
Closing Tag
Compiled by ackoo
Basic Concept of
HTML Language Structure
example(1)
IDENTIFY:
Elements/Tags
Attributes
Values
<html>
<head>
<title> Welcome to Diamond Dog Productions!</title>
</head>
<body background="stripes.gif" link="#6600FF" vlink="#FF6633">
<img src="logo.gif" width="520" height="70" alt="Diamond Dogs
logo">
<h1> Welcome! </h1>
 Diamond Dog Productions is the state's premiere source for
musicians.
Need <a href="page2.html">more info</a> on our artists and their
schedules?
Call us at 1-800-555-1212. 
Diamond Dog Productions 
Suite 100-1000 Main Street 
Minneapolis, MN 
10101
<hr />
 Diamond Dog Productions is proud to be a member of the
<a href="http://www.music.com">Musicians' Union</a>.
</body>
</html>
Compiled by ackoo
Basic Concept of
HTML Language
IDENTIFY:
Elements/Tags
Attributes
Values
example(2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sizzle East - Where It's Spring Break All Year!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<img src="Images/east1.jpg" width="240" height="180"
alt="Sizzle East Resort - hotel and pool" />
Sizzle East is located on the Berry Islands, a chain of 30 cays and islets.
Our resort sits on the northeastern edge of the Great Bahama Bank on Great
Harbour Cay. Sport fishing is famous in the area, and diving is becoming
popular. You can dive along the many reefs in the area. Or you can lie on
the beach. Have a few cold ones, watch the scenery, celebrate not being
at work -- the choice is yours.
Watch our Sizzle slideshow
<hr />
Ready to visit? Book HERE.
</body>
</html>
Compiled by ackoo
About Tag…
 tag is deprecated (outdated) now!
With HTML 4.0 (or newer version) all formatting can be moved out
of the HTML document and into a separate style sheet, or we call
it as Cascading style sheet (CSS).
Inline style attribute for paragraph should be used when a unique
style is to be applied to a single HTML element, such as 
The style attribute can contain any CSS property.
The example shows how to change the color and the left margin of
a paragraph:

This is a paragraph

Compiled by ackoo
Do it now:
Create a simple html document which
contains
your biodata such as your name,
mailing address, yahoo messenger
id, contact number (or handphone
number), etc.
You can design your page and text with
lines, background image, text colors,
bold, italic, text with different
size/format.
FTP your file to me at
FTP host: 10.100.46.46
Login: mcc0013
Password: will be informed in class.
Ref: http://www.w3schools.com/html/
Compiled by ackoo

Introduction to HTML

Transcript Introduction to HTML

Directory