logging in or signing up Introduction to World Wide Web ali.zahid5 Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 1019 Category: Science & Tech.. License: All Rights Reserved Like it (0) Dislike it (0) Added: April 30, 2010 This Presentation is Public Favorites: 0 Presentation Description Introduction to World Wide Web Comments Posting comment... By: abhhimanyuv797 (12 month(s) ago) thanxx Saving..... Post Reply Close Saving..... Edit Comment Close By: Chuckymecca (17 month(s) ago) Very informative and compact. Thanks Saving..... Post Reply Close Saving..... Edit Comment Close Premium member Presentation Transcript Introduction to WWW and HTML/CSS : Introduction to WWW and HTML/CSS Aimen Rasheed ( i05-0162 ) Waqqas Mir ( i05-0095 ) FAST - National University of Computer and Emerging Sciences - Pakistan The World Wide Web : The World Wide Web Accessing cross-referenced documents, known as hypertext linking, is probably the most important aspect of the Web because it allows you to quickly open other Web pages A document on the Web is called a Web page, identified by a unique address called the Uniform Resource Locator, or URL URL commonly referred to as a Web address FAST - National University of Computer and Emerging Sciences - Pakistan What is a Web Site? : What is a Web Site? A folder on a hard disk. FAST - National University of Computer and Emerging Sciences - Pakistan What is a Web Server? : What is a Web Server? Computer holding the Web Site Software that lets the computer serve the site to another computer FAST - National University of Computer and Emerging Sciences - Pakistan What is an ISP? : What is an ISP? Internet Service Provider The company that gives you access to the internet. FAST - National University of Computer and Emerging Sciences - Pakistan What do I need to make a Web? : What do I need to make a Web? Make a Domain Find a web server to host your website Make website on your computer Upload or FTP your website to the web server FAST - National University of Computer and Emerging Sciences - Pakistan HTML : HTML Hypertext Markup Language (HTML) is a simple language used to create the Web pages that appear on the World Wide Web All HTML documents begin with <html> and end with </html> Two other important HTML tags are the <head> tag and the <body> tag FAST - National University of Computer and Emerging Sciences - Pakistan HTML : HTML The <head> tag contains information that is used by the Web browser, and you place it at the start of an HTML document, after the opening <html> tag Following the document head is the <body> tag, which contains the document body FAST - National University of Computer and Emerging Sciences - Pakistan TAG format : TAG format Start tag < Tag Attribute=Value Attribute=Value ... > Optional End tag < / Tag > FAST - National University of Computer and Emerging Sciences - Pakistan HTML Example 1 : HTML Example 1 <html> <head> </head> <body> Hello World </body> </html> FAST - National University of Computer and Emerging Sciences - Pakistan HTML Example 2 : HTML Example 2 <html> <head> <title> My Webpage </title> </head> <body> <h1>heading 1 </h1> <h2>heading 2 </h2> <center>centered</center> <i><b><u>italic , bold and underline</u></b> </i> <font size=30 color=red face=chiller>FAST-NU</font> </body> </html> FAST - National University of Computer and Emerging Sciences - Pakistan HTML Example 3 : HTML Example 3 <html> <head> <title> My Webpage </title> </head> <body> <img src="http://nu.edu.pk/images/fast-logo.jpg"> <a href="http://www.pakwheels.com">click here</a> </body> </html> FAST - National University of Computer and Emerging Sciences - Pakistan The <img> tag : The <img> tag <img src=“logo.jpg" alt="fast logo" height="20" width="30"> The src attribute specifies the filename, location or source of an image file and is a must for <img> tag Its a good practice to include the alt, height and width attributes aswell FAST - National University of Computer and Emerging Sciences - Pakistan The <img> tag : The <img> tag Alternate/ALT text will display if an image has not yet downloaded, if the user has turned off the display of images in their Web browsers, or if for some reason the image is not available FAST - National University of Computer and Emerging Sciences - Pakistan The <img> tag : The <img> tag When you create an <img> element that includes only the src and alt attributes, a Web browser needs to examine the image and determine the number of pixels to reserve for it However, if you use the height and width attributes to specify the size of an image, the Web browser will use their values to reserve enough space on the page for each image FAST - National University of Computer and Emerging Sciences - Pakistan The <img> tag : The <img> tag Do not use the height and width attributes to resize an image on your Web page. although you may reduce how the image appears in a browser, the browser still needs to download the original image in its original size, which may result in the page rendering more slowly than necessary FAST - National University of Computer and Emerging Sciences - Pakistan HTML Example 4 : HTML Example 4 <html> <!-- Unordered List --> <head> </head> <body> <ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ul> </body> </html> FAST - National University of Computer and Emerging Sciences - Pakistan Bullet Type <UL TYPE= DISC |CIRCLE|SQUARE> (for the whole list) <LI TYPE=DISC |CIRCLE|SQUARE> (this & subsequent) HTML Example 5 : HTML Example 5 <html> <!-- Ordered List --> <head> </head> <body> <ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ol> </body> </html> Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list) <LI TYPE=A|a|I|i|1> (this & subsequent) FAST - National University of Computer and Emerging Sciences - Pakistan HTML Example 6 : HTML Example 6 <html> <!-- tables--> <head> </head> <body> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html> FAST - National University of Computer and Emerging Sciences - Pakistan <body> Attributes : <body> Attributes Background=filename an image to use as background Bgcolor=000000 background color of the document Link=000000 color of all links Alink=000000 color of active links Vlink=000000 color of visited links Text=000000 color of text in the document FAST - National University of Computer and Emerging Sciences - Pakistan Using CSS : Using CSS ADD style tags in HEAD <head> <style type="text/css"> </style> </head> FAST - National University of Computer and Emerging Sciences - Pakistan Using CSS : Using CSS Editing/Overloading existing Tags <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} p {background-color: rgb(250,0,255); font-family:"Times New Roman";} </style> FAST - National University of Computer and Emerging Sciences - Pakistan Using CSS : Using CSS Making our own Classes <style type="text/css"> .style1 { font-family:Chiller; font-size:110px; font-style:italic; color:green; } </style> Use it inside any other tag <body> <p class="style1"> This text should appear as defined by style1 </p> </body FAST - National University of Computer and Emerging Sciences - Pakistan Reading Assignment : Reading Assignment Read CSS Syntax details from http://www.w3schools.com/css/css_syntax.asp FAST - National University of Computer and Emerging Sciences - Pakistan References : References http://www.w3schools.com/tags/default.asp http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/css_examples.asp http://wally.cs.iupui.edu/n241-new/ FAST - National University of Computer and Emerging Sciences - Pakistan You do not have the permission to view this presentation. In order to view it, please contact the author of the presentation.
Introduction to World Wide Web ali.zahid5 Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 1019 Category: Science & Tech.. License: All Rights Reserved Like it (0) Dislike it (0) Added: April 30, 2010 This Presentation is Public Favorites: 0 Presentation Description Introduction to World Wide Web Comments Posting comment... By: abhhimanyuv797 (12 month(s) ago) thanxx Saving..... Post Reply Close Saving..... Edit Comment Close By: Chuckymecca (17 month(s) ago) Very informative and compact. Thanks Saving..... Post Reply Close Saving..... Edit Comment Close Premium member Presentation Transcript Introduction to WWW and HTML/CSS : Introduction to WWW and HTML/CSS Aimen Rasheed ( i05-0162 ) Waqqas Mir ( i05-0095 ) FAST - National University of Computer and Emerging Sciences - Pakistan The World Wide Web : The World Wide Web Accessing cross-referenced documents, known as hypertext linking, is probably the most important aspect of the Web because it allows you to quickly open other Web pages A document on the Web is called a Web page, identified by a unique address called the Uniform Resource Locator, or URL URL commonly referred to as a Web address FAST - National University of Computer and Emerging Sciences - Pakistan What is a Web Site? : What is a Web Site? A folder on a hard disk. FAST - National University of Computer and Emerging Sciences - Pakistan What is a Web Server? : What is a Web Server? Computer holding the Web Site Software that lets the computer serve the site to another computer FAST - National University of Computer and Emerging Sciences - Pakistan What is an ISP? : What is an ISP? Internet Service Provider The company that gives you access to the internet. FAST - National University of Computer and Emerging Sciences - Pakistan What do I need to make a Web? : What do I need to make a Web? Make a Domain Find a web server to host your website Make website on your computer Upload or FTP your website to the web server FAST - National University of Computer and Emerging Sciences - Pakistan HTML : HTML Hypertext Markup Language (HTML) is a simple language used to create the Web pages that appear on the World Wide Web All HTML documents begin with <html> and end with </html> Two other important HTML tags are the <head> tag and the <body> tag FAST - National University of Computer and Emerging Sciences - Pakistan HTML : HTML The <head> tag contains information that is used by the Web browser, and you place it at the start of an HTML document, after the opening <html> tag Following the document head is the <body> tag, which contains the document body FAST - National University of Computer and Emerging Sciences - Pakistan TAG format : TAG format Start tag < Tag Attribute=Value Attribute=Value ... > Optional End tag < / Tag > FAST - National University of Computer and Emerging Sciences - Pakistan HTML Example 1 : HTML Example 1 <html> <head> </head> <body> Hello World </body> </html> FAST - National University of Computer and Emerging Sciences - Pakistan HTML Example 2 : HTML Example 2 <html> <head> <title> My Webpage </title> </head> <body> <h1>heading 1 </h1> <h2>heading 2 </h2> <center>centered</center> <i><b><u>italic , bold and underline</u></b> </i> <font size=30 color=red face=chiller>FAST-NU</font> </body> </html> FAST - National University of Computer and Emerging Sciences - Pakistan HTML Example 3 : HTML Example 3 <html> <head> <title> My Webpage </title> </head> <body> <img src="http://nu.edu.pk/images/fast-logo.jpg"> <a href="http://www.pakwheels.com">click here</a> </body> </html> FAST - National University of Computer and Emerging Sciences - Pakistan The <img> tag : The <img> tag <img src=“logo.jpg" alt="fast logo" height="20" width="30"> The src attribute specifies the filename, location or source of an image file and is a must for <img> tag Its a good practice to include the alt, height and width attributes aswell FAST - National University of Computer and Emerging Sciences - Pakistan The <img> tag : The <img> tag Alternate/ALT text will display if an image has not yet downloaded, if the user has turned off the display of images in their Web browsers, or if for some reason the image is not available FAST - National University of Computer and Emerging Sciences - Pakistan The <img> tag : The <img> tag When you create an <img> element that includes only the src and alt attributes, a Web browser needs to examine the image and determine the number of pixels to reserve for it However, if you use the height and width attributes to specify the size of an image, the Web browser will use their values to reserve enough space on the page for each image FAST - National University of Computer and Emerging Sciences - Pakistan The <img> tag : The <img> tag Do not use the height and width attributes to resize an image on your Web page. although you may reduce how the image appears in a browser, the browser still needs to download the original image in its original size, which may result in the page rendering more slowly than necessary FAST - National University of Computer and Emerging Sciences - Pakistan HTML Example 4 : HTML Example 4 <html> <!-- Unordered List --> <head> </head> <body> <ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ul> </body> </html> FAST - National University of Computer and Emerging Sciences - Pakistan Bullet Type <UL TYPE= DISC |CIRCLE|SQUARE> (for the whole list) <LI TYPE=DISC |CIRCLE|SQUARE> (this & subsequent) HTML Example 5 : HTML Example 5 <html> <!-- Ordered List --> <head> </head> <body> <ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ol> </body> </html> Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list) <LI TYPE=A|a|I|i|1> (this & subsequent) FAST - National University of Computer and Emerging Sciences - Pakistan HTML Example 6 : HTML Example 6 <html> <!-- tables--> <head> </head> <body> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html> FAST - National University of Computer and Emerging Sciences - Pakistan <body> Attributes : <body> Attributes Background=filename an image to use as background Bgcolor=000000 background color of the document Link=000000 color of all links Alink=000000 color of active links Vlink=000000 color of visited links Text=000000 color of text in the document FAST - National University of Computer and Emerging Sciences - Pakistan Using CSS : Using CSS ADD style tags in HEAD <head> <style type="text/css"> </style> </head> FAST - National University of Computer and Emerging Sciences - Pakistan Using CSS : Using CSS Editing/Overloading existing Tags <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} p {background-color: rgb(250,0,255); font-family:"Times New Roman";} </style> FAST - National University of Computer and Emerging Sciences - Pakistan Using CSS : Using CSS Making our own Classes <style type="text/css"> .style1 { font-family:Chiller; font-size:110px; font-style:italic; color:green; } </style> Use it inside any other tag <body> <p class="style1"> This text should appear as defined by style1 </p> </body FAST - National University of Computer and Emerging Sciences - Pakistan Reading Assignment : Reading Assignment Read CSS Syntax details from http://www.w3schools.com/css/css_syntax.asp FAST - National University of Computer and Emerging Sciences - Pakistan References : References http://www.w3schools.com/tags/default.asp http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/css_examples.asp http://wally.cs.iupui.edu/n241-new/ FAST - National University of Computer and Emerging Sciences - Pakistan