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 7Understanding HTML

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.4Basic HTML Tags The heading tags display : defines the larges heading : defines the smallest heading An extra blank line is always inserted after each heading

Font Style: Bold, Italic, Underline 7.5Tag Attributes and Text Formatting Tags … : Bold … : Italic … : 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.4Basic HTML Tags : defines a new paragraph An extra blank line is always inserted after each paragraph The end tag is optional Do M.C. Q.4

Line Break Tag 7.4Basic HTML Tags The line break tag display : forces a line break without starting a new paragraph No end tag is needed

Font Size and Font Type 7.5Tag Attributes and Text Formatting Tags : 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.5Tag Attributes and Text Formatting Tags Font type defined by the face attribute

7.7Add Images : defines an image to be displayed on a web page Add src attribute specifying the location of the image <IMG src= images/tree.jpgimages/tree.jpg>

The ALT Attribute 7.7Add Images The alt attribute alt attribute: defines the alternate text for an image. Especially useful when an image cannot be properly displayed 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: Video: Animation:

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.5Tag Attributes and Text Formatting Tags … : displays information in an ordered list format (point form) … : added to each listed text An ordered list

Ordered and Unordered Lists 7.5Tag Attributes and Text Formatting Tags An unordered list … : displays information in an unordered list format (bullet points)

The Anchor Tags … : 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.6Insert Hyperlinks

The Anchor Tags 7.6Insert 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.6Insert Hyperlinks …target=“_blank” : instructs the browser to open the specified resource in a new browser window

The Mailto Link 7.6Insert Hyperlinks mailto : links web page to a mail message The default software will be launched after clicking the mailto link.