1. Session 2 Introduction to HyperText Markup Language 4 (HTML 4) Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5

2. Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : menghasilkan web page dengan menggunakan tag-tag HTML yang digunakan untuk Headers, Text Styling, Linking, Image, Font, Special Characters, Horizontal Rules dan Line Break (C3)

3. 2.1 Introduction 2.2 Markup Languages 2.3 Editing HTML 2.4 Common Tags 2.5 Headers 2.5 Text Styling 2.6 Linking 2.7 Images 2.7 Formatting Text With 2.8 Special Characters, Horizontal Rules and More Line Breaks Outline

4. 2.1 Introduction HTML (Hypertext Markup Language) –Not a procedural programming language like C, Fortran, Cobol or Pascal –Markup language For identifying the elements of a page so that a browser can render that page on your computer screen Presentation of a document vs structure

5. 2.2 Markup Languages HTML is a markup language –Used to format text and information –Text is marked up with elements, delineated by tags HTML tags –Keywords contained in paired of angle brackets –Not case sensitive –Keep all the letters in one case to improve program readability Syntax Error in HTML –Forgetting to include closing tags for elements is a syntax error –Usually not fatal

6. 2.3 Editing HTML HTML Files or Documents –Written in source-code form using text editor –HTML-Kit: http://www.chami.com/html-kit –File name extention:.htm or.html –Name your files to describe their functionality –File name of your home page (the first of your HTML pages) should be index.html

7. 2.4 Common Tags Always include … tags Comment are placed inside tags HTML documents –HEAD section Information about the document Information in header not generally rendered in display window TITLE element names your Web page –BODY section Page content Includes text, images, links, forms, etc. Body element –include backgrounds, link colors and font faces –P element forms a paragraph, blank line before and after the paragraph Sample Program

8. 2.5 Headers Headers –Simple form of text formatting –Vary text size based on the headers level –Actual size of text of header element is selected by browser –Can vary significantly between browsers CENTER element –Centers material horizontally –Most elements are left adjusted by default Sample Program

9. 2.6 Text Styling Underline style – … Align elements with ALIGN attribute –right, left or center Close nested tags in the reverse order from which they were opened Emphasis or italic style – … Strong or bold style – … and tags deprecated –Overstep boundary between content and presentation Sample Program

10. 2.7 Linking Links are inserted using the A (Anchor) element –HREF attribute To specify the address you would like to link to – … Can link to email addresses, using: – … This whole attribute, be placed in quotation marks Sample Program1 Sample Program2

11. 2.8 Images Image Background – –does not need to be large –the browser tiles the image across and down the screen Pixel –Stands for picture element –Each pixel represents one addressable dot of color on the screen Insert image into page – tag with attributes: SRC = location HEIGHT (in pixels) WIDTH (in pixels) BORDER (black by default) ALT (text description for browsers that have images turned off or cannot view images) continue.. Sample Program1

12. 2.8 Images Using images as link anchors Background Color – –Preset color name –Hexadecimal code Ex: #FF0000 is red, #00FF00 is green, #0000FF is blue, #000000 is black, #FFFFFF is white 00 is the weakest a color can get FF is the strongest a color can get Sample Program2

13. 2.9 Formatting Text With FONT element –Add color and formatting to text –FONT attributes: COLOR –Preset color name or hexadecimal code –Include the quotation marks around the color name –You can set font color for whole document by using TEXT attribute in BODY element continue..

14. 2.9 Formatting Text With SIZE –To make text larger, set SIZE = +x –To make text smaller, set SIZE = -x –x is the number of font point sizes FACE –Font of the text you are formatting –Be careful to use common fonts like Times, Arial, Courier and Helvetica –Browser will display default if unable to display specified font Sample Program

15. 2.10 Special Characters, Horizontal Rules and More Line Breaks Special Characters –Format of the code: &code; Ex: & –Can use hex code Ex: & for ampersand Horizontal rule – tag –HR element also inserts a line break directly below it continue..

16. –HR attributes: WIDTH – Adjusts the width of the rule – Either a number (in pixels) or a percentage SIZE –Determines the height of the horizontal rule –In pixels ALIGN –Either left, right or center NOSHADE –Eliminates default shading effect and displays horizontal rule as a solid-color bar 2.10 Special Characters, Horizontal Rules and More Line Breaks Sample Program

17. End of Session 2