Download presentation
Presentation is loading. Please wait.
1
Chapter 2 Markup Language By : Madam Hazwani binti Rahmat
2
Introduction and Updates to Markup Language
Markup languages (ML) is the language that annotates text so that the computer can manipulate (format and align) the text.. Most ML are human readable because they are written in a way to distinguish them from the text (tag based). Example: XML, HTML, XHTML ML such as HTML (HyperText Markup Language) are used to build web pages and dictates how a browser will load, format and align text and graphics on a web page.
3
Introduction and Updates to Markup Language
Various versions of HTML has been published. YEAR PUBLISHED VERSIONS 1990 HTML 1995 HTML 2.0 1997 HTML 3.0 1999 HTML 4.0.1 2008 HTML 5 Table 1: Versions of HTML
4
Introduction and Updates to Markup Language
HTML 5 introduces more features and changes into HTML. Some of established features of HTML 5 are: Reduce the need for external plugins (Ex: <video>) New markup to replace scripting / extra coding (Ex: <video>) New form control features (Ex: required, placeholder) Supported element and scripting for 3D uses (Ex: <canvas>) More control over media playback (Ex: <audio>)
5
Web Programming using Markup Language
In HTML, the markup tags are < and >. The HTML markup tags comes in pairs (opening tags and closing tags). For example: <p>this is a paragraph of text written in HTML</p> Closing tag Opening tag text
6
Web Programming using Markup Language - Basic HTML Page Structure
Placed at top of every HTML 5 page (indicates HTML version) <!DOCTYPE html> <html> <head> </head> <body> </body> </html> indicates that everything between <html> and</html> is code that conforms to the standards of the type of HTML dictated by the doctype declaration Tags for content display. Ex: formatting tags, hyperlink and images special instruction for Search Engine Optimization (SEO).
7
Web Programming using Markup Language - Heading Tags
Titles of web content were placed in <h1> tags which define most important heading on the page. Subtitles (least important) went in <h2> through <h6> tags. INCREASE DECREASE Font size and relative importance
8
Web Programming using Markup Language - Paragraph Tags
Defined by <p> tag to hold sentence / paragraph. √ x √ x
9
Web Programming using Markup Language - List Tags
The most common list are: (1) Ordered List and (2) Unordered List Printer Mouse Keyboard Ordered List Printer Mouse Keyboard Unordered List
10
Web Programming using Markup Language - List Tags
Ordered List : Starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. For example: <ol> <li>List item 1</li> <li>List item 2</li> </ol> Printer Mouse Keyboard Ordered List
11
Web Programming using Markup Language - List Tags
Unordered List : Starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). For example: <ul> <li>List item 1</li> <li>List item 2</li> </ul> Printer Mouse Keyboard Unordered List
12
Web Programming using Markup Language - Anchor Tags
Hyperlink defines by <a> tag. The href attribute specifies the destination of a link (url). Links text / image to another document. For example: <a href=" page</a>
13
Web Programming using Markup Language - Img Tags
Images defines by <img> tag. The src attribute specifies the source of image for display(url). Links text / image to another document. For example: <img src=“
14
Web Programming using Markup Language - Table Tags
Defined by <table> tag. Divided into rows (with the <tr> tag) Each row is divided into column (with the <td> tag). td stands for "table data," and holds the content of a cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
15
Web Programming using Markup Language - Table Tags
TD TR <table> <tr> <td>Row 1 - Col 1</td> <td>Row 1 - Col 2</td> </tr> <tr> <td>Row 2 - Col 1</td> <td>Row 2 - Col 2</td> </tr> </table> Row 1 - Col 1 Row 1 - Col 2 Row 2 - Col 1 Row 2 - Col 2
16
Web Programming using Markup Language - Form Tags
Submit button Checkbox Text field List / Menu Radio button
17
Web Programming using Markup Language - Form Tags
Defines a HTML form by <form> tag. HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. For example: <form name="input" action=“action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
18
Web Programming using Markup Language - Form Tags (Text Field)
1 2 <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
19
Web Programming using Markup Language - Form Tags (Radio Button)
1 2 3 <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
20
Web Programming using Markup Language - Form Tags (Checkbox)
1 2 3 <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
21
Web Programming using Markup Language - Form Tags (Menu / List)
2 <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </select> </form> 1 3
22
Web Programming using Markup Language - Form Tags (Submit Button)
<form> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> 1 2
23
Tags for Interactive Web Pages – Video
One of the most beneficial and popular HTML5 feature is <video> element (tag). The <video> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg.
24
Tags for Interactive Web Pages - Video
For example: <video width="500" height="375" controls="controls"> <source src= type="video/mp4"/> Your browser does not support the video tag. </video>
25
Tags for Interactive Web Pages - Audio
Defines sound, such as music or other audio streams by <audio> tag. Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg. For example: <audio controls="controls"> <source src= type="audio/mpeg"/> Your browser does not support the video tag. </audio>
26
Web Authoring Tools Web authoring tools are used to create web content, and cover a wide range of software programs. The programs include word processors, desktop publishing programs, webpage builders, website management systems and HTML editors. Any software program that can be used to create content that can be uploaded and viewed on the Internet or intranet network systems is considered a web authoring tool. Example: Microsoft Word, Macromedia Dreamweaver, Microsoft Publisher, Joomla and Notepad
27
Web Authoring Tools – Ms Word
28
Web Authoring Tools – Macromedia Dreamweaver
29
Web Authoring Tools – Ms Publisher
30
Web Authoring Tools – Joomla
31
Web Authoring Tools – Notepad
32
Recap CHAPTER 2 INTRO UPDATES VERSION FEATURES TAGS BASIC INTERACTIVE
TOOLS
Similar presentations
