1. Multimedia and weBLOGging Grade 7-9 | 10-12 Cahaya Bangsa Classical School (C) 2010 Digital Media Production Facility 06 – Blog HTML Basic

2. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Objective Introduction Paragraphs Formatting Attributes Color OUTLINE OUTLINE | 2 06 – Blog – 01 – HTML Basic

3. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Possess the basic capability to use the basic HTML syntax in formatting and links in creating HTML page OBJECTIVE | 3 06 – Blog – 01 – HTML Basic

4. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Introduction HyperText Mark-up Language (HTML) is a high-level, application level programming language that functioned as annotation (different in syntax from the original text) providing formatting for web browsers The mark-up language is defined by various annotation inside the “ ” brackets Example: text [annotation label] is any text specifically defines specific purpose text is any text that will be displayed in web browser and the mark-up language is closed by the same label and bracket with the “/” special character Each [annotation label] serves specifically for only one specific purpose Some [annotation label] may contains group of multiple function in the same category http://net2.com/nvu/download.html provides FREE HTML Editor http://net2.com/nvu/download.html VIDEO PROPERTIES | 4 06 – Blog – 01 – HTML Basic

5. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Introduction http://www.w3schools.com provides FREE HTML learning to the extent of: http://www.w3schools.com XML (eXtensible Mark-up Language) Server Scriptings: CSS (Cascaded Style Sheet) Microsoft ASP (Active Server Page), ADO (ActiveX Data Object), and.Net mobile PHP (Private Home Page) Web Services: WSDL (Web Services Description Language) SOAP (Simple Object Access Protocol) RDF (Resource Description Framework) RSS (Really Simple Syndication) Multimedia SMIL (Synchronized Multimedia Integration Language) SVG (Scalable Vector Graphic) Flash (Adobe proprietary multimedia platform VIDEO PROPERTIES | 5 06 – Blog – 01 – HTML Basic

6. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Paragraphs text annotation for new paragraph other similar annotation will be displayed as different paragraph, separated by double line paragraph spacing from previous paragraph Example: This is first paragraph This is second paragraph will result (in web browser): This is first paragraph This is second paragraph Paragraphs | 6 06 – Blog – 01 – HTML Basic

7. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Paragraphs annotation for new line includes in the same paragraph until is reached separated from previous line by single paragraph spacing Example: This is first paragraph The first paragraph contains new line This is second paragraph will result (in web browser): This is first paragraph The first paragraph contains new line This is second paragraph Paragraphs | 7 06 – Blog – 01 – HTML Basic

8. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Formatting text renders the “text” into something strongly displayed by the web browser, usually in bold different from bold Example: This is first paragraph will result (in web browser): This is first paragraph use text for bold the use of annotation simply turns any text within into bold it does not renders the text into something strong as defined by the further HTML standard Paragraphs | 8 06 – Blog – 01 – HTML Basic

9. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Formatting text renders the “text” to be emphasized by the web browser, usually in italic different from italic Example: This is first paragraph will result (in web browser): This is first paragraph use text for bold the use of annotation simply turns any text within into italic it does not renders the text to be emphasized as defined by the further HTML standard for further reference, visit http://www.w3schools.com/html/html_formatting.asp http://www.w3schools.com/html/html_formatting.asp Paragraphs | 9 06 – Blog – 01 – HTML Basic

10. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Attribute text renders the “text” to be attributed by the web browser title=“[hypertext]” href=“[complete url]” Example: IBM is focusing on quantum computing will result (in web browser): IBM is focusing on quantum computing Note When the mouse pointer hovering the word IBM the hypertext will apear “Goto IBM Official Site” Attribute | 10 06 – Blog – 01 – HTML Basic

11. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Attribute text renders the “text” to be attributed by the web browser target=“_blank” opens the link to the new window target=“_top” opens the link to the same window target=“_self” opens the link in the same frame (for framed HTML design) target=“_parent” opens the link to the parent frame (for framed HTML design) Example: IBM is focusing on quantum computing Attribute | 11 06 – Blog – 01 – HTML Basic

12. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Color text where rr defines hex value for color red, ranges from 0 to ff gg defines hex value for color green, ranges from 0 to ff bb defines hex value for color blue, ranges from 0 to ff Example: cyan yellow magenta will result (in web browser): cyan yellow magenta Note hexadecimal ranges from 00-09, 0a-0f, 10-19, 1a-1f, 20-2f-9f, a0-af-ff when translated to decimal, the value ranges from 0 to 255 Color | 12 06 – Blog – 01 – HTML Basic

13. Cahaya Bangsa Classical School Multimedia and weBLOGging (C) 2010 Digital Media Production Facility Color White : red (ff), green (ff), blue (ff) Black : red (00), green (00), blue (00) Cyan : red (00), green (ff), blue (ff) Yellow : red (ff), green (ff), blue (00) Magenta : red (ff), green (00), blue (ff) Programmers have full control of the color by setting it manually Color | 13 06 – Blog – 01 – HTML Basic

14. Cahaya Bangsa Classical School THANK YOU | 14 THANK YOU Multimedia and weBLOGging (C) 2010 Digital Media Production Facility 06 – Blog – 01 – HTML Basic