Successfully reported this slideshow.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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: (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 translates to the addresses (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.  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 : ◦ 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" ""> <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=“”>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="">This is a link</a> Here the attribute name is href and its value is
  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. 
  22. 22. -Rajat Shah