Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to web designing


Published on

  • Be the first to comment

  • Be the first to like this

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