Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "< REVIEW > How HTML looks like (Overview)? Page title here Main page content comes here."— Presentation transcript:

1

2

3 < REVIEW >

4 How HTML looks like (Overview)? Page title here Main page content comes here.

5 Specify Page title Page title here Main page content comes here.

6 Meta tags (charset) Page title here متن فارسی در این جا Note: utf-8 is equal to utf8

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.

8 Horizontal line This is a paragraph This is another paragraph

9 RTL Page عنوان صفحه این متن است. Note: Save file using UTF-8 Encoding Note: Save file using UTF-8 Encoding

10 </ REVIEW >

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)

12 Headings Heading 1 normal text Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

13 Bold and italic text Bold text Bold text Italic text

14 Subscripts and superscripts 1 st 3 rd H 2 SO 4

15 Monospace font Please type premium This is some program code Sample code

16 Pre-Formatted text This is some text which contains line breaks and spaces. HTML by default, trims blank spaces.

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.

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 }

19 Unordered List Item 1 Item 2 Contains sub items Sub item 1 Sub item 2

20 Ordered List Item 1 Item 2 Contains sub items Sub item 1 Sub item 2

21 Changing the Bullet or Number Character <ol style=“list-style-type: upper-roman”> Item 1 Item 2 Item 1 Item 2

22 Common List Style Type Attribute Values

23 Specifying the Start of a Numbered List Item 1 Item 2 Item 1 Item 2

24 See In action TODO: Open browser and IDE and see lists in action

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.

26 Inserting Special Characters (entities) &entityname; &

27 Entities

28 Useful entities & < > © &amp; & < > © &

29 Specifying Colors using color name

30 Specifying Colors using RGB RGB Red Green Blue

31 Specifying Colors using RGB Red = #FF0000

32 Specifying Colors using RGB Green = #00FF00

33 Specifying Colors using RGB Blue = #0000FF

34 Specifying Colors using RGB Black = #000000

35 Specifying Colors using RGB White = #FFFFFF

36 Specifying Colors using RGB #FFFFFF rgb(255, 255,255)

37 Applying a Background Color hello Hello

38 Applying a Foreground Color hello Hello

39 Specifying a Background Image File Hello background-image: url(image.png)

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

41 Text

42 Hyperlinking to a Web Page Go to http://www.Microsoft.com/ Microsoft.com For more information

43 URL Parts  What is a URL? http://www.site.com/path/to/file?name=ali&code=12#marker

44 URL Parts  What is a URL?  What is Protocol? http://www.site.com/path/to/file?name=ali&code=12#marker

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

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

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

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

49 Absolute versus relative URLs http://www.site.com/text../image.png

50 Absolute versus relative URLs Go back

51 Open Link in a new window Go back

52 Hyperlinking to an E-Mail Address Contact Us

53 Hyperlinking to an E-Mail Address <a href="mailto:support@adatum.com ?subject=Question"> Contact Us

54 Creating and Hyperlinking to Anchors... Conclusion Conclution... View the Conclusion

55 Exercise  Create a page with all discussed tags

56 ANY QUESTIONS???


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

Similar presentations


Ads by Google