Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Computer science Chapter 17 - Web Designing.pdf
Ähnlich wie Computer science Chapter 17 - Web Designing.pdf (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Computer science Chapter 17 - Web Designing.pdf
- 1. CHAPTER 17 WEB DESIGNING Dept of Computer Science VMIPUC
- 2. OBJECTIVES To understandthe concepts of Internet To develop simple Web Applications Blueprint 5 Marks – 1 Q
- 3. INTRODUCTION ➢Earlier we had only standalone computers which confined the users to a single environment ➢If any information is to be exchanged, they had to transfer the data physically
- 4. NETWORK ➢Computer Network – Set of computers connected together for the purpose of sharing resources ➢The most common resource shared today is a connection to the Internet ➢Other shared resources can include a printer or a file server. The internet itself can be considered as a Computer Network ➢The term Internet is derived from two words Interconnection and Network
- 5. INTERNET ➢The Internet is a combined collection of many interconnected computer networks around the world ➢Each network consists of multiple number of computers connected through cables, wireless or any other media ➢These computers are used to share and exchange information across the globe
- 8. WWW ➢Stands for World Wide Web ➢Invented in 1989 by Tim Berners-Lee and Robert Cailliau ➢World Wide Web Consortium (W3C) was founded in 1994 by Tim Berners-Lee ➢WWW is a collection of information which is accessed via the Internet ➢It can be referred to as an Information system where documents and other web resources are identified by URLs, interlinked by hyperlinks, and accessible over Internet ➢Information can include text, images, animations, audio or video
- 9. WEB PAGE ➢Web Page is document available on World Wide Web ➢A web page can contain huge information including text, graphics, audio, video and hyper links. These hyper links are the link to other web pages.
- 10. WEBSITE ➢Collection of Webpages usually containing hyperlinks to each other and made available online by an individual, company, educational institution, government, or organization ➢Set of related web pages located under a single domain name, typically produced by a single person or organization.
- 11. WEB SERVER ➢Web server is a computer where the web content is stored. ➢Webpages are stored on computers that are connected to Internet, these computers are known as Web Servers ➢Basically web server is used to host the web sites but there exists other web servers also such as gaming, storage, FTP, email etc.
- 12. BROWSER ➢Application used to access and view Websites ➢It enables user to view web pages, navigates websites, and move from one website to another ➢Examples: ▪ Microsoft Edge (Internet Explorer) ▪ MozillaFirefox ▪ GoogleChrome ▪ Netscape Navigator ▪ Opera ▪ Brave ▪ Apple’s Safari
- 13. HTTP ➢HTTP – Hyper Text Transfer Protocol ➢It is a protocol to exchange or transfer Hypertext ➢Term coined by Ted Nelson in 1965
- 14. DNS ➢DNS – Domain Name System is the phonebook of the Internet ➢It is a hierarchical distributed naming system for computers, services or any resources connected to Internet or a private network ➢Domain Name – String of text that maps to numeric IP Address used to access a website ➢In other words, domain name is the text that user types into a browser window to reach a particular website ➢Web browsers interact through Internet Protocol (IP) addresses ➢DNS translates domain names to IP addresses(192.168.1.1) so browsers can load Internet resources.
- 15. URL ➢URL – Uniform Resource Locator ➢HTTP uses internet addresses in URL Format ➢type://address/path/ ➢http://www.example.com/index.html Protocol DomainName/ Hostname Filename
- 16. HYPERLINK ➢Connection that allows you to move easily from one webpage to another ➢Text, Images can be made into hyperlinks ➢Hyperlink text is usually underlined ➢Clicking on hyperlink takes you to different webpage ➢Hyperlink to Google Click here
- 17. SEARCH ENGINE ➢Information Retrieval system designed to help find information on the World Wide Web ➢The search engine allows one to ask for content meeting specific word or a phrase and retrieves a list of items that matches those criteria ➢They use regularly updated indexes to operate quickly and efficiently ➢Some examples ▪ Google ▪ Bing ▪ Yahoo ▪ DuckDuckGo ▪ Brave
- 18. SURFING ➢Act of browsing the Internet by going from one web page to another web page using hyperlinks in a Internet Browser ➢The term “surfing” is generally used to describe an unidirectional type of web browsing in which the user jumps from one page to another page, as opposed to searching for a specific information ➢Term was coined by Mark McCahill ➢When someone is surfing the Internet, they can be referred to as a surfer or net surfer
- 19. E-MAIL ➢Electronic Mail ➢Popular, Cheap, Easy and Fastest mailing service ➢We can send and receive messages on internet within seconds or minutes ➢E-Mail is a system of exchanging messages through a computer network ➢Address are two strings separated by character”@” ➢Username@domain
- 20. ADVANTAGES – E-MAIL ➢Easy to use ➢Speed ➢Easy to prioritize ➢Reliable and secure ➢Informal and conversational ➢Easier for reference ➢Automated E-Mails ➢Environment friendly ➢Use of graphics ➢Advertising tool ➢Cheap Service ➢Data Storage ➢Provision of Attachments
- 21. DISADVANTAGES – E-MAIL ➢Viruses ▪ These are computer programs which has the potential to harm a computer system ▪ Recipients need to scan the mails as the viruses transmitted through them may harm the computer system ➢Spam ▪ E-Mails when used to send unwanted advertisements are called Spam ▪ Checking and deleting the unwanted mails canconsume lot of time ➢Hacking ▪ Act of breaking into computer security is called Hacking ▪ Hackers access important informationand may destroy it ▪ Hackers try to get password of internet users and then access important information
- 22. NEWSGROUPS ➢Discussion groups on internet ➢Used for free exchange of information ➢A user sends a message in newsgroups site, the other users read this message from this site and respond to it ➢They are provided by special computers called News Servers
- 23. E-COMMERCE ➢Electronic Commerce used to carry out business dealings by Internet ➢E-Commerce is the buying and selling of goods and services, or the transmitting of funds or data, over an electronic network, primarily the internet ➢Examples: ▪ Online Banking ▪ Online Shopping ▪ Online Education
- 24. FTP ➢File Transfer Protocol used to transfer files on Internet easily and quickly ➢Audio, Video, Graphics and Data files can be uploaded and downloaded using FTP
- 25. TELNET ➢Also called Remote login ➢Computer based protocol which permits your computer to login to another computer at some other location and use it as if you are there
- 26. CHAT ➢Most popular services by which two or more users can communicate with each other by text or audio or video ➢Examples ▪ LiveChat ▪ Yahoo Messenger ▪ MSN Messenger ▪ GTalk ▪ Skype ▪ Teams
- 27. GOPHER ➢Gopher is an Internet application that allows you to browse many different kinds of resources by looking at menus or listings of information available ➢It is text based browser and users search for files via menus or directory structures
- 29. HTML ➢Hyper Text Markup Language ➢Standard markup language for creating web pages ➢Describes the structure of a web page ➢Tells browser how to display the content
- 30. HTML VERSIONS ➢HTML 1.0: Released in 1991 ➢HTML 2.0: Released in 1995. Supported form-based file upload, form elements such as text box, option button etc ➢HTML 3.2: Released in 1997. Supported tables and complex mathematical equations ➢HTML 4.01: Released in 1999. Stable version which supported stylesheets(CSS) and scripting ➢HTML 5: Released in 2008. Latest version
- 31. FEATURES OF HTML ➢Very easy and simple language ➢Easy to make an effective presentation with formatting tags ➢Flexible way to design web pages along with the text ➢Facilitates programmers to add a link on the web pages ➢Platform-Independent ➢Can add Graphics, Videos, and Sound to the web pages ➢Case-insensitive language
- 33. HTML TEXT EDITORS ➢HTML file is a text file, hence we can use any text editors ➢Text editors are programs that allow editing in written text to create web page ➢We write out HTML code in some text editor [Notepad, Notepad++, Sublime Text etc.] ➢We can create simple HTML pages using a simple text editor, i.e., Notepad which is present in all the platforms of computers ➢The HTML file can be opened in any browser of your choice, but a few tags may not be supported by some web browsers
- 34. STEPS TO WRITE HTML CODE Step 1: Open Notepad Step 2: Write HTML code Step 3: Save HTML file with .htm or .html extension Step 4: Open the HTML page in your web browser
- 35. BUILDING BLOCKS OF HTML ➢Tags: These tags are keywords enclosed within angle braces <TagName>, usually in pairs. Start tag and end tag ➢Attribute: An attribute provides extra information about the element. It is applied within the start tag. It has two fields: name and value ➢Element: Individual component of HTML file. It is defined by a start tag, some content and an end tag ➢Some elements do not have content, they are called empty elements. They do not have end tag Example: <p style="color: red">Welcome</p>
- 36. HTML TAGS ➢They are like keywords which define how web browser formats and displays the content ➢The browser differentiate these tags and content and display only content on the web browser, not tags ➢HTML tags have 3 main parts: ▪ Opening Tag ▪ Content ▪ Closing Tag ➢Syntax: <tag>Content</tag> ➢Some tags do not have closing tags, they are called empty tags
- 37. THE <!DOCTYPE> DECLARATION ➢The <!DOCTYPE> declaration tag is used by web browser to understand the version of the HTML used in the document ➢Usage: <!DOCTYPE html> -- Refers to current version HTML 5 ➢For previous versions: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ➢The declaration becomes complicated for previous versions as it has to refer to DTD(Document Type Definition)
- 39. PARAGRAPH ➢HTML Paragraph tag <p> is used to define a paragraph in a webpage ➢Browser add an empty line before and after a paragraph ➢Browser removes extra spaces and extra line spaces while displaying the page
- 40. HEADING TAG ➢HTML Heading tag <hn>…</hn> can be defined as title or subtitle which has to be displayed on the web page ➢The text within the heading tags is displayed in bold format and size of text depends on the number of heading ➢There are six different headings <h1> to <h6> ➢Browser adds one line before and after the content when <hn> tag is used ➢Search engines use the headings to index the structure and content of your web pages.
- 41. LINE BREAK ➢The HTML Line Break <br> defines a line break ➢We use this tag if we want a new line without starting a new paragraph ➢The <br> tag is an empty tag, i.e., it doesn’t have a end tag ➢Many a times, we use <br> as <br/>
- 42. HORIZONTAL LINE ➢Horizontal lines are used to visually break up sections of a document ➢The <hr> tag is a used to draw a line from current position to the right margin of the web page ➢It is used to show a thematic break in an HTML page (i.e., shift of a topic) ➢Or it can be used to separate the content ➢<hr/> is also an empty tag, with no end tag
- 43. FORMATTING TAGS ➢Bold ➢Italicize ➢Underline ➢Emphasize ➢Strong Text ➢Small Text ➢Subscripted ➢Superscripted ➢Inserted ➢Deleted
- 44. HTML IMAGES ➢The HTML <img> tag is used to embed an image in a web page ➢The <img> tag creates a holding space for the referenced image ➢It does not have a closing tag ➢The <img> tag has two required attributes: ▪ src – Specifies the path to the image ▪ alt – Specifies an alternatetext for the image – This text is displayed if browser fails to load the image ➢Syntax: <img src=“url” alt=“alternatetext”/> ➢You can use PNG, JPEG or GIF image file. The image name is always case sensitive
- 45. SUPPORTED IMAGE FORMATS Abbreviation File Format File Extension APNG Animated PortableNetwork Graphics .apng GIF Graphics Interchange Format .gif ICO Microsoft Icon .ico, .cur JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp PNG PortableNetwork Graphics .png SVG ScalableVector Graphics .svg
- 46. HTML HYPERLINKS ➢HTML links are hyperlinks ➢Clicking on the link will navigate you to another document/web page ➢The mouse cursor will change when you hover over the link ➢The hyperlink can be image or text ➢Attribute href is important attribute which indicates link’s destination ➢Syntax: <a href=“url”>Link Text</a>
- 47. HTML LISTS ➢HTML lists allow web developer to group set of related items in lists ➢Each list item start with <li> tag ➢Three types ▪ Unordered list - <ul> ▪ Ordered list - <ol> ▪ Descriptionlist -<dl>
- 48. UNORDERED LIST ➢Unordered list starts with <ul> tag ➢The list items will be marked with bullets(small black circles) by default ➢Different types ▪ Disc ▪ Circle ▪ Square ▪ None
- 49. ORDERED LIST ➢Ordered list starts with <ol> tag ➢The list items will be marked with numbers by default ➢Different Types ▪ Numbers “1” ▪ Upper Case Roman“I” ▪ Lower Case Roman “i” ▪ Upper Case Letters “A” ▪ Lower Case Letters “a”
- 50. DESCRIPTION LIST ➢A description list is a list of terms with a description of each term ➢Description List starts with <dl> tag ➢The <dt> tag defines the term(name) ➢The <dd> tag describes each term