1 / 14

Multimedia and weBLOGging Grade 7-9 | 10-12

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

kaiser
Télécharger la présentation

Multimedia and weBLOGging Grade 7-9 | 10-12

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. 06 – Blog – 01 – HTML Basic VIDEO PROPERTIES | 4 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 “<“ and “>” brackets Example: <[annotation label]>text</[annotation label]> [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 Multimedia and weBLOGging(C) 2010 Digital Media Production Facility Cahaya Bangsa Classical School

  5. 06 – Blog – 01 – HTML Basic VIDEO PROPERTIES | 5 Introduction • http://www.w3schools.com provides FREE HTML learning to the extent of: 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 Multimedia and weBLOGging(C) 2010 Digital Media Production Facility Cahaya Bangsa Classical School

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

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

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

  9. 06 – Blog – 01 – HTML Basic Paragraphs | 9 Formatting • <em>text</em> renders the “text” to be emphasized by the web browser, usually in italic different from italic Example: <p>This is <em>first</em> paragraph</p> will result (in web browser): This is first paragraph use <i>text</i> for bold the use of annotation <i></i> 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 Multimedia and weBLOGging(C) 2010 Digital Media Production Facility Cahaya Bangsa Classical School

  10. 06 – Blog – 01 – HTML Basic Attribute | 10 Attribute • <a>text</a> renders the “text” to be attributed by the web browser title=“[hypertext]” href=“[complete url]” Example: <p><a title=“Goto IBM Official Site” href=“http://www.ibm.com”>IBM</a> is focusing on quantum computing</p> 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” Multimedia and weBLOGging(C) 2010 Digital Media Production Facility Cahaya Bangsa Classical School

  11. 06 – Blog – 01 – HTML Basic Attribute | 11 Attribute • <a>text</a> 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: <p><a title=“Goto IBM Official Site” target=“_blank” href=“http://www.ibm.com”>IBM</a> is focusing on quantum computing</p> Multimedia and weBLOGging(C) 2010 Digital Media Production Facility Cahaya Bangsa Classical School

  12. 06 – Blog – 01 – HTML Basic Color | 12 Color • <font color=“#rrggbb”>text</font> 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: <p><font color=“#00ffff”>cyan</font> <font color=“#ffff00”>yellow</font> <font color=“#ff00ff”>magenta</font></p> will result (in web browser): cyanyellowmagenta 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 Multimedia and weBLOGging(C) 2010 Digital Media Production Facility Cahaya Bangsa Classical School

  13. 06 – Blog – 01 – HTML Basic Color | 13 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 Multimedia and weBLOGging(C) 2010 Digital Media Production Facility Cahaya Bangsa Classical School

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

More Related