Chapter 2 Markup Language By : Madam Hazwani binti Rahmat http://fsktm2.uthm.edu.my/hazwani/v2
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.
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
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>)
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
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).
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
Web Programming using Markup Language - Paragraph Tags Defined by <p> tag to hold sentence / paragraph. √ x √ x
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
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
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
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="http://www.mySite.com/nextpage.html”>Next page</a>
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=“http://www.mySite.com/images/pic.gif”>
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.
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
Web Programming using Markup Language - Form Tags Submit button Checkbox Text field List / Menu Radio button
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>
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>
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>
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>
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
Web Programming using Markup Language - Form Tags (Submit Button) <form> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> 1 2
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.
Tags for Interactive Web Pages - Video For example: <video width="500" height="375" controls="controls"> <source src=http://www.mySite.org/trailer.mp4 type="video/mp4"/> Your browser does not support the video tag. </video>
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=http://www.mySite.org/trailer.mp3 type="audio/mpeg"/> Your browser does not support the video tag. </audio>
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
Web Authoring Tools – Ms Word
Web Authoring Tools – Macromedia Dreamweaver
Web Authoring Tools – Ms Publisher
Web Authoring Tools – Joomla
Web Authoring Tools – Notepad
Recap CHAPTER 2 INTRO UPDATES VERSION FEATURES TAGS BASIC INTERACTIVE TOOLS