Green-Computer-Book-8

GREEN Computer Book-8 151 Introduction to Internet and E-mail 14 The concept of Internet originated in 1969 and has undergone several technological and infrastructural changes. The origin of Internet devised from the concept of Advanced Research Project Agency Network (ARPANET). ARPANET was developed by United States Department of Defense. The basic purpose of ARPANET was to provide communication among the various bodies of government. Initially, there were only four nodes, formally called Hosts. In 1972, the ARPANET spread over the globe with 23 nodes located at different countries and thus became known as Internet. By the time, with invention of new technologies such as transmission control protocol Internet protocols, DNS, WWW, browsers, scripting languages, etc., Internet provided a medium to publish and access information over the web. The Internet is a global system of interconnected computer networks that use the standard Internet protocol suit (TCP/IP) to serve billions of users worldwide. We can use it to connect people, communities, and countries around the world. It is a network of networks that consists of millions of public private, academic, business, and government networks of local to global scope. The Internet carries an extensive range of information resources and services such as the interlinked hypertext documents of the World Wide Web (WWW) and the infrastructure to support email. Weather Servers Bank & Insurance Servers Agro-universities & Research Institutions Trust & Not for Profit Organizations Farmers Super Markets Village Knowledge Centers Government Services Internet Mobile/Land line Networks Commodity Exchange

152 GREEN Computer Book-8 You can think about the Internet as a physical collection of routers and circuits as a set of shared resources or even as an attitude about interconnecting and intercommunication. Characteristics of Internet: • Internet is a global system of interconnected computers on the networks. • Internet uses the standard known as TCP/IP protocol. • Every computer in the Internet is identified by a unique IP address. • IP Address is a unique set of numbers (such as 110.22.33.114) which identifies a computer ’s location. • A special computer DNS (Domain Name Server) is used to give name to the IP Address so that a user can locate a computer by a name. • The Internet is accessible to every user all over the world. Things we need to connect Internet Modem: A modem relays information between the computer and Internet. Telephone Line: The information we send and receive over Internet travels through telephone cables. ISDN Line: ISDN stands for Integrated Services Digital Network. Information that travels through the ISDN is two to four times faster than any modem available. Many telephone companies offer ISDN lines to connect to the Internet. More to know A modem changes a computer’s digital signals into analog signals and analog signals into digital signals. Both the sending and receiving ends of communication channel must have a modem for data transmission. More to know World Wide Web was created by Timothy Berners Lee in 1989 at CERN in Geneva. World Wide Web came into existence as a proposal by him, to allow researchers to work together effectively and efficiently at CERN. Eventually it became World Wide Web.

GREEN Computer Book-8 153 Internet Service Provider : Internet service provider abbreviated as ISTP's are the companies that provide you service in terms of Internet connection to connect to the Internet. You will buy space on a Web Server from any Internet Service Provider. This space will be used to host your Web site. Web Browser: A web browser is a software application that allows you to access websites and view web pages, once you are connected to the net. Microsoft Internet Explorer and Mozilla Firefox are the commonly used web browsers. At the top of web browser is an address line. Here you can type the address of the location on the Internet that you want to visit. For example to access the National Geographic site, you can type http://www.nationalgeographic.com. Internet Based Services: Some of the basic services available to Internet users are: Email: A fast, easy, and inexpensive way to send and receive electronic mails with other Internet users around the world. Telnet: Allows a user to log into a remote computer as though it were a local system. FTP: Allows a user to transfer virtually every kind of file that can be stored on a computer from one Internet-connected computer to another. Usenet news: A distributed bulletin board that offers a combination of news and discussion service on thousands of topics. Internet Relay Chat( IRC): Allows the people from all over the world to communicate in real time.

154 GREEN Computer Book-8 Internet Telephony: Internet telephone is also known as Voice Over the Internet Protocal (VOIP). VOIP allows the Internet users to talk across the Internet to any PC equipped to receive the call. World Wide Web (WWW): WWW is the important service of the Internet. It was created in 1990 by European Particle physics Laboratory in Geneva Switzerland to exchange and share data through the Internet using a protocol known as Hypertext Transfer Protocol (HTTP). A hypertext document is a specially encoded file that uses hypertext markup language (HTML). The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge. In simple terms, the World Wide Web is a way of exchanging information between computers on the Internet, tying them together into a vast collection of interactive multimedia resources. Terms used in Internet Transmission Control Protocol / Internet Protocol (TCP/IP) TCP/IP corresponds to the Transport Layer of OSI Model. TCP is a reliable and connection oriented protocol. Internet Protocol is connectionless and unreliable protocol. In order to make it reliable, it must be paired with reliable protocol such as TCP at the transport layer. TCP offers connection oriented end-to-end packet delivery. TCP ensures reliability by sequencing bytes with a forwarding acknowledgement number that indicates to the destination the next byte the source expects to receive. Hyper Text Transfer Protocol(HTTP) HTTP specifies the protocol which the computer will use to get information from the site. This protocol is called Hyper Text Transfer Protocol. Computer protocol is a set of rules that enables computers to connect with one another to exchange and share resources. URL It means Uniform Resource Locator. URL provides the location of the browser.

GREEN Computer Book-8 155 Hyperlinks Hyperlink is a graphic or a piece of text in an Internet document that connects readers to another webpage, or another portion of a document. Web server Web server is a computer that is connected to the Internet and stores all the web sites to be available to everyone. Web pages and Home pages Web page is a collection of text, images, graphics, videos and animations arranged in a systematic way and provides the information about a subject. The very first page which we get while visiting the website is known as home page. All the links are provided from the home page to other pages. Web site A Web site is a related collection of World Wide Web (WWW) files that includes a beginning file called a home page. A company or an individual tells you how to get to their Web site by giving you the address of their home page. From the home page, you can get to all the other pages on their site. For example, the Web site for IBM has the home page address of http://www.ibm.com. (The home page address actually includes a specific file name like index.html but, as in IBM's case, when a standard default name is set up, users don't have to enter the file name.) IBM's home page address leads to thousands of pages. Email Email is a service which allows us to send a message in an electronic mode over the Internet. It offers an efficient, inexpensive and real time mean of distributing information among people. There are several popular web-mail sites such as Gmail, Yahoo! Mail and Hotmail. E-Mail Address Each user of email is assigned a unique name for the email account. This name is known as E-mail address. Different users can send and receive messages according to the e-mail address.

156 GREEN Computer Book-8 For example, [email protected] is an e-mail address where alok is a username and gmail.com is a domain name. E-mail Message Components An E-mail message comprises of different components: E-mail Header, Greeting, Text, and Signature. These components are described in the diagram alongside: E-mail Header The first five lines of an E-mail message is called E-mail header. The header part comprises of the following fields: From: The From field indicates the sender’s address i.e. who sends the e-mail. Date: The Date field indicates the date when the e-mail is sent. To: To field indicates the recipient’s address i.e. to whom the e-mail is sent. Subject: The Subject field indicates the purpose of e-mail. It should be precise and to the point. CC: CC stands for Carbon Copy. It includes those recipient addresses whom we want to keep informed but not exactly the intended recipient. BCC: BCC stands for Black Carbon Copy. It is used when we do not want one or more of the recipients to know that someone else was copied on the message. Greeting: Greeting is the opening of the actual message. Eg. Hi Sir or Hi Guys, etc. More to know You're done! To send the message, click the Send button. It will zip through the Internet to your recipients.

GREEN Computer Book-8 157 Text: It represents the actual content of the message. Signature: This is the final part of an e-mail message. It includes Name of Sender, Address, and Contact Number. To attach a file to the message, click the Attach File button on the toolbar (located just below the menu bar). Locate the file, select it, and then click Open. The file now appears in the Attach box in the message header. Reading E-mail messages To read a message, click in the message list. The contents of the message might appear below the message list in the preview pane. If so, double-click it in the message list to read the message in a separate window. Click the inbox to see your e-Mail messages To reply to a message, click the Reply button. 1. Type the email address of the receiver and the subject of your message. 2. Type your message in the Message box. 3. Click on 'Send' button. You will be displayed a message of your e-mail sent successfully.

158 GREEN Computer Book-8 E-mail Protocol Email protocol is a method by which a communication channel is established between two computers and email is transferred between them. The email server stores the mail and lets the receiving computer access it and download it if needed. Some of the email protocol are: POP3 (Post Office Protocol 3), IMAP (Internet Message Access Protocol), SMPT (Simple Mall Transfer Protocol). How to Search Your Information Internet is one of the biggest libraries in the word. It can provide any piece of information. Search engine helps you to search a piece of information. When you are looking for a site whose address you don’t know, you can search for it using a search engine. A search engine will scan through thousands of websites and web pages on the Internet and collect and organize the information it thinks is most relevant to you. It is a tool that searches documents for specific keyword, phrase, data, etc. via WWW. Some of the most popular search engines are: • Google www.google.com • Yahoo www.yahoo.com • Bing www.bing.com Steps to Search information • Open any Search Engine in a Web browser. • Type the text in the Search box that you want to search. • Press Enter Key or click on Google search button. Now you can see the related websites and contents • Choose an appropriate website or content from the list and open it. • You can open multiple websites: click right mouse button on the website or content and choose New Tab. You can type your keyword or phrase to search.

GREEN Computer Book-8 159 POINTS TO REMEMBER 1. The Internet, acronym of International network is a global system of interconnected computers that use the standard (TCP/IP) to serve billions of users worldwide. 2. E-mail, chat and other messenger services on the Internet provide us a better way of communication. 3. Search engines like Google help us to find information on our desired topic and subject. 4. Each user of email is assigned a unique name for the email account. 5. WWW is one of the most popular services on the Internet. The contents stored on World Wide Web are accessed through web browsers. 6. Web page is a collection of text, images, graphics, videos and animations arranged in a systematic way and provides the information about a subject. 7. Each web page on the Internet is accessed by means of an address; this unique address is called URL. 8. The organization which provides Internet access services locally is called ISP. 9. E-mail is the service to send and receive messages to and from our friends, relatives, colleagues and business related persons. 10. Hyperlink is a graphic or a piece of text in an Internet document that connects readers to another webpage, or another portion of a document. 11. A web browser is a software application that allows you to access websites and view web pages, once you are connected to the net. 12. If you don't want your friend of Address box to know that you have sent the same message to other friends then type his/her address in Bcc box. Exercise 1. Answer the following questions. a. What is the Internet? b. List any four major application areas of Internet. c. What is an e-mail? Write any two protocol of e-mail. d What is a web browser? Give an example. e. What are the things required to connect Internet at home?

160 GREEN Computer Book-8 2. Fill in the blanks with the correct words by choosing from the box: a. ........................... is a network of networks around the world. b. A collection of related web pages is called a........................... c. Each website has a main page called the ........................... d. ........................... and ........................... are the popular web browsers. e. The name of the person in an e-mail address is called ........................... 3. Give the full forms of: WWW, E-MAIL, BCC, POP, CC, ISP, URL, HTTP, TCP/IP, IMAP, SMTP 4. State whether the following statements are TRUE or FALSE: a. Internet connects all private, business, school, governmental computer networks into one. b. We can't get information on different topics on the Internet. c. There are more advantages of the Internet compared to disadvantages. d. Google Chrome is one of the web browsers. e. http://www.gmail.com is the name of ISP. f. Your computer may get infected with virus if you use unnecessary Internet sites. g. You cannot attach pictures and other documents to your e-mail. 5. Write technical term for the following statements. a. It is the world’s biggest library. b. It is like Google to help us to find information on our desired topic and subject. c. It is a software application that allows you to access websites and view web pages, once you are connected to the net. d. It is a service which allows us to send messages in electronic mode over the Internet. e. It provides the location of the browser. f. It is a collection of text, images, graphics, videos and animations arranged in systematic way and provides the information about a subject. 6. Write short notes: a. Website b. TCP/IP c. HTTP d. Webserver e. Hyperlink Mozila Firefox Google Chrome Index or Home page Internet Website User name

GREEN Computer Book-8 161 Hyper Text Markup Language(HTML) 15 HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages of a website. Hypertext refers to the way in which Web pages HTML documents are linked together. Thus, the links available on a webpage are called Hypertext. As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark up" a text document with tags that tell a Web browser how to structure it to display. Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language. HTML was developed by Berners-Lee, a researcher at CERN, an international scientific organization based in Geneva, Switzerland in 1990 for presenting information on the Internet. There are different versions of HTML available. HTML, HTML+, HTML 5 are some of them. Tags and Elements HTML Tags are the instructions which are used to create HTML document that can be opened by the browsers and by other agents worldwide if uploaded in WWW. They are also termed as Elements. A tag begins with a ‘<’ and ends with ‘>’ which are known as angular brackets and looks like this <tag>. These tags are not case sensitive; you can use either upper case or lower case when typing the identifier for a tag. Tag consists of three parts: • Element

162 GREEN Computer Book-8 • Attribute • Value Attributes Attributes are the additional instructions that further define the behavior of the element. They enhance the text by providing a wide range of formatting for better look and layout while opened by the browsers. A tag name is followed by the attributes with values in them. They should be enclosed within the angular brackets. Ex <BODY BGCOLOR="#FFFFAA" TEXT="black"> Tag Name Attribute Name Attribute value In this example, BGCOLOR and TEXT are the attributes of BODY element. "#FFFFAA" and "black" are the values for BGCOLOR and TEXT attribute respectively. Now, let's review some parts of the lesson that we had learnt in our previous grade. Tags are of two types. 1. Container tags These tags are also called paired tags. They include Start tag and End tag. The End tag is preceded by (/) slash sign inside the angular brackets. Example: a. <HTML> ………. </HTML> b. <BODY> ……….. </BODY>

GREEN Computer Book-8 163 2. Empty tags Empty tags are complete in themselves. They have only Start tag. For Example: <HR> for inserting a horizontal line. <BR> for a line break. The first thing you’ll notice about the code is that every html command or ‘tag’ is actually a pair of tags, an opening tag and a closing tag preceded by a forward slash. However, there are certain exceptions to this rule. Many tags also include attributes, in the form attribute = "Value" which add options to that particular tag. Tags may be either in uppercase or lowercase. Tags must also be properly nested, failing which, you will encounter unexpected problems. HTML Components Every HTML document should look basically as follows: <html> <head> <title>This is document title</title> </head> <body> <h1>This is a heading</h1> <p>Document content goes here.....</p> </body> </html> HTML Tags HTML is a markup language that makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example <html> has its closing tag </html> and <body> tag has its closing tag </body> tag etc.

164 GREEN Computer Book-8 Tag Description <html> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags. <head> This tag represents the document's header which can keep other HTML tags like <title>, <link>, etc. <title> The <title> tag is used inside the <head> tag to mention the document title. <body> This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p>, etc. <h1> This tag represents the heading. <p> This tag represents a paragraph. BODY Tag The BODY of the document contains the actual information. All the contents that are to appear in the web page should be put in between <BODY> and </ BODY> tags. There may be only one BODY statement in the document. We’ll now create a simple "Start" page in order to illustrate the fundamentals of HTML. Try typing the following codes into your HTML editor. You can simply open Notepad text editor and type the following codes of HTML. <HTML> <HEAD> <TITLE> This is first HTML Page</TITLE> </HEAD> <BODY> This is my first page see the description of body </BODY> </HTML>

GREEN Computer Book-8 165 Attributes of <BODY> tag Attributes Functions BGCOLOR = " " Changes the colour of the body background. BACKGROUND = " " Sets a picture as body background. TOPMARGIN = " " Sets the top margin of a page. BOTTOMMARGIN = " " Sets the bottom margin of a page. LEFTMARGIN = " " Sets the left margin of a page. <html> <head> <title>HTML Attributes and Colors by Nam e</title> </head> <body text="blue" bgcolor="green" background="pic1.jpg” > <p>Use different color names for body and see the result.</p> </body> </html> Where, • Background sets background image. Image file name is pic1.jpg. • Bgcolor sets background color. • Text sets text color. W3C Standard 16 Colors Here is a list of W3C Standard 16 Colors names with their hex code and it is recommended to use them. Example: Black #000000 Gray #808080 Silver#C0C0C0 White #FFFFFF Yellow #FFFF00 Lime # 00FF00 Aqua #00FFFF Fuchsia #FF00FF Red #FF0000 Green #008000 Blue #0000FF Purple #800080 Maroon #800000 Olive #808000 Navy #000080 Teal #008080

166 GREEN Computer Book-8 HTML Document Structure A typical HTML document will have the following structure: Document declaration tag <html> <head> Document header related tags </head> <body> Document body related tags </body> </html> Creating and Saving HTML Document An HTML document can be created in any plain text editor like Notepad or Textpad. After the completion of the document, you need to save it with .htm or .html as an extension after the file name. You need to use a browser to view the HTML documents. <html> <head> <title>The title is Search Engine </title>

GREEN Computer Book-8 167 </head> <body> <h1>This is a heading</h1> <p>Internet is one of the biggest libraries in the world. It can provide any piece of information. Search engine helps you to search a piece of information. When you are looking for a site whose address you don’t know, you can search for it using a search engine. A search engine will scan through thousands of websites and web pages on the Internet and collect and organize the information it thinks is most relevant to you. It is a tool that searches documents for specific keyword, phrase, data etc. via WWW.</p> </body> </html> How to view a web page: • Open the Internet Explorer or any other browser. • Click on the file menu and choose Open command. The Open dialog box appears on the screen. • Click on the browser button • Select a web page that you want to view on the browser. For example, test1.html. • Click on Open button. The open dialog box reappears with the path of the file that is to be opened. • Click on ok button.

168 GREEN Computer Book-8 • Then you can see the following webpage.

GREEN Computer Book-8 169 Viewing the Source Codes You can view the source codes of the opened web page. • Click on the view menu of the browser and select the source button. OR, • Right click on any part of the web page and select the View Source option. The source code of HTML document appears on the Notepad program. Now, you can change or modify the content and save it. Paragraph On a web page, text flows continuously across the page regardless of carriage returns or white spaces in the html code. Thus, paragraphs and line breaks need to be explicitly specified in html. The <P> tag is used to indicate the beginning of a new paragraph. It doesn't need to be closed with a </P> tag. So, it is also an empty tag. Example: This is the last line of paragraph 1. <P> This is the first line of paragraph 2 <P> The <p> tag may also be used to align the blocks of text with the align attribute, which takes the values left, center and right. Example: 1. <P ALIGN = "LEFT"> The text of the paragraph is aligned to the left. 2. <P ALIGN = "CENTER"> The text of the paragraph is aligned to the center. 3. <P ALIGN = "RIGHT"> The text of the paragraph is aligned to the right. <CENTER> TAG <CENTER> </CENTER> tag aligns all elements between the opening and closing tags in the center of the page.

170 GREEN Computer Book-8 Example: <CENTER> This text is aligned in the center. </CENTER> Line breaks Creating line breaks is an important elements that can make the words on the screen make sense and convey information more clearly. If you want a sentence to begin on a new line then you could use the line break using <BR> tag. Solved example: <HTML> <HEAD> <TITLE>Using BR</TITLE> </HEAD> <BODY> The line breaks here <BR> another line starts <BR> another <BR> another. </BODY> </HTML> In the browser the document appears as :

GREEN Computer Book-8 171 Heading Tags Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading. Example <html> <head> <title>Heading Example</title> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> This will produce the following result: This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

172 GREEN Computer Book-8 <HR> tag A horizontal rule is a dividing line placed across the page of the document. The <HR> tag is used to insert a horizontal line in a web document. Like the paragraph and the line break elements, the horizontal rule is an empty element. You can include the attributes WIDTH in percentage, ALIGN as left, center or right and SIZE in number as 1, 2, etc. Solved Example: <HTML> <HEAD> <TITLE>Horizontal Rule</TITLE> </HEAD> <BODY> A horizontal rule looks like <P> <HR size=8px color="red"> This. </BODY> </HTML> Here’s how it would look on your screen when browsed. The exact appearance of a horizontal rule is dependent on the implementation by your browser. In every browser, however, the <HR> tag will generate a separating line of some sort. If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.

GREEN Computer Book-8 173 Bold Text Anything that appears within <b>...</b> element, is displayed in bold as shown below: Example <html> <head> <title>Bold Text Example</title> </head> <body> <p>The following word uses a <b>bold</b> typeface.</p> </body> </html> This will produce the following result: The following word uses a bold typeface. Italic Text Anything that appears within <i>...</i> element is displayed in italicized as shown below: Example <html> <head> <title>Italic Text Example</title> </head> <body> <p>The following word uses a <i>italicized</i> typeface.</p> </body> </html> This will produce the following result: The following word uses a italicized typeface.

174 GREEN Computer Book-8 Underlined Text Anything that appears within <u>...</u> element, is displayed with underlined as shown below: Example <html> <head> <title>Underlined Text Example</title> </head> <body> <p>The following word uses a <u>underlined</u> typeface.</p> </body> </html> This will produce the following result: The following word uses a underlined typeface. Strike Text Anything that appears within <strike>...</strike> element is displayed with a strikethrough, which is a thin line through the text as shown below: Example <html> <head> <title>Strike Text Example</title> </head> <body> <p>The following word uses a <strike>strikethrough</strike> typeface.</ p> </body> </html> This will produce the following result: The following word uses a strikethrough typeface.

GREEN Computer Book-8 175 Superscript Text The content of a ^... element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters. Example <html> <head> <title>Superscript Text Example</title> </head> <body> <p>The following word uses a ^superscript typeface.</p> </body> </html> This will produce the following result: The following word uses a superscript typeface.

176 GREEN Computer Book-8 Subscript Text The content of a _... element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters. Example <html> <head> <title>Subscript Text Example</title> </head> <body> <p>The following word uses a _subscript typeface.</p> </body> </html> This will produce the following result: The following word uses a subscript typeface. Inserted Text Anything that appears within <ins>...</ins> element is displayed as inserted text. Example <html> <head> <title>Inserted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html> This will produce the following result: I want to drink cola wine.

GREEN Computer Book-8 177 <FONT> Tag Fonts play very important role in making a website more user-friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag. Attributes of <FONT> tag Attributes Functions FACE = " " Sets the font style of text. SIZE = " " Sets the font size of text COLOR = " " Sets the font colour of text. Set Font Size You can set content font size using the size attribute. The range of accepted values is from 1smallest to 7largest. The default size of a font is 3. Example <html> <head> <title>Setting Font Size</title> </head> <body> <font size="1">Font size="1"</font><br /> <font size="2">Font size="2"</font><br /> <font size="3">Font size="3"</font><br /> <font size="4">Font size="4"</font><br /> <font size="5">Font size="5"</font><br /> <font size="6">Font size="6"</font><br />

178 GREEN Computer Book-8 <font size="7">Font size="7"</font> </body> </html> This will produce following result: Font size="1" Font size="2" Font size="3" Font size="4" Font size="5" Font size="6" Font size="7" Relative Font Size You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size="+n"> or <font size="-n">. Example <html> <head> <title>Relative Font Size</title> </head> <body> <font size="-1">Font size="-1"</font><br /> <font size="+1">Font size="+1"</font><br /> <font size="+2">Font size="+2"</font><br /> <font size="+3">Font size="+3"</font><br /> <font size="+4">Font size="+4"</font>

GREEN Computer Book-8 179 </body> </html> This will produce following result: Font size="-1" Font size="+1" Font size="+2" Font size="+3" Font size="+4" Setting Font Face You can set font face using the face attribute but be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user's computer. Example <html> <head> <title>Font Face</title> </head> <body> <font face="Times New Rom an" size="5">Tim es New Rom an</font><br /> <font face="Verdana" size="5">Verdana</font><br /> <font face="Comic sans MS" size="5">Com ic Sans MS</font><br /> <font face="WildWest" size="5">WildWest</font><br /> <font face="Bedrock" size="5">Bedrock</font><br /> </body> </html> This will produce the following result: Times New Roman Verdana

180 GREEN Computer Book-8 Comic Sans MS WildWest Bedrock Setting Font Color You can set any font color you like using the color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color. Example <html> <head> <title>Setting Font Color</title> </head> <body> <font color="#FF00FF">This text is in pink</font><br /> <font color="red">This text is red</font> </body> </html> This will produce the following result: This text is in pink This text is red The <basefont> Element: The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings. The <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or -2 for two sizes smaller.

GREEN Computer Book-8 181 Example <html> <head> <title>Setting Base font Color</title> </head> <body> <basefont face="arial, verdana, sans-serif" size="2" color="#ff0000"> <p>This is the page's default font.</p> <h2>Example of the &lt;basefont&gt; Element</h2> <p><font size="+2" color="darkgray"> This is darkgray text with two sizes larger </font></p> <p><font face="courier" size="-1" color="#000000"> It is a courier font, a size smaller and black in color. </font></p> </body> </html> This will produce the following result: This is the page's default font. Example of the <basefont> Element This is darkgray text with two sizes larger Lists HTML has several types of lists that allow you to display groups of information in different ways. There are three separate types of lists generally used in HTML. They are: 1. Unordered List (<UL></UL>) 2. Ordered List (<OL> <OL>) 3. Description List (<DL></DL>)

182 GREEN Computer Book-8 1. Unordered List An unordered list can be termed as bulleted list. It is used for those items in which the ordering is not specific. The type of bullets "Circle", "Disc" and "Square" are used as the values for TYPE attribute of <UL> tag. The item list is defined by <LI> tag. It is used in between <UL> and </UL> tag. The type Attribute You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc. Following are the possible options: <ul type="square"> <ul type="disc"> <ul type="circle"> Example1: <HTML> <HEAD> <TITLE>UNORDERED LIST</TITLE></HEAD> <BODY> <H3>This is an unordered list</H3> <FONT size=10 face="Arial"> <UL TYPE= "circle"> <LI> unordered list element 1 <LI> unordered list element 2 <LI> unordered list element 3 </UL> </FONT> </BODY> </HTML> Example 2 Following is an example where we used <ul type="square"> <html> <head> <title>HTML Unordered List</title> </head>

GREEN Computer Book-8 183 <body> <ul type="square"> <li>Banana</li> <li>Papaya</li> <li>Apple</li> <li>Mango</li> </ul> </body> </html> This will produce the following result: • Banana • Papaya • Apple • Mango Example 3 Following is an example where we used <ul type="disc"> : <html> <head> <title>HTML Unordered List</title> </head> <body> <ul type="disc"> <li>Banana</li> <li>Papaya</li> <li>Apple</li> <li>Mango</li> </ul> </body> </html>

184 GREEN Computer Book-8 This will produce the following result: • Banana • Papaya • Apple • Mango 2. Ordered List An ordered list is also called a numbered list. The list is ordered by a numbering scheme using Arabic numbers, letters or Roman numerals. The list items are enclosed in between <OL> and </OL>. The types of numbering are "A", "a", "i", "I" and "1". The type "A" gives numbering as A, B, C, D … for the list items. The type "a" gives numbering as a, b, c, d…. to the list items. The "i" gives numbering as i, ii, iii, iv …. to the list items. The type "I" gives numbering as I, II, III, IV …. to the list items. The type "1" gives numbering as 1, 2, 3, 4 ….. to the list items. The typical syntax of a list is to have a tag for the beginning and then an <LI> or list tag, for each list element. Let’s learn to create a few lists. The type Attribute You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following are the possible options: <ol type="1"> - Default-Case Num erals. <ol type="I"> - Upper-Case Num erals. <ol type="i"> - Lower-Case Num erals. <ol type="a"> - Lower-Case Letters. <ol type="A"> - Upper-Case Letters. Solved Example1: <HTML> <HEAD> <TITLE>ORDERED LIST</TITLE></HEAD> <BODY> <u>This is an ordered list </u> <OL type="i"> <LI> ordered list element 1 <LI> ordered list element 2 <LI> ordered list element 3

GREEN Computer Book-8 185 <LI> ordered list element 3 </OL> </BODY> </HTML> Example Following is an example where we used <ol type="1"> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol type="1"> <li>Onion</li> <li>Chilly</li> <li>Potato</li> <li>Carrot</li> </ol> </body> </htm l> This will produce the following result: 1. Onion 2. Chilly 3. Potato 4. Carrot Example Following is an example where we used <ol type="I"> <html> <head>

186 GREEN Computer Book-8 <title>HTML Ordered List</title> </head> <body> <ol type="I"> <li>Onion</li> <li>Chilly</li> <li>Potato</li> <li>Carrot</li> </ol> </body> </html> Example Following is an example where we used <ol type="A"> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol type="A"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html> This will produce following result: I. Onion II. Chilly III. Potato IV. Carrot This will produce the following result: A. Beetroot B. Ginger C. Potato D. Radish

GREEN Computer Book-8 187 Example Following is an example where we used <ol type="a"> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol type="a"> <li>Onion</li> <li>Chilly</li> <li>Potato</li> <li>Carrot</li> </ol> </body> </html> The start Attribute You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options: <ol type="1" start="4"> - Numerals start with 4. <ol type="I" start="4"> - Numerals start with IV. <ol type="i" start="4"> - Numerals start with iv. <ol type="a" start="4"> - Letters start with d. <ol type="A" start="4"> - Letters start with D. Example Following is an example where we used <ol type="i" start="4" > <html> <head> <title>HTML Ordered List</title> This will produce the following result: a. Onion b. Chilly c. Potato d. Carrot

188 GREEN Computer Book-8 </head> <body> <ol type="i" start="4"> <li>Onion</li> <li>Chilly</li> <li>Potato</li> <li>Carrot</li> </ol> </body> </html> 3. Description Lists There are also description lists in which a word and their associated definitions are paired together, as in a glossary, each with its own tag. Thus each entry into a description list has two elements: the description term, which uses a <DT> tag, and the description definition, which uses a <DD> tag. Usually browsers depict the description title and the description definition on separate lines, allowing the full width of the display for the description title. A description list would look like as given below: Solved Example: <HTML> <HEAD> <TITLE>DESCRIPTION LIST</TITLE></HEAD> <BODY> <B><U>This is a Description list.</B></U> <DL> <DT> First Prize <DD> Toshiba laptop with i7 processor <DT> second Prize <DD> iphone <DT> Third Prize <DD> ipods This will produce following result: iv. Onion v. Chilly vi. Potato vii. Carrot

GREEN Computer Book-8 189 </DL> </BODY> </BODY> </HTML> Inserting Images in HTML Document In a web page images can be inserted in order to make the page more attractive and informative. Outline image and Background image are the two types of images in HTML document. The commonly used images are GIF (Graphic Interchange Format) and JPEG (Joint Photographic Expert Group). You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag. <img src="Image URL" ... attributes-list/> Attributes of <IMG> tag Attributes Functions SRC = " " Sets the path of a picture. ALIGN = " " Sets the alignment for a picture to left, right or center. BORDER = " " Sets the border of a picture. HEIGHT = " " Sets height of a picture. WIDTH = " " Sets width of a picture. ALT = " " Displays text in case image is not displayed by the user. The <img> tag is an empty tag, which means that it can contain only list of attributes and it has no closing tag.

190 GREEN Computer Book-8 Example To try following example, let's keep our HTML file testimage.html and image file pic.jpg in the same directory: <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src="/html/images/pic.jpg" alt="Test Image" /> </body> </html> You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive. The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed. Set Image Location Usually we keep all our the images in a separate directory. So let's keep HTML file test.htm in our home directory and create a subdirectory images inside the home directory where we will keep our image test.png.

GREEN Computer Book-8 191 Example Assuming our image location is "/html/image/test.png", try the following example: <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Im age Insert</p> <img src="/html/images/test.png" alt="Test Image" /> </body> </html> Set Image Width/Height You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size. Example <html> <head> <title>Set Image Width and Height</title> </head> <body> <p>Setting Image width and height</p> <img src="/html/images/test.png" alt="Test Image" width="150" height="100"/> </body> </html> Set Image Border By default image will have a border around it. You can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.

192 GREEN Computer Book-8 Example <html> <head> <title>Set Image Border</title> </head> <body> <p>Setting Image Border</p> <img src="/html/images/test.png" alt="Test Image" border="3"/> </body> </html> Set Image Alignment By default image will align at the left side of the page, but you can use align attribute to set it in the center or right. Example <html> <head> <title>Set Image Alignment</title> </head> <body> <p>Setting Image Alignment</p> <img src="/html/images/test.png" alt="Test Image" border="3" align="right"/> </body> </html> Links Links or hyperlinks are the most important part of the World Wide Web. A link is a reference, either to another part of the same document or another document signified by the <A> and </A> tags. There are three different kinds of links. 1. Links within a page (Internal links)

GREEN Computer Book-8 193 2. Links to other web pages of the same Web site (Local hyperlinks) 3. Links to pages of different Web sites (Global hyperlinks) Anchor <A> tag Anchors are text elements which act as markers in HTML file to specify the beginning and end of a hypermedia link. They have several optional values which specify either the start or destination of a link or both. Attributes of <A> tag Attributes Functions NAME = " " Specifies name of the section to be linked within the same web page. HREF = " " Specifies the path of webpage file. TITLE = " " Displays message on a link while mouse over. a. NAME If you want to jump to a specific section within a web page then you have to create an anchor with NAME attribute. It allows the anchor to be the destination of a link. NAME acts as identifier for the anchor. You can use several named anchors in one document, which allow readers to jump directly to their area of interest, in the same page. Linking Documents Following is the simple syntax to use <a> tag. <a href="Document URL" ... attributes-list>Link Text</a> Example Let's try the following example which links http://www.tutorialspoint.com at your page: <html> <head> <title>Hyperlink Exam ple</title> </head> <body> <p>Click following link</p> <a href="http://www.tourismnepal.com " target="_self">Chitwan National Park </a>

194 GREEN Computer Book-8 </body> </html> This will produce the following result, where you can click on the link generated Chitwan National Park to reach to the home page of Chitwan National Park. Click following link Chitwan National Park The target Attribute We have used target attribute in our previous examples. This attribute is used to specify the location where linked document is opened. Following are possible options: Option Description _blank Opens the linked document in a new window or tab. _self Opens the linked document in the same frame. _parent Opens the linked document in the parent frame. _top Opens the linked document in the full body of the window. targetframe Opens the linked document in a named targetframe. Try following example to understand basic difference in few options given for target attribute. Example <html> <head> <title>Hyperlink Exam ple</title> <base href="http://www.tourismnepal.com /"> </head> <body> <p>Click any of the following links</p> <a href="/html/index.htm " target="_blank"> New page</a> | <a href="/html/index.htm " target="_self">Home page</a> | <a href="/html/index.htm " target="_parent">Open in Parent</a> | <a href="/html/index.htm " target="_top">Opens in Body</a> </body> </html>

GREEN Computer Book-8 195 This will produce the following result, where you can click on different links to understand the difference between various options given for target attribute. Click any of the following links New page | Home page | Opens in Parent | Opens in Body Tables Table is the best tool for organizing data in rows and columns. In HTML a table comprises three basic elements. They are table itself, the table rows and the table columns. So, while working with tables, there are four tags you need to bear into your memory. 1. <TABLE> …………….. </TABLE> This tag is the main tag used to create a table. 2. <TH> </TH> This tag is used to define the table heading. 3. <TR> </TR> This tag is used to define a horizontal row. 4. <TD> </TD> Each row may be further divided into cells. The tag is used to define cells (or columns) in a row. The <TD> tags always appear within <TR> tags, which in turn are always sandwiched between the <TABLE> and </TABLE> tags. So let’s create a simple table with two rows and three columns:

196 GREEN Computer Book-8 Tables Backgrounds You can set table background using one of the following two ways: bgcolor attribute - You can set background color for whole table or just for one cell. background attribute - You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute. Example Try it and observe the output

GREEN Computer Book-8 197 Table Height and Width You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area. Example <html> <head> <title>HTML Table Width/Height</title> </head> <body> <table border="1" width="400" height="150"> <tr> <td>Row 1, Colum n 1</td> <td>Row 1, Colum n 2</td> </tr> <tr> <td>Row 2, Colum n 1</td> <td>Row 2, Colum n 2</td> </tr> </table> </body> </html>

198 GREEN Computer Book-8 Table Caption The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/ XHTML. Example Marquee An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down depending on the settings. This is created by using HTML <marquees> tag. Syntax A simple syntax to use HTML <marquee> tag is as follows: <marquee attribute_name="attribute_value"....more attributes> Text or image to be scrolled </marquee> The <marquee> Tag Attributes Following is the list of important attributes which can be used with <marquee> tag. Attribute Description width This specifies the width of the marquee. This can be a value like 10 or 20%, etc.

GREEN Computer Book-8 199 height This specifies the height of the marquee. This can be a value like 10 or 20%, etc. direction This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right. behavior This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and alternate. Scrolldelay This specifies how long to delay between each jump. This will have a value like 10, etc. Scrollamount This specifies the speed of marquee text. This can have a value like 10, etc. loop This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly. bgcolor This specifies background color in terms of color name or color hex value. hspace This specifies horizontal space around the marquee. This can be a value like 10 or 20%, etc. vspace This specifies vertical space around the marquee. This can be a value like 10 or 0%, etc. Observer the output of the following: Example1: <html> <head> <title>HTML marquee Tag</title> </head> <body> <marquee> I Love My Country Nepal </marquee> </body> </html

200 GREEN Computer Book-8 Example2: <html> <head> <title>HTML marquee Tag</title> </head> <body bgcolor =”yellow” > <marquee width="50%">This example will take only 50% width</marquee> </body> </html> Example3: <html> <head> <title>HTML marquee Tag</title> </head> <body> <marquee direction="right">This text will scroll from left to right</ marquee> </body> </html> Example4: <html> <head> <title>HTML marquee Tag</title> </head> <body> <marquee direction="up">This text will scroll from bottom to up</ marquee> </body> </html>