What is Markup and Markup Languages?

What is HTML?

A Basic HTML Document

Basic HTML Tags

Tag Attributes and Text Formatting Tags

Insert Hyperlinks

Add Images

7 Understanding HTML

7.1

7.2

7.3

7.4

7.5

7.6

7.7

Markup (p.4) Originally refers to the handwritten

indicators on an author’s manuscripts

7.1 What is Markup and Markup Languages?

The idea of markup

Notify a typesetter the layout of a document and the typeface to use

Markup languages

7.1 What is Markup and Markup Languages?

Instruct web browsers how to display documents by adding different ‘tags’ of a markup language. Different markup languages include

HTML XHTML MathML

Hypertext Markup language

7.2 What is HTML?

Father of the WWW -- Tim Berners-Lee

Invented by Tim Berners-Lee in 1991 One of the most common markup languages

Hypertext Markup language Web page editing programs include

Window Notepad Macromedia Dreamweaver Microsoft FrontPage

Markup tags are always enclosed in angle-brackets (<>)

HTML Markup tags (tags in pairs)

7.2 What is HTML?

Basic Structure of an HTML Document

7.3 A Basic HTML Document

The basic structure of HTML tags

Activity: Use notepad to build a web page :multimeda

1. Create a folder “html” in desktop.2. Open notepad to create the html file.3. Add the title “multimedia”4. Save the page as “mm.htm” in the

folder “html”5. Watch it in browser.

Balanced and Nested Structure

7.3 A Basic HTML Document

Balanced and unbalanced structure of an HTML document

A pair of tags enclosed within another pair of tags are regarded as a nested structure

They CANNOT cross over each other.

Heading Tags

7.4 Basic HTML Tags

The heading tags display

<H1>:defines the larges heading <H6>:defines the smallest heading

An extra blank line is always inserted after each heading

Font Style: Bold, Italic, Underline

7.5 Tag Attributes and Text Formatting Tags

<B>…</B>: Bold <I>…</I>: Italic <U>…</U>: Underline

Activity: Use notepad to build a web page :multimeda

1. Use H3, bold text to add a title:

“My Multimedia files”

Paragraph Tags

7.4 Basic HTML Tags

<P>:defines a new paragraph An extra blank line is always inserted

after each paragraph The end tag </P> is optional

Do M.C. Q.4

Line Break Tag

7.4 Basic HTML Tags

The line break tag display

<BR>:forces a line break without starting a new paragraph

No end tag is needed

Font Size and Font Type

7.5 Tag Attributes and Text Formatting Tags

<FONT>:defines the typeface and size of the font used

Scale from size 1 (smallest) to size 7 Font size defined by the size attribute

Font Size and Font Type

7.5 Tag Attributes and Text Formatting Tags

Font type defined by the face attribute

7.7 Add Images

<IMG>: defines an image to be displayed on a web page

Add src attribute specifying the location of the image

<IMG src=http://www.someserver.com/images/tree.jpg>

The ALT Attribute

7.7 Add Images

The alt attribute

alt attribute: defines the alternate text for an image.

Especially useful when an image cannot be properly displayed

<IMG src=“tree.jpg” alt=“It is a tree!”>

alternate text

Activity: Use notepad to build a web page :multimeda

1. Put an image file to the folder “html”.2.Center align the title.3.Add the following sentence under the

title using different font typefaces and left align:“My image file”

4.Add an image file with ALT attribute.

Extra: adding multimedia files: Audio:

<embed src=“music.wav” width=120 height=32></embed>

Video: <embed src=“video.mpg” width=3

20 height=240></embed>

Animation: <embed src=“flash.swf” width=32

0 height=240></embed>

Activity: Use notepad to build a web page :multimeda

1. Put an audio file, video file and animation file to the folder

“html”.

2. Insert an audio file, video file and animation file to your web page with suitable description.

Ordered and Unordered Lists

7.5 Tag Attributes and Text Formatting Tags

<OL>…</OL>: displays information in an ordered list format (point form)

<LI>…</LI>: added to each listed text

An ordered list

Ordered and Unordered Lists

7.5 Tag Attributes and Text Formatting Tags

An unordered list

<UL>…</UL>: displays information in an unordered list format (bullet points)

The Anchor Tags <A>…</A>: defines a hyperlink to

a resource on the Web The resource could be

HTML document Image Audio Animation

The resource is specified in the href attribute.

7.6 Insert Hyperlinks

The Anchor Tags

7.6 Insert Hyperlinks

If both web pages are stored in the same folder (html/), only the filename of the web page is needed to be included in the href attribute

The Target Attribute

7.6 Insert Hyperlinks

<A>…target=“_blank”</A>: instructs the browser to open the specified resource in a new browser window

The Mailto Link

7.6 Insert Hyperlinks

mailto: links web page to a mail message

The default e-mail software will be launched after clicking the mailto link.