• Like
Session no 1 html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Session no 1 html

  • 882 views
Published

 

Published in Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
882
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
12
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Session No 1 Developed by: Saif Ullah Dar 12/17/2013 1
  • 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.  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. 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. 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.  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. Click To Proceed With The Steps Developed by: Saif Ullah Dar 12/17/2013 7
  • 8. Double Click on the Internet Explorer button Developed by: Saif Ullah Dar 12/17/2013 8
  • 9. Browser Window Opens Developed by: Saif Ullah Dar 12/17/2013 9
  • 10. http://www.google.com Type the url address & Press Enter Key Developed by: Saif Ullah Dar 12/17/2013 10
  • 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. 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. Developed by: Saif Ullah Dar 12/17/2013 13
  • 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.  <HTML>, <BODY>, <TITLE>  </HTML>, </BODY>, </TITLE> Developed by: Saif Ullah Dar  STARTING TAGS / ELEMENTS  ENDING TAGS / ELEMENTS 12/17/2013 15
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Developed by: Saif Ullah Dar 12/17/2013 25
  • 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.  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. Developed by: Saif Ullah Dar 12/17/2013 28
  • 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. <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. <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.  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. 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. Developed by: Saif Ullah Dar 12/17/2013 34
  • 35. SAIF ULLAH DAR Developed by: Saif Ullah Dar 12/17/2013 35