Embed Size (px)
Citation preview
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.
