-Rajat Shah-Soumya Ghosh
   What is Internet and how it works.    ◦   DNS (Domain Name System)    ◦   IP address    ◦   Protocols: HTTP    ◦   Wor...
   Its is vast network of inter connected    computers that uses a specific set of rules    called Internet Protocols (ab...
   Is a part of the Internet "designed to allow    easier navigation through the use of graphical    user interfaces and ...
   IP: Internet Protocol    ◦ Responsible for labelling individual packets with the source      address and destination a...
   DNS (Domain Name System)    ◦ Responsible for converting the hostnames to the IP Address.    ◦ For example, the domain...
   Client:    ◦ Content or service requesters.    ◦ Web browsers such as Mozilla, Chrome are clients.    ◦ Functionalitie...
   To view a web page from your browser, the    following sequence happens:    ◦ You either type an address (URL) into yo...
   Commonly used languages:    ◦ HTML: Defines the structure of a web page.    ◦ CSS: Defines the styling and layout of c...
   HTML stands for HyperText Markup    Language.   HTML is not a programming language, it is a    markup language.   Is...
   HTML tags are case-insensitive.    The majority of HTML tags do require both an open and a close tag.    All HTML do...
   HTML headings are defined with the <h1> to <h6>    tags. The lower the number, the larger the heading    size.   HTML...
   HTML elements can have attributes   Attributes provide additional information about an    element   Attributes are a...
   Images can be added to a web page using img    or through CSS.    ◦ Eg.:        <img src=“abc.jpg” alt=“A image” width...
   Tables are an excellent way to organize and    display information on a page.    ◦ defined using the <table> tag.    ◦...
   HTML forms are used to collect different    kinds of user input. A form is an area that can    contain form elements....
   Language used to design a webpage.   Styles enable you to define a consistent look for your    documents by describin...
   In page :    ◦ Use style tag. Multiple styles separated by semi-colon.    <style type=“text/css”>        body        {...
   Class:    ◦ When multiple elements in a web page have similar      properties, we define class of them.       Class a...
   Hand coding, use Nodepad++.   Use a WYSIWYG editor like Adobe,    dreamweaver.   Use online services like Blogspot, ...
   http://w3schools.com
-Rajat Shahrajat.shah200792@gmail.com
Introduction to web designing
Introduction to web designing
Introduction to web designing
Upcoming SlideShare
Loading in …5
×

Introduction to web designing

234 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
234
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to web designing

  1. 1. -Rajat Shah-Soumya Ghosh
  2. 2.  What is Internet and how it works. ◦ DNS (Domain Name System) ◦ IP address ◦ Protocols: HTTP ◦ World Wide Web (WWW) Web Programming ◦ HTML ◦ CSS ◦ Basics of Server-side Scripting.
  3. 3.  Its is vast network of inter connected computers that uses a specific set of rules called Internet Protocols (abbreviated as IP) to communicate. Provides the physical backbone for a number of interesting applications.
  4. 4.  Is a part of the Internet "designed to allow easier navigation through the use of graphical user interfaces and hypertext links between different addresses“ Uses the HTTP protocol. Global set of documents, images and other resources, logically interrelated by hyperlinks and referenced with Uniform Resource Locators(URLs).
  5. 5.  IP: Internet Protocol ◦ Responsible for labelling individual packets with the source address and destination address of two computers exchanging information over a network. ◦ IP Address: ◦ Eg.: IPv4: 172.16.254.1 (32 bits) ◦ IPv6: 2001:db8:0:1234:0::567:8:1 (128 bits) ◦ IP can be static or dynamic.• HTTP: Hyper Text Transfer Protocol • Is the language Web browsers and Server use to communicate using IP. • Standard which describes how a browser makes a request to the web server program. • HTTPS?
  6. 6.  DNS (Domain Name System) ◦ Responsible for converting the hostnames to the IP Address. ◦ For example, the domain name www.example.com translates to the addresses 192.0.43.10 (IPv4) and 2620:0:2d0:200::10 (IPv6) ◦ Name Server may query various website while resolving the address of the host name.• UR(Uniform Resource Locator) ◦ Eg. http://www.vnit.ac.in/lecture/Introduction_to_web.html ISP (Internet Service Provider): ◦ Are those private companies which provide internet connection. We get connected to internet via our ISP.
  7. 7.  Client: ◦ Content or service requesters. ◦ Web browsers such as Mozilla, Chrome are clients. ◦ Functionalities? Server: ◦ The provider of a resource or service. ◦ High speed computers with large hard disk capacity. ◦ A server machine is a host that is running one or more server programs which share their resources with clients. ◦ Functionalities? Proxy servers: ◦ Acts as an intermediary for requests from clients seeking resources from server. ◦ Eg: The proxy server we user in our hostels : 172.31.16.10 ◦ How does it speed up browsing? How it differs from Peer to Peer (P2P)?
  8. 8.  To view a web page from your browser, the following sequence happens: ◦ You either type an address (URL) into your "Address Bar" or click on a hyperlink. ◦ Your browser sends a request to your ISP server asking for the page. ◦ Your ISP server using DNS looks in a huge database of internet addresses (IP) and finds the exact host server which houses the website in question, then sends that host server a request for the page. ◦ The host server sends the requested page to your ISP server. ◦ Your ISP sends the page to your browser and you see it displayed on your screen.
  9. 9.  Commonly used languages: ◦ HTML: Defines the structure of a web page. ◦ CSS: Defines the styling and layout of contents of a webpage. ◦ Javascript: Client side scripting language. It adds interactivity to a web page. ◦ PHP (Hypertext Preprocessor): Server side scripting language. ◦ SQL (Structured Query Language): Language used to query databases.
  10. 10.  HTML stands for HyperText Markup Language. HTML is not a programming language, it is a markup language. Is the core technology in which all Web pages are written. HTML tags are interpreted by a web browser and composed into visible or audible webpages.
  11. 11.  HTML tags are case-insensitive.  The majority of HTML tags do require both an open and a close tag.  All HTML documents start with <html> tag and end with </html>An example of a simple HTML document:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML> <HEAD> <!—Contains title, meta tags, links to external scripts(CSS, Javascript) --> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> <!—Contains the content of the web page--> <P>Hello world! </BODY></HTML>
  12. 12.  HTML headings are defined with the <h1> to <h6> tags. The lower the number, the larger the heading size. HTML paragraphs are defined with the <p> tag. Most browsers automatically put a line break and space after a </p> tags. HTML links are defined with the <a> called anchor tag. ◦ Absolute reference: <a href=“http://vnit.ac.in”>VNIT</a> ◦ Relative reference: <a href=“/contacts”>VNIT, Contacts</a> Target attribute?
  13. 13.  HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Example: <a href="http://vnit.ac.in">This is a link</a> Here the attribute name is href and its value ishttp://vnit.ac.in
  14. 14.  Images can be added to a web page using img or through CSS. ◦ Eg.: <img src=“abc.jpg” alt=“A image” width=“300px” height=“200px”/> ◦ Use of alt, src , width and height attributes? With HTML5, we can directly add a audio or video files into a web page ◦ Eg.: <audio controls="controls"> <source src="audio file.mp3" type="audio/mpeg"> </audio>
  15. 15.  Tables are an excellent way to organize and display information on a page. ◦ defined using the <table> tag. ◦ A table is divided into rows with the <tr> tag, and each row is divided into data cells using the <td> tag. The letters td stand for “table data,” which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, and so on.
  16. 16.  HTML forms are used to collect different kinds of user input. A form is an area that can contain form elements. Form elements are elements that allow the user to enter information in a form (like text fields, text area fields, drop-down menus, radio buttons, check boxes, and so on). Tags used: ◦ Form, Input, textarea, select, etc.
  17. 17.  Language used to design a webpage. Styles enable you to define a consistent look for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed. Latest version is CSS3. Can be inline, in page, external. Inline: ◦ Use style attribute. Multiple styles separated by semi-colon. ◦ Always defined in opening tag. ◦ <body style=“background-color:green;”>
  18. 18.  In page : ◦ Use style tag. Multiple styles separated by semi-colon. <style type=“text/css”> body { background-color:green; Color: red; } </style> External: ◦ a separate CSS file referenced from the document <link href="path/to/file.css" rel="stylesheet"> ◦ Style sheet syntax is made up of three parts: selector {property: value}
  19. 19.  Class: ◦ When multiple elements in a web page have similar properties, we define class of them.  Class attribute is used.  A single dot (.) is used to define property of a class.  Eg.: .class_name { color:blue; } Id: ◦ Specifies a unique id for an element.  Id attribute is used.  A single hash (#) is used to define property of a class.  Eg.: #id_name { color:blue; }
  20. 20.  Hand coding, use Nodepad++. Use a WYSIWYG editor like Adobe, dreamweaver. Use online services like Blogspot, Google site, Wordpress, etc. Use Content Management System (CMS) like Wordpress, Joomla, etc.
  21. 21.  http://w3schools.com
  22. 22. -Rajat Shahrajat.shah200792@gmail.com

×