Page 1 :
World Wide Web (WWW), byname the Web, the leading information retrieval service of the Internet (the worldwide computer network). The Web gives users access to a vast array of documents that are connected to each other by means of hypertext or hypermedia links—i.e., hyperlinks, electronic connections that link related pieces of information in order to allow a user easy access to them. Hypertext allows the user to select a word or phrase from text and thereby access other documents that contain additional information pertaining to that word or phrase. Hypermedia documents feature links to images, sounds, animations, and movies. The Web operates within the Internet’s basic client-server format; servers are computer programs that store and transmit documents to other computers on the network when asked to, while clients are programs that request documents from a server as the user asks for them. Browser software allows users to view the retrieved documents., Internet, a system architecture that has revolutionized communications and methods of commerce by allowing various computer networks around the world to interconnect. Sometimes referred to as a “network of networks,” the Internet emerged in the United States in the 1970s but did not become visible to the general public until the early 1990s. By 2020, approximately 4.5 billion people, or more than half of the world’s population, were estimated to have access to the Internet. Internet is a global communication system that links together thousands of individual networks. It allows exchange of information between two or more computers on a network. Thus internet helps in transfer of messages through mail, chat, video & audio conference, etc. It has become mandatory for day-to-day activities: bills payment, online shopping and surfing, tutoring, working, communicating with peers, etc., In this topic, we are going to discuss in detail about concepts like basics of computer networks, Local Area Network (LAN), Wide Area Network (WAN), concept of internet, basics of internet architecture, services on internet, World Wide Web and websites, communication on internet, internet services, preparing computer for internet access, ISPs and examples (Broadband/Dialup/Wi-Fi), internet access techniques, web browsing software, popular web browsing software, configuring web browser, search engines, popular search engines/search for content, accessing web browser, using favorites folder, downloading web pages and printing web pages, Following are the important differences between Web Browser and Web Server., Basic Concepts, HTTP Server: E.g., Apache HTTP Server, Apache Tomcat Server, Microsoft Internet Information Server (IIS), nginx, Google Web Server (GWS), and others. You will learn how to install Apache HTTP andTomcat web servers in the next chapter., HTTP Client (or Web Browser): E.g., Internet Explorer (MSIE), FireFox, Chrome, Safari, and others., Database: E.g., Open-source MySQL, MariaDB, Apache Derby, mSQL, SQLite, PostgreSQL,, OpenOffice's Base; Commercial Oracle, IBM DB2, SAP SyBase, MS SQL Server, MS Access; and others.You will learn how to install MySQL in the next chapter., Client-Side Programs: could be written in HTML Form, JavaScript, VBScript, Flash, and others. You will learn how to writer client-side programs using HTML and JavaScript in this course., Server-Side Programs: could be written in Java Servlet/JSP, ASP, PHP, Perl, Python, CGI, and others., Uniform Resource Locator (URL), An URL is needed to locate any resources on the Web. It is an address format that specifies how and where to find a document. The general format is as follows, where the various items in italics must be substituted with part of areal URL, or omitted altogether.http://machine_name:port/path/file_name.file_extensionmachine_name is either an IP address, for example 137.234.33.89, or a Fully Qualified Domain Name (also known, as a DNS name, because Domain Name Servers map between Domain Names and IP addresses),, for example, www.apple.com [http://www.apple.com]. In the machine name http is the protocol identifier, while www.apple.com is the resource name., port is the TCP port to connect to; this is an entry point to software on the server; an optional part of a URL. path is a relative file path from the server's document root; the server will start looking for a file in a specific directory and paths are relative to this file_name is the name of the file to be browsed, e.g. welcomefile_extension is one of a number of suffixes which, by convention and operating system setup, indicate the type ofdata contained within the file, e.g. htm, html, txt. For example, in the URL below,, http://www.apple.com/retail/business/jointventure/terms.html, ‘terms.html’ is a file with the html extension., 1.4.4HyperText Markup Language (HTML), This language provides the format for specifying simple logical structure and links in a hypertext document. As a markup language, special formatting commands are placed in the text describing how the final version should appear. These formatted documents are interpreted by a Web browser which uses the HTML code to format the page being displayed. Although most professionals use special authoring tools to write HTML documents and to manage sites, developers of e-commerce sites and applications need to know the nitty-gritty detail of HTML, and this is what you will study., HTML has had several versions over the years. "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used but currently we are having HTML 5 version which is an extension to HTML 4.01, and this version was published in 2012 1 . This course will take you through website creation using HTML5., 1.4.5 HyperText Transfer Protocol (HTTP), HTTP is a network protocol used to retrieve documents from a variety of machines in a minimum amount of time. It was invented by Tim Berners-Lee to support a project in developing a distributed hypertext system. Distributed hypertext requires the retrieval of documents from many different machines. File Transfer Protocol (FTP),, which predates the Web, would be too slow for this purpose as it is a connection-oriented protocol that requires a permanent connection to a server, thus requiring a connection-maintenance overhead when accessing different machines.Therefore, to support browsing, HTTP has the following characteristics:, connection-less; a connection is established only for the period of transfer, and the connection need not be maintained after thereafter;, stateless; the server has no 'history' of client visits (although the implementation of cookies overcomes this);, comprehensive addressing; diverse files on any HTTP server world-wide can be referenced via URLs;, diverse data; using extensible MIME-types (see later), HTTP servers can supply information of every possible data types; and, rapid; allows request-response cycles of less than 100 milliseconds, HTTP is not mandatory for distributed hypertext; there are other techniques and protocols that can be used to access or transfer information. However, like TCP/IP and HTML, HTTP is ubiquitous and so enables development in e-commerce., 2.HTML VS DHTML, HTML is a mark-up language, while DHTML is a collection of technology., DHTML creates dynamic web pages, whereas HTML creates static web pages., DHTML allows including small animations and dynamic menus in Web pages., DHML used events, methods, properties to insulate dynamism in HTML Pages., DHML is basically using JavaScript and style sheets in an HTML page., HTML sites will be slow upon client-side technologies, while DHTML sites will be fast enough upon client-side technologies., HTML creates a plain page without any styles and Scripts called as HTML. Whereas, DHTML creates a page with HTML, CSS, DOM and Scripts called as DHTML., HTML cannot have any server side code but DHTML may contain server side code., In HTML, there is no need for database connectivity, but DHTML may require connecting to a database as it interacts with user., HTML files are stored with .htm or .html extension, while DHTML files are stored with .dhtm extension., HTML does not require any processing from browser, while DHTML requires processing from browser which changes its look and feel., 3.Programming structure, different basic tags, Standard HTML Document Structure Format Although a number of HTML tags have been introduced that markup how text should be displayed in a browser,a correct HTML document must always include certain structural tags. These tags are<HTML>, <HEAD>, <BODY> and <TITLE>., The <HTML> tag should be placed around the document's contents; this tells the browser that the whole document is written in HTML. Like a person, all HTML documents have only one head and one body. All the text of theHTML document should be inside either the head or the body. Roughly, the <HEAD> holds information aboutthe document itself, and the <BODY> holds the information that should be displayed. The document's <TITLE>is given in the <HEAD>. The title is shown at the very top of the browser (i.e. in the title bar) — not in the browser window itself., The standard structure of an HTML document is:, <HTML>, <HEAD>, <TITLE>Text to appear in the title bar of the browser</TITLE>, </HEAD>, <BODY>, The text to appear in the main browser window., </BODY>, </HTML>, This format should always be used when writing HTML documents., Note: students are often confused about the use of the <BODY> tag, and they often include multiple body tags. This can lead to problems later on, so make sure to use only one <BODY> tag., To Do: Read the section on HTML document structure in your textbooks., Basic HTML tags, 1. Body tag :, Body tag contain some attributes such as bgcolor, background etc. Bgcolor is used for background color, which takes background color name or hexadecimal number and #FFFFFF and background attribute will take the path of the image which you can place as the background image in the browser., <body bgcolor=”#F2F3F4” background= “c:\amer\imag1.gif”>, 2. Paragraph tag:, Most text is part of a paragraph of information. Each paragraph is aligned to the left, right or center of the page by using an attribute called as align., <p align=”left” | “right” | “center”>, 3. Heading tag:, HTML is having six levels of heading that are commonly used. The largest heading tag is <h1> . The different levels of heading tag besides <h1> are <h2>,<h3>, <h4>, <h5> and <h6>. These heading tags also contain attribute called as align., <h1 align=”left” | “right” | “center”> . . . . <h2>, 4. hr tag:, This tag places a horizontal line across the system. These lines are used to break the page. This tag also contains attribute i.e., width which draws the horizontal line with the screen size of the browser. This tag does not require an end tag., <hr width=”50%”>., 5. base font:, This specify format for the basic text but not the headings., <basefont size=”10”>, 6. font tag:, This sets font size, color and relative values for a particular text., <font size=”10” color=”#f1f2f3”>, 7. bold tag:, This tag is used for implement bold effect on the text, <b> ....... </b>, 8. Italic tag:, This implements italic effects on the text., <i>.......</i>, 9. strong tag:, This tag is used to always emphasized the text, <strong>..........</strong>, 10. tt tag:, This tag is used to give typewriting effect on the text, <tt>........</tt>, 11. sub and sup tag:, These tags are used for subscript and superscript effects on the text., _.........., ^..........., 12. Break tag:, This tag is used to the break the line and start from the next line., <br>, 13. &amp &lt &gt &nbsp &quot, These are character escape sequence which are required if you want to display, characters that HTML uses as control sequences., Example: < can be represented as &lt., 14. Anchor tag:, This tag is used to link two HTML pages, this is represented by <a> <a href=” path of the file”> some text </a> href is an attribute which is used for giving the path of a file which you want to, link., Lists, straight forward index in the web site. HTML provides three types of list i.e.,, 1. unordered list,, 2. ordered list and, 3. definition list., 1. unordered list,, <ul type=”disc” | “square” | ”circle” > .....</ul>, This tag is used for basic unordered list which uses a bullet in front of each tag,every, thing between the tag is encapsulated within <li> tags., 2. ordered list,, <ol type=”1” | ”a” | “I” start=”n”>.....</ol>This tag is used for unordered list which uses a number in front of each list item or it uses any element which is mentioned in the type attribute of the <ol> tag, start attribute is used for indicating the starting number of the list., 3. definition list., <dl>..... </dl>, This tag is used for the third category i.e., definition list, where numbers or bullet is not used in front of the list item, instead it uses definition for the items., <dt>.....</dt>, This is a sub tag of the <dl> tag called as definition term, which is used for marking the items whose definition is provided in the next data definition., <dd> ....</dd>, This is a sub tag of the <dd> tag, definition of the terms are enclosed within these tags. The definition may include any text or block, •Apple, •Oranges, •Bananas, 1. Apples, 2. Oranges, 3. Bananas, The two examples above are lists. The list on the left uses bullets to mark the list elements, and is known as an unordered list. The list on the right uses numbers to mark the list elements and is known as an ordered list., HTML lists consist of a list tag and list element tags., In an unordered list, the list tag is <UL> and the list element tag is <LI>. Note that although the list element end tag </LI> was optional in previous versions of HTML, it no longer is. The list end tag </UL> is also not optional. To create an unordered list as in the above example, use the following HTML., <UL>, <LI>Apples</LI>, <LI>Oranges</LI>, <LI>Bananas</LI>, </UL>, Note that it is useful to indent the <LI> tags on the page to keep track of the level of indentation. To add more list elements, add extra list element tags <LI> </LI> containing the elements within the <UL> tags., A style attribute can be added to an unordered list, to define the style of the marker:, Style Description, list-style-type:disc The list items will be marked with bullets (default), list-style-type:circle The list items will be marked with circles, list-style-type:square The list items will be marked with squares, list-style-type:none The list items will not be marked, For example the code below would append square bullets to the list., <UL style = "list-style-type:square">, <LI>Apples</LI>, <LI>Oranges</LI>, <LI>Bananas</LI>, </UL>, Ordered lists are specified almost exactly the same as unordered lists, only the <OL> tag is used instead of the, <UL> tag. A type attribute can be added to an ordered list, to define the type of the marker:, Type Description, type="1" The list items will be numbered with numbers (default), type="A" The list items will be numbered with uppercase letters, type="a" The list items will be numbered with lowercase letters, type="I" The list items will be numbered with uppercase roman numbers, type="i" The list items will be numbered with lowercase roman numbers, For example,, <OL type = "i">, <LI>Apples</LI>, <LI>Oranges</LI>, <LI>Bananas</LI>, </OL>, The description list, is different: it has neither bullets nor numbers. The description list tag is <DL> and the list, elements consist of a term and its definition. The term is marked by <DT> tags and the definition by <DD> tags., An example use definition lists is the glossary definition that appears below., <DL>, <DT>HTML </DT>, <DD> Hypertext Markup Language; the format of Web documents </DD>, </DL>, Lists can be nested (lists inside lists). For example,, <OL type = "i">, <LI>Apples</LI>, <LI>Oranges</LI>, <LI>Bananas</LI>, <ul>, <li> small bananas </li>, <li> big bananas </li>, </ul>, </OL>, Tables:, Table is one of the most useful HTML constructs. Tables are find all over the web application. The main use of table is that they are used to structure the pieces of information and to structure the whole web page. Below are some of the tags used in table., The <table> tag defines an HTML table., Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag., By default, the text in <th> elements are bold and centered., By default, the text in <td> elements are regular and left-aligned., <table style="width:100%">,   <tr>,     <th>Firstname</th>,     <th>Lastname</th> ,     <th>Age</th>,   </tr>,   <tr>,     <td>Jill</td>,     <td>Smith</td> ,     <td>50</td>,   </tr>,   <tr>,     <td>Eve</td>,     <td>Jackson</td> ,     <td>94</td>,   </tr>, </table>, Frames:, Frames provide a pleasing interface which makes your web site easy to navigate. The frameset contains a set of references to HTML files, each of which is displayed inside a separate frame. 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 frameset element holds two or more frame elements. Each frame element holds a separate document., <!DOCTYPE html>, <html>, <head>, <title>HTML Frames</title>, </head>, <frameset rows = "10%,80%,10%">, <frame name = "top" src = "/html/top_frame.htm" />, <frame name = "main" src = "/html/main_frame.htm" />, <frame name = "bottom" src = "/html/bottom_frame.htm" />, <noframes>, <body>Your browser does not support frames.</body>, </noframes>, </frameset>, </html>, Forms:, Forms are the best way of adding interactivity of element in a web page. They are usually used to let the user to send information back to the server but can also be used to simplify navigation on complex web sites. The tags that use to implement forms are as follows., <form action=”URL” method = “post” | “get”>.......</form>, <form>,   <label for="fname">First name:</label><br>,   <input type="text" id="fname" name="fname"><br>,   <label for="lname">Last name:</label><br>,   <input type="text" id="lname" name="lname">, </form>, Cascading Style Sheets:, There is no format to follow for teaching the aesthetics of style - most people, though, can recognise something that follows a classical design. But some things can be said about the style of a website. For instance, when Web pages belong to the same website, each page should have a consistent look in order to provide familiarity for the user. Style sheets (sometimes referred to as templates) are used in desktop publishing to provide consistency when formatting text., The format applied by the stylesheet could be to indent every first line of a paragraph by 2cm, insert a page break at the end of every chapter, and so on. Naturally, due to multimedia, Web pages not only have to consider text formatting, but also visual and sound presentation, and various multimedia formats in general. Before we continue, let us briefly discuss the advantages and disadvantages of using style sheets., CSS Example, The style sheet standard supported by modern browsers is called cascading style sheets, or CSS. CSS files contain a set of rules for the formatting of HTML documents. An example is given below:, <html>, <head>, <title>UCT MSc IT Example 1 on style sheets</title>, <style>, BODY {, font-family : "times new roman;, margin-left : 20%;, margin-right: 20%;, text-align : justify;, background : ivory;, color : black;, }, P {, text-indent : 2cm;, }, </style>, </head>, A style sheet is a collection of rules that describe the format of the HTML tags. In the above example there are six Style Sheets rules describing the format of the BODY tag, and one rule for the P tag. There are two ways:, to write style sheets: the technically easier rule-based approach, and an approach that procedurally constructs a style sheet — such an approach is outside the scope of this unit, but feel welcome Below is a description of the rules used in the above example., Body - bgcolor set to "ivory", left and right margins indented relatively by 20%, font set to "Times New Roman" and text colour set to black., P to indent the first line by and absolute value of two centimeters., There are three parts to a style sheet rule, shown in the figure below:, CSS types, Local:confined to a single element (tag), Internal:affect elements in an entire page, External:can affect multiple pages, Precedence, Local > Internal > External, Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, font-family, color, … etc property of elements on a web page., There are three types of CSS which are given below:, Inline CSS, Internal or Embedded CSS, External CSS, Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute., Example:, Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file., Example:, edit, play_arrow, brightness_4, External CSS: External CSS contains separate CSS file which contains only style property, with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web pages., Example: The file given below contains CSS property. This file save with .css extension. For Ex: geeks.css, body {, background-color:powderblue;, }, .main {, text-align:center;, }, .GFG {, color:#009900;, font-size:50px;, font-weight:bold;, }, #geeks {, font-style:bold;, font-size:20px, 2.1 CSS Fonts, Generic Font Families, In CSS there are five generic font families:, Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance., Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look., Monospace fonts - here all the letters have the same fixed width. They create a mechanical look., Cursive fonts imitate human handwriting., Fantasy fonts are decorative/playful font, Difference Between Serif and Sans-serif Fonts, The CSS font-family Property, In CSS, we use the font-family property to specify the font of a text., The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma, Example, Specify some different fonts for three paragraphs:, .p1 {,   font-family: "Times New Roman", Times, serif;, }, , .p2 {,   font-family: Arial, Helvetica, sans-serif;, }, , .p3 {,   font-family: "Lucida Console", "Courier New", monospace;, }, 2.2 CSS Lists, Unordered Lists:, Coffee, Tea, Coca Cola, Coffee, Tea, Coca Cola, Ordered Lists:, Coffee, Tea, Coca Cola, Coffee, Tea, Coca Cola, HTML Lists and CSS List Properties, In HTML, there are two main types of lists:, unordered lists (<ul>) - the list items are marked with bullets, ordered lists (<ol>) - the list items are marked with numbers or letters, The CSS list properties allow you to:, Set different list item markers for ordered lists, Set different list item markers for unordered lists, Set an image as the list item marker, Add background colors to lists and list item, Different List Item Markers, The list-style-type property specifies the type of list item marker., The following example shows some of the available list item markers, ul.a {,   list-style-type: circle;, }, , ul.b {,   list-style-type: square;, }, , ol.c {,   list-style-type: upper-roman;, }, , ol.d {,   list-style-type: lower-alpha;, }, When using the shorthand property, the order of the property values are:, list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed), list-style-position (specifies whether the list-item markers should appear inside or outside the content flow), list-style-image (specifies an image as the list item marker), Styling List With Colors, We can also style lists with colors, to make them look a little more interesting., Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items, Example, ol {,   background: #ff9999;,   padding: 20px;, }, , ul {,   background: #3399ff;,   padding: 20px;, }, , ol li {,   background: #ffe5e5;,   padding: 5px;,   margin-left: 35px;, }, , ul li {,   background: #cce5ff;,   margin: 5px;, }, 2.3 CSS Text Alignment, The text-align property is used to set the horizontal alignment of a text., A text can be left or right aligned, centered, or justified., The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):, Example, h1 {,   text-align: center;, }, , h2 {,   text-align: left;, }, , h3 {,   text-align: right;, }, Text Color, The color property is used to set the color of the text. The color is specified by:, a color name - like "red", a HEX value - like "#ff0000", an RGB value - like "rgb(255,0,0)", Look at for a complete list of possible color values., The default text color for a page is defined in the body selecto, body {,   color: blue;, }, , h1 {,   color: green;, }, 2.4 CSS Box Model, All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout., The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:, Explanation of the different parts:, Content - The content of the box, where text and images appear, Padding - Clears an area around the content. The padding is transparent, Border - A border that goes around the padding and content, Margin - Clears an area outside the border. The margin is transparent, The box model allows us to add a border around elements, and to define space between elements., Example, Demonstration of the box model:, div {,   width: 300px;,   border: 15px solid green;,   padding: 50px;,   margin: 20px;, }, 3.1 <span> tag, The span is similar to the div tag. Both of them divide the content into individual sections., The difference is that span goes into a refined level so that by using span a single character is formatted if required., It is used for text-level element and not for a block-level element., There is no line feed after the </span> tag., It is used as a selector in style sheet and it includes STYLE class and ID as its attribute., It is a CSS element and used purely to apply style., It has no effect when style sheet is disabled., Definition and Usage, The <span> tag is an inline container used to mark up a part of a text, or a part of a document., The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute., The <span> tag is much like the element, but <div> is a block-level element and <span> is an inline elemen, Example, A <span> element which is used to color a part of a text:, <p>My mother has <span style="color:blue">blue</span> eyes.</p>, Example:program, <html> ,      <head> ,           <style type="text/css"> ,                .typ1 A:link{text-decoration:none} ,                .typ1 A:visited{text-decoration:none; color: red} ,                .typ1 A:hover{text-decoration:underline; color:green} ,                .typ1 A:active{text-decoration:none; color:purple} ,                .typ2 A:link{text-decoration: overline} ,                .typ2 A:visited{text-decoration:overline; color: red} ,                .typ2 A:hover{text-decoration:underline; color:green} ,                .typ2 A:active{text-decoration:overline; color:purple} ,           </style> ,      </head> ,      <body> ,           <b> LINK AREA 1</b><br> ,           <span class="typ1"> ,                <a href="color.html">welcome</a><br> ,                <a href="textcolor.html">login</a> ,           </span>,           <br><br><b> LINK AREA 2</b><br> ,           <span class="typ2"> ,                <a href="color.html">welcome</a><br> ,                <a href="textcolor.html">login</a> ,           </span> ,      </body>, </html>, 3.2<div> element, It divides the content into individual sections., <div> may contain paragraphs, headings, tables and other division also., Each section can have its own formatting., It is a block-level element which means that there can be a line feed after the</div>tag., The <div> elements useful for marking large section of a document., Definition and Usage, The <div> tag defines a division or a section in an HTML document., The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript., The <div> tag is easily styled by using the class or id attribute., Any sort of content can be put inside the <div> tag!, Note: By default, browsers always place a line break before and after the <div> element., <html> ,      <head> ,           <style type="text/css"> ,                .emb{border: double; font-variant:small-caps; border-color: green;color:red; width:250px;} ,           </style> ,      </head> ,      <body> ,           <h2>Example of div element</h2> ,           <div class="emb">The div is a block level element</div> ,      </body> , </html>