< REVIEW > How HTML looks like (Overview)? Page title here Main page content comes here

Embed Size (px)

Citation preview

  • Slide 1
  • Slide 2
  • Slide 3
  • < REVIEW >
  • Slide 4
  • How HTML looks like (Overview)? Page title here Main page content comes here.
  • Slide 5
  • Specify Page title Page title here Main page content comes here.
  • Slide 6
  • Meta tags (charset) Page title here Note: utf-8 is equal to utf8
  • Slide 7
  • Paragraphs and line breaks This is paragraph1 This is paragraph 2 with a line break. This is another paragraph which is longer than a line. It will be automatically breaked. This is paragraph1 This is paragraph2 with a line break. This is another paragraph which is longer than a line. It will be automatically breaked.
  • Slide 8
  • Horizontal line This is a paragraph This is another paragraph
  • Slide 9
  • RTL Page . Note: Save file using UTF-8 Encoding Note: Save file using UTF-8 Encoding
  • Slide 10
  • Slide 11
  • CHAPTER THREE Formatting text by using tags Formatting text by using tags Learn some other HTML Tags One by One Learn some other HTML Tags One by One Headings Headings Formatting (bold, italic) Formatting (bold, italic) Superscript and subscripts Superscript and subscripts Monospace and preformatted Monospace and preformatted Block quotation Block quotation Note: Most HTML Tags are semantic (based on function not on formatting)
  • Slide 12
  • Headings Heading 1 normal text Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
  • Slide 13
  • Bold and italic text Bold text Bold text Italic text
  • Slide 14
  • Subscripts and superscripts 1 st 3 rd H 2 SO 4
  • Slide 15
  • Monospace font Please type premium This is some program code Sample code
  • Slide 16
  • Pre-Formatted text This is some text which contains line breaks and spaces. HTML by default, trims blank spaces.
  • Slide 17
  • Block Quotation William Shakespeare: Love all, trust a few, do wrong to none. William Shakespeare: A fool thinks himself to be wise, but a wise man knows himself to be a fool.
  • Slide 18
  • CHAPTER FOUR Using Lists and Backgrounds Using Lists and Backgrounds Create bulleted and numbered lists. Create bulleted and numbered lists. Create definition Lists. Create definition Lists. Insert special characters (using XML Entities) Insert special characters (using XML Entities) Choose Background and foreground colors Choose Background and foreground colors Specify a background image file Specify a background image file By CSS }
  • Slide 19
  • Unordered List Item 1 Item 2 Contains sub items Sub item 1 Sub item 2
  • Slide 20
  • Ordered List Item 1 Item 2 Contains sub items Sub item 1 Sub item 2
  • Slide 21
  • Changing the Bullet or Number Character
    1. Item 1 Item 2 Item 1 Item 2
  • Slide 22
  • Common List Style Type Attribute Values
  • Slide 23
  • Specifying the Start of a Numbered List Item 1 Item 2 Item 1 Item 2
  • Slide 24
  • See In action TODO: Open browser and IDE and see lists in action
  • Slide 25
  • Creating Definition Lists Acid Soil Soil that is lower than 7.0 pH. Acidity is measured by the amount of calcium in the soil. The opposite of acidic soil is alkaline soil. Deciduous A tree or plant that loses its leaves at the end of the growing season, such as a maple tree.
  • Slide 26
  • Inserting Special Characters (entities) &entityname; &
  • Slide 27
  • Entities
  • Slide 28
  • Useful entities & < > & & < > &
  • Slide 29
  • Specifying Colors using color name
  • Slide 30
  • Specifying Colors using RGB RGB Red Green Blue
  • Slide 31
  • Specifying Colors using RGB Red = #FF0000
  • Slide 32
  • Specifying Colors using RGB Green = #00FF00
  • Slide 33
  • Specifying Colors using RGB Blue = #0000FF
  • Slide 34
  • Specifying Colors using RGB Black = #000000
  • Slide 35
  • Specifying Colors using RGB White = #FFFFFF
  • Slide 36
  • Specifying Colors using RGB #FFFFFF rgb(255, 255,255)
  • Slide 37
  • Applying a Background Color hello Hello
  • Slide 38
  • Applying a Foreground Color hello Hello
  • Slide 39
  • Specifying a Background Image File Hello background-image: url(image.png)
  • Slide 40
  • CHAPTER FIVE Creating Hyperlinks and anchors Creating Hyperlinks and anchors Hyperlink to a Web page Hyperlink to a Web page Hyperlink to an e-mail address Hyperlink to an e-mail address Create and hyperlink to anchors Create and hyperlink to anchors Hyperlink to other content Hyperlink to other content
  • Slide 41
  • Text
  • Slide 42
  • Hyperlinking to a Web Page Go to http://www.Microsoft.com/ Microsoft.com For more information
  • Slide 43
  • URL Parts What is a URL? http://www.site.com/path/to/file?name=ali&code=12#marker
  • Slide 44
  • URL Parts What is a URL? What is Protocol? http://www.site.com/path/to/file?name=ali&code=12#marker
  • Slide 45
  • URL Parts What is a URL? What is Protocol? What is hostname? http://www.site.com/path/to/file?name=ali&code=12#marker
  • Slide 46
  • URL Parts What is a URL? What is Protocol? What is hostname? What is path? http://www.site.com/path/to/file?name=ali&code=12#marker
  • Slide 47
  • URL Parts What is a URL? What is Protocol? What is hostname? What is path? What is Query String? http://www.site.com/path/to/file?name=ali&code=12#marker
  • Slide 48
  • URL Parts What is a URL? What is Protocol? What is hostname? What is path? What is Query String? What is marker? http://www.site.com/path/to/file?name=ali&code=12#marker
  • Slide 49
  • Absolute versus relative URLs http://www.site.com/text../image.png
  • Slide 50
  • Absolute versus relative URLs Go back
  • Slide 51
  • Open Link in a new window Go back
  • Slide 52
  • Hyperlinking to an E-Mail Address Contact Us
  • Slide 53 Contact Us"> Contact Us"> Contact Us" title="Hyperlinking to an E-Mail Address Contact Us">
  • Hyperlinking to an E-Mail Address Contact Us
  • Slide 54
  • Creating and Hyperlinking to Anchors... Conclusion Conclution... View the Conclusion
  • Slide 55
  • Exercise Create a page with all discussed tags
  • Slide 56
  • ANY QUESTIONS???