US03MACSC02: Web Application Development - UNIT 1 PDF

US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 1 of 17 Introduction to the Internet - The Internet is a communications protocol, a language which computers use to talk to each other, called TCP/IP. Thi...

US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 1 of 17 Introduction to the Internet - The Internet is a communications protocol, a language which computers use to talk to each other, called TCP/IP. This language is designed to enable computers to exchange data reliably and efficiently, though not necessarily quickly. - The term is used to signify the network of computers connected using TCP/IP(TRANSMISSION CONTROL PROTOCOL / INTERNET PROTOCOL): the connecting wires and the equipment used to route the information (the network infrastructure), and the computers themselves. - Even more generally, the Internet is often used to indicate the community of users and computers collectively. Though a very broad definition, this is perhaps the most useful and interesting - the Internet is really an information-based Society. History of Internet - The Internet grew out of an experiment in the 1960s by the U.S. Department of Defense. - The DOD(Department of Defense Model) wanted to create a computer network that would continue to function in the event of a disaster, such as a nuclear war. If part of the network was damaged or destroyed, the rest of the system still had to work. - That network was ARPANET, (Advanced Research Projects Agency Network) which linked U.S. scientific and academic researchers. It was the forerunner of today's Internet. - In 1985, the National Science Foundation (NSF), an American Research Organization, created NSFNET, a series of networks for research and education communication. - Based on ARPANET protocols, the NSFNET created a National Backbone Service, provided free to any American research and educational institution. - At the same time, regional networks were created to link individual institutions with the national backbone service. - NSFNET grew rapidly as people discovered its potential and as new software applications were created to make access easier. - Corporations such as Sprint and MCI began to build their own networks that they then linked to NSFNET. - NSF also coordinated a service called InterNIC that registered all addresses on the Internet so that data could be routed to the right system. Services provided by the Internet 1. World Wide Web - The World Wide Web and the Internet function together but is not the same thing. The World Wide Web functions as the part of the Internet accessible to users. - The Internet serves as a vast electronic communications network and the World Wide Web makes navigation on the Internet easier by utilizing hypertext links and graphical user interfaces between different addresses on computers around the world. - Think of the Internet as providing the foundation and structure while the Web uses the Internet to provide communications, information and access to all sorts of digital services. 2. Electronic Mail - Electronic Mail more commonly known as email, electronic mail started as an afterthought to the Internet.  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 2 of 17 - Email holds the number one position as the most popular service offered on the Internet. - A protocol for sending, receiving and storing electronic messages, email has become the preferred method of communication. - The U.S. Postal Service handles around 200 billion pieces of mail each year. Email service on the Internet handles around 247 billion emails every day. 3. HTTP - The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. - HTTP is the foundation of data communication for the World Wide Web, where hypertext documents include hyperlinks to other resources that the user can easily access. - For example by a mouse click or by tapping the screen in a web browser. HTTP was developed to facilitate hypertext and the World Wide Web. - HTTPS is used to protect transmitted data from eavesdropping. An eavesdropping attack occurs when a hacker intercepts, deletes, or modifies data that is transmitted between two devices. Eavesdropping, also known as sniffing or snooping, relies on unsecured network communications to access data in transit between devices. - It is the default protocol for conducting financial transactions on the web, and can protect a website's users from censorship by a government or an ISP. HTTPS uses port 443 to transfer its information. 4. FTP - The File Transfer Protocol is a standard network protocol used for the transfer of computer files between a client and server on a computer network. - FTP is built on a client-server model architecture using separate control and data connections between the client and the server. 5. Telnet - Telnet is a protocol that allows you to connect to remote computers (called hosts) over TCP/IP network (such as the internet). - Using telnet client software on your computer, you can make a connection to a telnet server (that is, the remote host). Terminologies of Internet 1. World Wide Web (WWW) - A hypermedia information storage system which links computer-based resources around the world. It is a collection of interlinked documents that are accessible over the Internet. It consists of millions of web pages that contain text, images, voice and videos. 2. URL - A Universal Resource Locator (a computer address) that identifies the location and type of resource on the Web. A URL generally starts with "http://" 3. Web Page - Web pages are resources of information. They are generally created in the HTML format and provide the web users with navigational abilities through hyperlinks to other web pages on the web. 4. Website - A website is a set of web pages consisting of text, audio and video. Web servers host websites.  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 3 of 17 5. Web Server - A web server is a computer program that accepts HTTP requests from web clients and provides them with HTTP responses. 6. Web Browser - A browser is a software program that allows users to access and navigate the World Wide Web. To access the World Wide Web, you need to use a web browser. The two most frequently used browsers are Microsoft Internet Explorer and Mozilla Firefox. Both browsers are quite similar. 7. Search Engine - Specialized software, such as AltaVista and Yahoo, that lets WWW browser users search for information on the Web by using keywords, phrases, and Boolean logic. Different search engines have different ways of categorizing and indexing information. Search engines are accessed by typing in the URL of that engine or using a browser's compilation of search engines in its Internet search function. Components of a Browser Window: Browsers are software programs that allow you to search and view the many different kinds of information that's available on the World Wide Web. The information could be web sites, video or audio information. The following are components web browser window: Status Bar: You will find the status bar at the very bottom of your browser window. It basically tells you what you are doing at the moment. Mainly, it shows you load speed and the URL address of whatever your mouse is hovering over. Address Bar: You will find this bar at the top of your browser window and its purpose is to show you the whole URL or web site address. Title Bar: You will find this bar at the absolute top of your browser and in will be the colour blue for the major browsers. The purpose of the Title bar is to display the title of the web page that you are currently viewing. Toolbar Icons: You will find the Toolbar directly under the Title Bar. The Toolbar is where you will find the back button, home button and the refresh button etc. Display Window: The Display window is the space in which you view this website right now. Scroll Bars: The Scroll bars, usually located to the right of the Display Window, allows you to "scroll" (move down or up the web page) so you can view information that is below or above what is currently in the Display Window. Use of Menus and Toolbar Buttons List of Menus in Web Browser: - File - Edit - View - Edit - Tools - Helps etc  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 4 of 17 File Menu: File menu is used to opening a new File, New Tab, duplicate tab. With Save As option we can save any web page, image or other information from web site. We can print our desired document with Print option available in File menu. And Print Preview option is available for viewing the how our page will look after printing. Moreover, Send, Import and Export, Properties, Work offline, close tab and Page Setup options are available for further manipulation on data and work with browser. Edit Menu: This menu is used to perform the operation like cut, copy, paste and find from the web page View Menu: This menu contains options like Toolbar: for adding different toolbars on the page. Explorer bar: shortcut for favourite, history feeds and research. Go to: to go to back and home page. Stop, Refresh, Zoom, Text size, Encoding, Style, Source, Full screen etc. Favourite Menu: This menu is used to manage your favourite web sites with options like Add to Favourite, Add to favourite Bar etc. Tools Menu: Variety of Tools are provided by the Tools menu like Delete Browsing History, Private Browsing, Private Filtering, Pop up Blocker, Manage Add -ons etc.  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 5 of 17 Help Menu: This menu provides help about web browser regarding its features and facilities. Toolbars In Web Browser: First toolbar The first toolbar contains the following groups of controls:  Back and Forward buttons (ALT + LEFT ARROW and ALT + RIGHT ARROW).  The address bar is an edit-combo box which contains the address of the web page which is displayed in the content pane. To read the address bar, press INSERT + A.  Refresh (F5) and Stop (ESC) buttons.  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 6 of 17  Search box (CTRL + E).  Search split-button. Press the button to search, or DOWN ARROW to open the Search Options menu. In practice you never need to use this split button, as all the functions are available from the Search box by using the appropriate keystrokes.  Normally, you'll move to these controls directly using their shortcuts, but you can move around this toolbar, and the Second toolbar by using standard navigation keystrokes.  To move between the groups of controls use TAB and SHIFT + TAB, and to move within the groups use LEFT ARROW and RIGHT ARROW.  Note that you can't move to the Back and Forward buttons, the only way of pressing these is to use their shortcuts. Second toolbar This section describes the Second toolbar, and can safely be omitted on the first reading of this guide. The second toolbar contains the following groups of controls:  Favorites Center and Add to Favorites buttons.  Buttons for tabbed browsing:  Quick Tabs (CTRL + Q).  Tab List (CTRL + SHIFT + Q).  Buttons for each of the open tabs.  New Tab (CTRL + T).  Command bar, which contains:  Home split button. Pressing the button takes you to the browser's home page, and pressing DOWN ARROW opens the Home menu. The Home menu has shortcut ALT + M.  Feeds split button, which is only available if there are one or more feeds on the page. Pressing the button goes to the first feed, and pressing DOWN ARROW opens the Feeds menu which contains the feeds on the page. The Feeds menu has the shortcut ALT + J.  Print split button. Pressing the button prints the page, and pressing DOWN ARROW opens the Print menu. The Print menu has the shortcut ALT + R.  Page button (ALT + P), which opens the Page menu. The items on this menu can all be found on the menus of the menu bar.  Tools button (ALT + O), which opens a Tools menu. The items on this menu are different from those on the Tools menu on the menu bar, but they can all be found on the menus of the menu bar.  Help button (ALT + L), which opens a Help menu, which is the same as the Help menu on the menu bar. History and Navigation History - To open a recently visited web page: 1. Press CTRL + H to open the History page of the Favorites Center.  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 7 of 17 2. In the tree view of your recently visited web pages, select a web page, and press ENTER to open it. If you decide that you don't want to open one of these pages, just press ESC to close the Favourites Canter. - By default, Internet Explorer keeps a list of visited pages for the last 20 days, but this period can be changed in the Internet Options dialog box, as described in the History options section below. - The following sections describe the different views of the visited web pages, how to search them, and history options. Views - On the History page of the Favorites Center, the recently visited web pages can have the following views:  By Date: The items at the top level of the tree view are a mixture of days and weeks, for example, Today, Tuesday, and Last Week. If you open one of these items, then its children are the websites visited on that day/week. If you open one of these websites, then its children are the web pages which you visited on that website.  By Site: The items at the top level of the tree view are the recently visited websites, and these are sorted alphabetically. If you open one of these websites, then its children are the web pages which you visited on that website.  By Most Visited: A list of the most visited web pages, with the most visited web page at the top of the list.  By Order Visited Today: A list of the web pages visited today, with the most recent at the top. To change the view of the recently visited web pages: 1. TAB or SHIFT + TAB to the toolbar of the Favorites center. 2. Press LEFT ARROW to move to the History split button. 3. Press DOWN ARROW to open the History menu, and choose one of the views. Search History 1. TAB or SHIFT + TAB to the toolbar of the Favorites center. 2. Press LEFT ARROW to move to the History split button. 3. Press DOWN ARROW to open the menu, and choose Search History. 4. In the Search for edit box, type in your search terms, and press ENTER. 5. TAB twice to move to the list of web pages which have been found, and press ENTER to open one of them. History Options To set the number of days Internet Explorer keeps visited web pages in History: 1. Open the Internet Options dialog which is on the Tools menu. 2. On the General page, press the Settings button in the Browsing history section of the page. 3. A Temporary Internet Files and History dialog opens. In the History section, you can change the “Days to keep pages in history” edit spinbox. Press ENTER to press the default OK button. 4. You're returned to the Internet Options dialog box. TAB to the OK button and press it.  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 8 of 17 - Navigation There are several ways of moving to another web page:  Type a web address in the address bar. Press ALT + D, which moves you to the address bar, and selects the text in the address bar. Then type in the address and press ENTER.  Use the Search box. Press CTRL + E to move to the Search box, type in one or more search terms, and then press ENTER. More details are given in the Search box section.  Go to one of the web pages in your Favorites. Press CTRL + I to open the Favorites page of the Favorites Center, and then choose a web page. More details about Favorites are given in the Favorites section.  Go to a web page which you've visited recently. Press CTRL + H to open the History page of the Favorites Center, and then choose a web page. More details are given in the History section.  Open a link on a web page. To open a link, press ENTER.  Go Back and Forward, by pressing ALT + LEFT ARROW and ALT + RIGHT ARROW respectively. Going back, retraces your path of web pages, ending up with the page with which the tab (page) opened. Once you have gone back, you can also go forward again.  Go to your Home page, by pressing ALT + HOME. Instructions for setting the Home page are given in the Browser home page section of the Internet options dialog section below.  Open an HTML file on your computer. Press CTRL + O, and an Open dialog opens with the initial focus on an open edit box. Rather than type in the full path of the file, it's easier to TAB to the Browse button and presses it.  A dialog with the title Microsoft Internet Explorer opens, which the same structure as a standard Open dialog. Select a file, and press ENTER to press the default Open button. You are returned to the Open dialog, and press ENTER to press the default OK button. ::Setting Basic Options, Security and Privacy Precautions:: Figure: Basic Internet Options  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 9 of 17 Microsoft Internet Explorer has its security features in Internet Options which can be found under the Tools menu. The security features include:  The General tab  Deleting cookies and temporary internet files  Clearing the browser history  The Security tab  Internet security level - by default this is set to medium, prompts before downloading potentially unsafe content and unsigned ActiveX controls will not be downloaded. The custom level allows the user to adjust the security level to High, Medium, Medium-low, and Low. Each of these levels changes various security settings.  Local intranet security level - by default this is set to medium-low, most content will be run without prompts; unsigned ActiveX controls will not be downloaded, same as medium which is the default in internet security only without the prompts. The custom level allows the user to adjust the security level to High, Medium, Medium-low, and Low.  Trusted sites security level - by default this is set to low, minimal safeguards and warning prompts are provided, most content is downloaded and run without prompts, and all active content can run. The custom level allows the user to adjust the trusted sites security level to High, Medium, Medium-low, and low.  Restricted sites security level - by default this is set to high, less secure features are disabled. The custom level allows the user to adjust the restricted sites security level to High, Medium, Medium-low, and Low.  The Privacy tab  Settings - by default the privacy settings are set to medium, blocks third-party cookies that do not have a compact privacy policy, blocks third-party cookies that use personally identifiable information without your implicit consent, and restricts first-party cookies that use personally identifiable information without implicit consent. The sites button allows the user to add sites that are allowed to use cookies.  Pop-up Blocker - by default the Block pop-ups check box is ticked, there is a settings button that allows the user to add sites that are allowed to use pop- ups.  The Content tab  Certificates - the clear SSL state button clears the SSL cache, the Certificates button lists the Intermediate Certificate Authorities, the Trusted Root Certification Authorities, the Trusted Publishers and the Untrusted Publishers.  Personal information - AutoComplete stores previous entries and suggests matches for the user, the AutoComplete button allows the user to turn on AutoComplete for web addresses, forms, and usernames and passwords on forms. The user can also clear forms and clear passwords from the AutoComplete button. Introduction to HTML  HTML stands for Hyper-Text Markup Language.  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 10 of 17  It is a documentation language (tool) to mark the headings, title, tables etc.  It is a universal language to design a static a web page.  It is machine independent and all the Internet browsers accept the HTML code.  HTML is a set of special code that can be embedded in text to add formatting and linking information. HTML - A type of text code in Hypertext Mark-up Language which, when embedded in a document, allows that document to be read and distributed across the Internet. The Hyper Text Mark-up Language (HTML) is a simple data format used to create hypertext documents that are portable from one platform to another. HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of domains. HTML TAGS  Tag: (Heading tag) - Headings can be created with tags H1, H2, H3, H4, H5 and H6. - H1 will make a big heading. H2 will make it smaller and H3 will make it still Smaller, and so on. For Example: HTML O/P: HTML HTML O/P: HTML HTML O/P: HTML HTML O/P: HTML HTML O/P: HTML HTML O/P: HTML - We can align the heading to the left, right or center. The default alignment is left - The following are the four types of alignments. 1. Left 2. Right 3. Center 4. Justified For Ex: Note: A fresh line paragraph will start only after an , and tag.  tag - It used to display the larger text For Ex: This is larger text> O/P: This is larger text  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 11 of 17  tag - this tag is used align text and other object in central position of page. For Ex: M.B.Patel Science College O/P: M.B.Patel Science College  Tag - It is used for crossing out a word by having a line drawn through it. For Ex: this is strike effect O/P: this is strike effect  tag - This tag is used to Make text scroll across the screen For Ex: < MARQUEE> this is scrolling text  tag - This tag enables the text blinking in the page. For Ex: this is blinking Star  tag - This tag used to insert a standard clickable button within a form. - It is generally better than using "input type" tag. For Ex: SUBMIT  tag - Division tag specifies a logical division within a document. It is used to separate or identify chunks of content that are not otherwise distinguished naturally using other tags.  tag - This tag is used set CSS (Cascading Style Sheet). Normally used in section of a page.  tag - Using this tag it enables multi-line text input area in a form.  tag - It used to display subscript text For Ex: H2SO4 O/P: H2SO4  tag - It used to display superscript text effect. For ex: a 2b O/P: a2b  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 12 of 17 Structure of an HTML document - The following is the general structure of HTML Code. HTML: these tags tell the server that this page should be interpreted as HTML. The opening tag should always be the first tag on any Web page. The closing tag should always be the last tag on any Web page. Head: Identifies the "HEAD" section of your HTML page. Title: Identifies the title bar text for your page. One and only one tag set should appear in your HTML document. This tag is always located between the Head tags of your document. Example Page Text for your page Body: these tags Identify the Body section of your page. Most of the content that anyone sees on your page will be situated between the opening and closing Body tags. The browser will always assume these tags exist even if you don’t include them in your HTML document. However, you should use them to take advantage of the attributes listed below. BODY ATTRIBUTES: background=" " & bgcolor=" " EXAMPLE: Example page  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 13 of 17 Text for your page Text and Paragraph Formatting:  Tag: (Bold tag) - It is used to make the text bold. For Ex: M. B. Patel Science College O/P: M. B. Patel Science College  tag: (Italic tag) - It is used to make the text italic. For Ex: M. B. Patel Science College O/P: M. B. Patel Science College  tag: (Underline tag) - It is used to make the text underlined. For Ex: M. B. Patel Science College O/P: M. B. Patel Science College  tag: (Break tag) - It is used for line breaking. For Ex: M. B. Patel Science College Anand-388001 O/P: M. B. Patel Science College Anand-388001  tag: (Preformatting Text tag) - It is used to display preformatted text. - That means the text or symbols between and appear as they are in the page. For Ex: H T M L O/P: H T M L  tag: (Typewriter Font tag) - It is used to display the typewriter font. The browser uses a fixed-spaced font, such as "Courier" to display text in this style. For Ex: Vande Mataram O/P: Vande Mataram  tag: (Paragraph) - Whenever we give the tag, the subsequent text appears in a new line.  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 14 of 17 - Also, if we want to align paragraphs, we can mark the beginning and the end of a paragraph by and tag respectively. - It is also possible to align a paragraph left, right, center or justified. - When a paragraph ends, a blank line left. For Ex: Hello students of S. Y. B. Sc. (CS)! I wish you all the very best for your future. Work hard with intelligence. It was very nice experience to work with you. Hello students of S. Y. B. Sc. (CS)! I wish you all the very best for your future. Work hard with intelligence. It was very nice experience to work with you. O/P: align=left Hello students of S. Y. B. Sc. (CS)! I wish you all the very best for your future. Work hard with intelligence. It was very nice experience to work with you. align=right Hello students of S. Y. B. Sc. (CS)! I wish you all the very best for your future. Work hard with intelligence. It was very nice experience to work with you. Ordered and Unordered List - When we want to mention a list of items, there are two methods to doing so. 1. We can number them as 1, 2, 3… etc. 2. We can list them one below the other without numbers. - When we list them without numbers, it is called an unordered list. - When we list them with numbers, it is called an ordered list. Example of an Unordered List TAG  HTML  Biren  Amit  Kalpit Example of an Ordered List TAG 1. HTML a. HTML i. HTML 2. Biren b. Biren ii. Biren 3. Amit c. Amit iii. Amit 4. Kalpit d. Kalpit iv. Kalpit  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 15 of 17 tag: (Unordered Lists) - An unordered list is represented by the and tags. - The tag is given at the beginning and the tag is given at the end. - Each list item is given an tag. For Ex: The following are the staff members of computer Department: Mr. Rahul Trivedi Mrs. Beena Patel Mr. Sanjay Mandaviya Hiren Bhatt O/P: The following are the staff members of computer Department:  Mr. Rahul Trivedi  Mrs. Beena Patel  Mr. Sanjay Mandaviya  Hiren Bhatt Type Attribute (Bullets in a list) - In an unordered list, every listed item has a bullet. - The bullet can be any one of the following symbols:  Disc o Circle  Square - The symbol that we want to include can be selected by using TYPE attribute of the tag. - For example, If we use we shall get a disc symbol. If we use we shall get a circle symbol. If we use we shall get a square symbol. tag: (Ordered Lists) - Lists which appear with numbers are called ordered lists. - The tag is given at the beginning and the tag is given at the end. - Each list item is given an tag. For Ex: - The following are the staff members of computer Department: Mr. Rahul Trivedi Mrs. Beena Patel Mr. Sanjay Mandaviya Hiren Bhatt  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 16 of 17 O/P: The following are the staff members of computer Department: 1. Mr. Rahul Trivedi 2. Mrs. Beena Patel 3. Mr. Sanjay Mandaviya 4. Hiren Bhatt Start Attribute - In an ordered list, the numbers begin from 1. - It is possible to start the numbers from any desired number. - For Ex. if we want to start with 5, then we can represent the fact in the start attribute of the tag. For Ex: Mr. Rahul Trivedi Mrs. Beena Patel Mr. Sanjay Mandaviya Hiren Bhatt O/P: 5. Mr. Rahul Trivedi 6. Mrs. Beena Patel 7. Mr. Sanjay Mandviya 8. Hiren Bhatt Type Attribute - Instead of numbers, we can have letters A, B, C OR a, b, c OR roman letters like i, ii, iii and I, II, III in the ordering of the listed items. - This is specified by the type attribute in the tag. - Following are the symbols used with type attribute: Symbol Meaning 1 Numbers A Upper case letters A, B, C.... a Lower case letters a, b, c.... I Upper case roman letters I, II, III…. i Lower case roman letters i, ii, iii.... - The start attribute can also be used together with type attribute. Nested Lists  It is possible to use one type of list within another type of list.  These are called nested lists. For Ex. of Nested List: 1. Fruits  Apple  US03MACSC02: Web Application Development - I UNIT-1 Introduction to internet and Basics of HTML Page 17 of 17  Banana  Orange 2. Animals  Lion  Tiger  Cat 3. Birds  Sparrow  Parrot  Crow - This nested list can be represented by an HTML code as follows O/P: Fruits Apple Banana Orange Animals Lion Tiger Cat Birds Sparrow Parrot Crow