Introduction to Web Technologies PDF

Introduction of Web  www: is a subset of Internet. It is a collection of documents connected through links spread out over thousands of computers over the internet. Web Browser: finding these pages over the web can be accessed using web browser. For exp: Library is collection of books. B...

Introduction of Web  www: is a subset of Internet. It is a collection of documents connected through links spread out over thousands of computers over the internet. Web Browser: finding these pages over the web can be accessed using web browser. For exp: Library is collection of books. Books are collection of pages or facebook which is collection of different pages like home page, friend page etc. Internet: internet is everywhere which is a network of computers which links many different types of computers all over the world. 2 Web Technology  Basic services provided by Internet Electronic mail: enables users to send a message to another internet user in any part of world. File transfer protocol: enables the transfer of files between a client and a server on a network like download, upload, rename, delete and manage files on a remote server. Telnet: enables an internet user to login to another computer on the internet from his/her local computer. Also called ‘remote login’  Usenet news: enables a group of internet users to exchange their views/ideas/information on some common topic of interest with all member belonging to the group. HTTP: enables communication between web browser and web servers for transfer of hypertext documents Transmission Control Protocol: ensure the integrity of communication. Also provide reliable and error checked delivery of data between applications.  Client Sever Concepts: Laptop Internet Phone Server PC  Client When we say client, it means to talk of a person or an organization using a particular service In digital world, a client is a computer (Host), i.e., capable of receiving information or using particular service from service providers. A client program runs only when it requests for a server, while the server program runs all the time as it does not know when the service is required. A client program is a finite program means that the service started by the user and terminates when the service is completed.  Server When we say sever, it means, a person or medium that serves something. In digital world, a server is a remote computer that provides information or access to a particular services A sever provides a service for many clients. So, we can say that client-server follows many to one relationship. When the client requests for a service, then the server opens the door for incoming requests, but it never initiates the service. A sever program is an infinite program means that when it starts, it runs infinitely unless the problem arises  Advantages of client –server Networks Centralized: All data is stored in a server Security: All resources are centrally administered. Performance: The use of dedicated server increases the speed of shared resources that are centrally administered. Scalability: We can increase the number of clients and servers separately.  Disadvantages of Client- Sever Network Traffic Congestion: is a big problem. When large number of clients send requests to the same server. When server is down, then client request cannot be met A client/server network is very decisive. Sometimes, regular computer hardware doesn’t serve a certain number of clients. In such situations, specific hardware at the server side needed to complete the request. Clients are prone to viruses, Trojans and servers are prone to Denial of Service (DOS) attacks Data packet may be spoofed or modified during transmission  Types of web Developers Frontend Developers: Implement web page designs using HTML and CSS. They make sure website looks pretty on different devices and that the forms and button work. Backend Developers: Create the backbone of the web applications. They write code logic that handles a user’s input. (For Exp: what should happen when you click the signup button after filling a form.) Full Stack Developers: Full stack developers do bits of both backend and frontend. Depending on the problem, they switch and move. Introduction to HTML  Web Technology What is HTML? HTML stands for Hyper Text Markup Language Basic code that is used to structure a web page and its content. The component is used to design the structure of websites are called HTML tags. An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor (notepad) 12  Web Technology The Anatomy of a Web Site: Think about the followings before working your Web pages. Think about the sort of information(content) you want to put on the Web. Set the goals for the Web site. Organize your content into main topics. Come up with a general structure for pages and topics. 13 HTML Tags and Basic Page Structure  Web Technology HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like and exceptions: , , tags … The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, means the same as 15  How to Create and View an HTML document? 1.Use an text editor such as visual studio or Notepad to write the document. 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open Internet Explorer (or any browser) Off-Line. 4.Click on File, Open File and select the filename.html document that you just created. 5.Your HTML page should now appear just like any other Web page in explorer.  How to Create and View an HTML document? 7.You may now switch back and forth between the Source and the HTML Document switch to Notepad with the Document Source make changes save the document again switch back to explorer. click on REFRESH and view the new HTML Document switch to Notepad with the Document Source......  Web Technology HTML Elements This is an HTML element: This text is bold Example:2 This HTML element starts with the start tag , and ends with the end tag. The purpose of the tag is to define the HTML element that contains the body of the HTML document. 18  Web Technology Headings Defined with the to tags defines the largest heading defines the smallest heading This is a heading This is a heading This is a heading This is a heading This is a heading This is a heading 19  Web Technology Paragraphs Defined with the tag This is a paragraph This is another paragraph Note: Paragraphs can be written without end tags This is a paragraph This is another paragraph 20  Web Technology Line Breaks The tag is self-closing in HTML The tag is an empty tag. It has no end tag tag should be written like this: Because the tag has no end tag 21  Web Technology Horizontal Rule The tag is used to insert a horizontal rule (line) The hr tag defines a horizontal rule: This is a paragraph Example:3 22 HTML Attributes  Web Technology HTML Tag Attribute Provides additional information to an HTML element Attributes always come in name/value pairs like this: name="value". Attributes are always specified in the start tag of an HTML element Example:4 24 HTML Fonts  Web Technology The HTML Tag You can specify both the size and the type of fonts Example:14 Font Attributes Attribute Example Purpose size="number" size="2" Defines the font size size="+number" size="+1" Increases the font size size="-number" size="-1" Decreases the font size face="face-name" face="Times" Defines the font-name color="color-value" color="#eeff00" Defines the font color color="color-name" color="red" Defines the font color 26  Web Technology Font Style and Font Size Example:15 Example:16 Font Colors Example:17 Example:18 27 HTML Character Entities  Web Technology Character Entities Characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. To display a less than sign ( greater than &gt; &#62; & ampersand &amp; &#38; " quotation mark &quot; &#34; ' apostrophe &apos; (does not work in IE) &#39; Example:19 30  Web Technology Some Other Commonly Used Character Entities Result Description Entity Name Entity Number ¢ Cent &cent; &#162; £ Pound &pound; &#163; ¥ Yen &yen; &#165; € Euro &euro; &#8364; § Section &sect; &#167; © copyright &copy; &#169; ® registered trademark &reg; &#174; × multiplication &times; &#215; ÷ division &divide; &#247; 31 HTML Lists  Web Technology Types of List Unordered List Ordered Lists Definition lists 33  Web Technology Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the tag. Each list item starts with the tag. Coffee Milk 34  Web Technology Unordered Lists Here is how it looks in a browser: Coffee Milk Example:27 35  Web Technology Ordered Lists An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the tag. Each list item starts with the tag. Coffee Milk Here is how it looks in a browser: 1. Coffee 2. Milk 36  Web Technology Ordered Lists Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. Example:28 37  Web Technology Definition Lists A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the tag. Each definition-list term starts with the tag. Each definition-list definition starts with the tag. 38  Web Technology Definition Lists Coffee Black hot drink Milk White cold drink Here is how it looks in a browser: Coffee Black hot drink Milk White cold drink 39  Web Technology Definition Lists Inside a definition-list definition (the tag) you can put paragraphs, line breaks, images, links, other lists, etc. Example:29 Example:30 Example:31 Example:32 40 HTML Background  Web Technology Background and Text Color A good background can make a Web site look really great. Example:43 Example:44 42  Web Technology Backgrounds The tag has two attributes where you can specify backgrounds. The background can be a color or an image. 43  Web Technology Bgcolor The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name: The lines above all set the background-color to black. 44  Web Technology Background The background attribute specifies a background- image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window. 45  Background (cont…) The URL can be relative (as in the first line above) or absolute (as in the second line above). Example:45 46 HTML Links  Web Technology Hyperlinks HTML uses a hyperlink to link to another document on the Web. It is used to create links in an HTML document. Example:20 Images as a link Example:21 48  Web Technology The Anchor Tag and the Href Attribute HTML uses the (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor: Text to be displayed 49  Web Technology The Anchor Tag and the Href Attribute (cont…) The tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. This anchor defines a link to Nirma University: Visit Nirma University! 50  Web Technology The Target Attribute With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: Vi sit Nirma University! 51  Web Technology Open a link in a new browser window Example:22 Link to a location on the same page Example:23 Break out of a frame Example:24 Create a mailto link : may not work because some users may not have desktop email client configured. Example:25 52 HTML Images  Web Technology The Image Tag and the Src Attribute The syntax of defining an image: The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. 54  Web Technology Background Image Example:35 Aligning images Example:36 Let the image float Example:37 Adjust images to different sizes Example:38 Display an alternate text for an image Example:39 55  Web Technology Make a hyperlink of an image Example:40 Create an image map Example:41 56 HTML Tables  HTML Tables With HTML you can create tables. Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. Example:48 58  Web Technology Tables and Border Attributes If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will have to use the border attribute. Example:49 bordercolor attribute 59  Web Technology Headings in a Table Headings in a table are defined with the tag Example:50 60  Web Technology More Examples… Table with no borders Example:55 Headings in Table Example:56 Empty Cells Example:57 Table with a caption Example:58 61  Web Technology More Examples… Table cells that span more than one row/column Example:59 Tags inside a table Example:60 Cell padding(specifies the amount of space between the border of a table cell and its content) Cell spacing (specifies the space between the cells. It is set in terms of pixels.by default it is 1) Example:61 Cell spacing Example:62 62 HTML Frames  Web Technology Frames With frames, you can display more than one Web page in the same browser window. With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: The web developer must keep track of more HTML documents It is difficult to print the entire page 64  Web Technology The Frameset Tag The tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy 65  Web Technology The Frame Tag The tag defines what HTML document to put into each frame In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. 66  Web Technology The Frame Tag Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*"). 67  Web Technology Frameset Vertical Frameset Example:68 Horizontal Frameset Example:69 68  Web Technology Mixed frameset Example:71 69 HTML Forms  Web Technology Form Form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the tag. 71  Web Technology Input The most used form tag is the tag. The type of input is specified with the type attribute. The most commonly used input types are explained below. 72  Web Technology Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form. First name: Last name: 73  Web Technology Text Fields How it looks in a browser: First name: Last name: Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default. 74  Web Technology Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. Male Female 75  Web Technology Radio Buttons How it looks in a browser: Male Female Note that only one option can be chosen. 76  Web Technology Check Boxes Checkboxes are used when you want the user to select one or more options of a limited number of choices. I have a bike: I have a car: I have an airplane: 77  Web Technology Check Boxes I have a bike: I have a car: I have an airplane: 78  Web Technology Check Boxes How it looks in a browser: I have a bike: I have a car: I have an airplane: 79  Web Technology Form’s Action Attribute and Submit Button When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input. 80  Web Technology Form’s Action Attribute and Submit Button Username: How it looks in a browser: Username: Submit 81  Web Technology More Examples Create Button Example:82 Input Fields and Submit button Example:83 Form with Checkbox Example:84 Form with Radio Buttons Example:85 Send E-Mail from a form Example:86 82