Introduction to World Wide Web

Views:
 
     
 

Presentation Description

Introduction to World Wide Web

Comments

By: abhhimanyuv797 (101 month(s) ago)

thanxx

By: Chuckymecca (106 month(s) ago)

Very informative and compact. Thanks

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

authorStream Live Help