Session no 1 html

1,021 views
959 views

Published on

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,021
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Session no 1 html

  1. 1. Session No 1 Developed by: Saif Ullah Dar 12/17/2013 1
  2. 2. 1) 2) 3) 4) 5) 6) 7) 8) 9) Getting Started With HTML Introducing HTML How Web pages work Introduction to Tags. Structure of HTML page Creating a Web Page Introduction table, tr, td tags. Paragraphs Preformatted Paragraphs Developed by: Saif Ullah Dar 12/17/2013 2
  3. 3.  The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience:    A uniform naming scheme for locating resources on the Web (e.g., URIs). Protocols, for access to named resources over the Web (e.g., HTTP). Hypertext, for easy navigation among resources (e.g., HTML). Developed by: Saif Ullah Dar 12/17/2013 3
  4. 4. To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from Hypertext Markup Language). Developed by: Saif Ullah Dar 12/17/2013 4
  5. 5. A. HTML contains special markers, or tags, which B. define the style and structure of the page Tags are also referred to as elements. Developed by: Saif Ullah Dar 12/17/2013 5
  6. 6.  Publish online documents with headings, texts, tables, lists, photos, etc.  Retrieve online information via hypertexts links.  Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.  Include spread-sheets, video clips, sound clips, and other applications directly in their documents. Developed by: Saif Ullah Dar 12/17/2013 6
  7. 7. Click To Proceed With The Steps Developed by: Saif Ullah Dar 12/17/2013 7
  8. 8. Double Click on the Internet Explorer button Developed by: Saif Ullah Dar 12/17/2013 8
  9. 9. Browser Window Opens Developed by: Saif Ullah Dar 12/17/2013 9
  10. 10. http://www.google.com Type the url address & Press Enter Key Developed by: Saif Ullah Dar 12/17/2013 10
  11. 11. Internet Web Server Request Request http://www.google.com User makes a request www.google.com HTML files Developed by: Saif Ullah Dar 12/17/2013 11
  12. 12. Internet Web Server Web Page Web Page HTML files Google page is returned from the Web Server Developed by: Saif Ullah Dar 12/17/2013 12
  13. 13. Developed by: Saif Ullah Dar 12/17/2013 13
  14. 14.  A tag is a reference in an HTML document which describes the style and structure of the document.  All tag start with < (less than symbol) and end with > (greater than symbol)  Tags which mark a beginning have no / (front slash).  Tags which mark an ending have a / immediately after <, as in </. Developed by: Saif Ullah Dar 12/17/2013 14
  15. 15.  <HTML>, <BODY>, <TITLE>  </HTML>, </BODY>, </TITLE> Developed by: Saif Ullah Dar  STARTING TAGS / ELEMENTS  ENDING TAGS / ELEMENTS 12/17/2013 15
  16. 16. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 16
  17. 17. Start of an HTML document. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 17
  18. 18. Indicates to the browser that this is an HTML document. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 18
  19. 19. HTML document is divided into two sections. 1. <HEAD> …. </HEAD> <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 19
  20. 20. HTML document is divided into two sections. 2. <BODY> …. </BODY> <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 20
  21. 21. Shows the contents in the browser title bar. Generally placed inside Head tag. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 21
  22. 22. Indicates comment tag. Can be placed anywhere in the document. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 22
  23. 23. Signal the end of HTML document. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 23
  24. 24. Range / Container tags They are called so because they cover a range of text. Example : <HTML>, <HEAD>, <BODY>, <TITLE> Standalone / Point tags Those tags which do not need an ending. Example: <HR>, <BR> Developed by: Saif Ullah Dar 12/17/2013 24
  25. 25. Developed by: Saif Ullah Dar 12/17/2013 25
  26. 26.  Tags used for separating one line with other can be classifies as follows:1. <P> tag 2. <PRE> tag 3. <BR> tag 4. <HR> tag Developed by: Saif Ullah Dar 12/17/2013 26
  27. 27.  Normally all text in an HTML document is treated like one long paragraph. Indented or blank lines which normally indicate start of paragraphs in text are ignored.  To separate your text into paragraphs use the  The <P> tag forces an end of line and forces a blank line before the next paragraph. Developed by: Saif Ullah Dar 12/17/2013 27 <P> tag.
  28. 28. Developed by: Saif Ullah Dar 12/17/2013 28
  29. 29. Code Snippet To Fulfill the Requirement <p>This is should be the end of my first paragraph in HTML.</p> <p>This should be the start of my second paragraph in HTML.</p> <p>And this is should be my third paragraph in HTML.</p> Developed by: Saif Ullah Dar 12/17/2013 29
  30. 30. <p> tag forces an end of line and forces a blank line before the next paragraph. <p>This is should be the end of my first paragraph in HTML.</p> <p>This should be the start of my second paragraph in HTML.</p> <p>And this is should be my third paragraph in HTML.</p> Developed by: Saif Ullah Dar 12/17/2013 30
  31. 31. <p> tag forces an end of line and forces a blank line before the next paragraph. <p>This is should be the end of my first paragraph in HTML.</p> <p>This should be the start of my second paragraph in HTML.</p> <p>And this is should be my third paragraph in HTML.</p> Ends the paragraph tag. Developed by: Saif Ullah Dar 12/17/2013 31
  32. 32.  Preformatted tag is used to display the data in the explorer as written in the Program.  To use the tabs in the paragraphs  This tag is used to place the data according to your own style.  The font size of this tag is different from the font size of the <P> Tag  Do not forget to close this Tag. Developed by: Saif Ullah Dar 12/17/2013 32 <PRE> tag.
  33. 33. Code Snippet To Fulfill the Requirement <pre>This is should be the end of my first Paragraph in HTML Using the PRE FORMATTED TAG.</pre> <pre>This should be the start of my second paragraph in HTML.</pre> <p>And this is should be my third paragraph in HTML.</p> Developed by: Saif Ullah Dar 12/17/2013 33
  34. 34. Developed by: Saif Ullah Dar 12/17/2013 34
  35. 35. SAIF ULLAH DAR Developed by: Saif Ullah Dar 12/17/2013 35

×