Uploaded bykumarrabinderkumar77
12 views

Designing for the Web: Mastering User-Centric Design

Designing for the Web: Mastering User-Centric Design nit 1- INTRODUCTION TO THE INTERNET Computers in Business Computer-based business applications were called Business Data Processing Systems (BDPS) and COBOL (Common Business Oriented Language) was largely used to design them. Business data was stored in the form of data files and COBOL programs were used to process the data files and generate useful reports Unit 2 - DEFINITION OF INTERNET Internet is network of network or collection of heterogeneous networks. Network is an interconnection of systems to share data and information. Unit -3 Protocol Network designers have designed several protocols now, and some of them are as follows: • Simple Mail Transfer Protocol (SMTP) • Point –to-Point Protocol (PPP) • Hyper-Text Transfer Protocol (HTTP) • Transfer Control Protocol / Internet

Technology◦
Related topics:
Web Design Insights•
Download to read offline
1 UNIT I INTRODUCTION TO THE INTERNET OBJECTIVE: To make the Students aware of the basic and fundamental concepts of Internet. Computers in Business Computer-based business applications were called Business Data Processing Systems (BDPS) and COBOL (Common Business Oriented Language) was largely used to design them. Business data was stored in the form of data files and COBOL programs were used to process the data files and generate useful reports. Later simple queries and an attractive format called Data Base Management Systems (DBMS) were used. At this stage a new technology called Graphical User Interface (GUI) was introduced. A GUI divides a program into two parts. One part is for managing the data files, and the other to design pictures and icons to get input from the user. The first part is called the back end, and the second part is called the front end. In the meantime, more sophisticated file management techniques have also been introduced which allows more than one file to be manipulated by simple commands. This type of data file is called a Relational Database. The database management system which supports relational databases and relational features is called a Relational Database Management System (RDBMS). The Next important improvement in the field of computers is the concept of networking. INTERNET The Internet is a global system of interconnected computer networks that use the standard Internet Protocol Suite (TCP/IP) (Transmission Control Protocol / Internet Protocol) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks of local to global scope, that are linked by a broad array of electronic and optical networking technologies. The Internet carries a vast range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support electronic mail. Brief History of the Internet Late 1960's to early 1970's: Department of Defence Advanced Research Projects Agency (ARPA) Network - ARPANET served as basis for early networking research as well as a central backbone during the development of the Internet. TCP/IP evolved as the standard networking protocol for exchanging data between computers on the network. Mid-To-Late 1970's: Basic services were developed that make up the Internet: Remote connectivity - File Transfer - Electronic mail 1979-80 : Usenet systems for newsgroups 1982: Internet Gopher
2 1991: Public introduction to World Wide Web (mostly text based) - In the early 1990s, the developers at CERN spread word of the Web's capabilities to scientific audiences worldwide. 1993: By September 1993, the share of Web traffic traversing the NSFNET Internet backbone reached 75 gigabytes per month or one percent. 1994: By July 1994 it was one terabyte per month. 1994 Prior to this time the WWW was not used for commercial business purposes - The Internet is one-third research and education network. Commercial communications begin to take over the majority of Internet traffic. DEFINITION OF INTERNET Internet is network of network or collection of heterogeneous networks. Network is an interconnection of systems to share data and information. What is the Internet? The Internet is a worldwide telecommunications system that provides connectivity for millions of other, smaller networks. Therefore, the Internet is often referred to as a network of networks. It allows computer users to communicate with each other across distance and computer platforms. The Internet began in 1969 as the U.S. Department of Defence's Advanced Research Project Agency (ARPA) to provide immediate communication within the Department in case of war. Computers were then installed at U.S. universities with defence related projects. As scholars began to go online, this network changed from military use to scientific use. As ARPANET grew, administration of the system became distributed to a number of organizations, including the National Science Foundation (NSF). This shift of responsibility began the transformation of the science oriented ARPANET into the commercially minded and funded Internet used by millions today. The Internet acts as a pipeline to transport electronic messages from one network to another network. At the heart of most networks is a server, a fast computer with large amounts of memory and storage space. The server controls the communication of information between the devices attached to a network, such as computers, printers, or other servers. The Internet can be defined as a network of globally connected computers that is decentralized by design. This definition can be broken down into three parts. a. Is a network A network is a collection of computers. The Internet can also be referred to as a network because it is a collection of millions of computers. b. Globally connected computers This means that it can be connected to the Internet, regardless of location. The Internet has brought people in the world closer by connecting computers located in the remotest of locations. c. Decentralized design The Internet has a decentralized design. That is, there is no centralized body that controls the way in which the Internet functions. The Internet does provide online services that are centrally administered, but as a whole, it would not be incorrect to say that the Internet has a
3 decentralized design. Each computer connected to the Internet is called a host. The operator/user of a particular host can choose from the millions of available Internet services and can also make services available through the Internet. An Internet Service Provider (ISP) allows the user access to the Internet through their server. Many teachers use a connection through a local university as their ISP because it is free. Other ISPs, such as American Online, telephone companies, or cable companies provide Internet access for their members. The Internet is a useful source of information about news, sports, and entertainment because it changes along with the minute by minute events that occur in the world. The WORLD WIDE WEB (WWW) The World Wide Web (WWW) is a collection of pages maintained on the Internet using a technique that is called Hyper-text. Hyper-Text Hyper-Text is a text of more than two dimensions. Consider any text that is typed from left to right. It has only two dimensions:  Left to right  Top to Bottom Left to right is normally considered as the x-axis and top to bottom is considered the y-axis. The terms Internet and World Wide Web are often used in every-day speech without much distinction. However, the Internet and the World Wide Web are not one and the same. The Internet is a global system of interconnected computer networks. In contrast, the Web is one of the services that run on the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs(Uniform Resource Locator). In short, the Web is an application running on the Internet. Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser, or by following a hyperlink to that page or resource.
4 The web browser then initiates a series of communication messages, behind the scenes, in order to fetch and display it. First, the server-name portion of the URL is resolved into an IP (Internet Protocol) address using the global, distributed Internet database known as the Domain Name System (DNS). This IP address is necessary to contact the Web server. The browser then requests the resource by sending an HTTP request to the Web server at that particular address. In the case of a typical web page, the HTML text of the page is requested first and parsed immediately by the web browser, which then makes additional requests for images and any other files that complete the page image. The most widely used part of the Internet is the World Wide Web (often abbreviated "WWW" or called "the Web"). Its outstanding feature is hypertext, a method of instant cross- referencing. In most Web sites, certain words or phrases appear in text of a different color than the rest; often this text is also underlined. When you select one of these words or phrases, you will be transferred to the site or page that is relevant to this word or phrase. Sometimes there are buttons, images, or portions of images that are "clickable." If you move the pointer over a spot on a Web site and the pointer changes into a hand, this indicates that you can click and be transferred to another site. While receiving these files from the web server, browsers may progressively render the page onto the screen as specified by its HTML, Cascading Style Sheets (CSS), or other page composition languages. Any images and other resources are incorporated to produce the on- screen web page that the user sees. Most web pages contain hyperlinks to other related pages and perhaps to downloadable files, source documents, definitions and other web resources. Such a collection of useful, related resources, interconnected via hypertext links is dubbed a web of information. Publication on the Internet created what Tim Berners-Lee first called the World Wide Web Connection To The Internet Through Leased Line Protocol Network designers have designed several protocols now, and some of them are as follows: • Simple Mail Transfer Protocol (SMTP) • Point –to-Point Protocol (PPP) • Hyper-Text Transfer Protocol (HTTP) • Transfer Control Protocol / Internet Protocol (TCP/IP)
5 Internet Protocol is a technical switching scheme, which enables a node of one network to communicate with a node of another network. INTERNET APPLICATIONS The Internet is treated as one of the biggest invention. It has a large number of uses. 1. Communication 2. Job searches 3. Finding books and study material 4. Health and medicine 5. Travel 6. Entertainment 7. Shopping 8. Stock market updates 9. Research 10. Business use of internet: different ways by which internet can be used for business are:  Information about the product can be provided online to the customer.  Provide market information to the business  It helps business to recruit talented people  Helps in locating suppliers of the product  Fast information regarding customers view about companies’ product  Eliminate middle men and have a direct contact with contact with customer.  Providing information to the investor by providing companies back ground and financial information on web site. BROWSERS The software used for browsing web pages is called a browser. The following are some popular browsers:  Netscape Navigator  Mosaic  Hot Java What is a Web Browser? A Web browser contains the basic software you need in order to find, retrieve, view, and send information over the Internet. This includes software that lets you: • Send and receive electronic-mail (or e-mail) messages worldwide nearly instantaneously. • Read messages from newsgroups (or forums) about thousands of topics in which users share information and opinions. • Browse the World Wide Web (or Web) where you can find a rich variety of text, graphics, and interactive information.
6 The most popular browsers are Microsoft Internet Explorer and Netscape Navigator. The appearance of a particular Web site may vary slightly depending on the browser you use. Exploring the Internet using Microsoft Internet Explorer. Start Internet Explorer by double- Clicking the icon on your desktop. WEB PAGES Web pages are what make up the World Wide Web. These documents are written in HTML (Hypertext Markup Language) and are translated by your Web browser. Web pages can either be static or dynamic. Static pages show the same content each time they are viewed. Dynamic pages have content that can change each time they are accessed. These pages are typically written in scripting languages such as PHP, Perl, ASP, or JSP. The scripts in the pages run functions on the server that return things like the date and time, and database information. All the information is returned as HTML code, so when the page gets to your browser, all the browser has to do is translate the HTML. Electronic (digital) document created with HTML and, therefore, accessible with a browser. In addition to text and graphics, web pages may also contain downloadable data files, audio and video files, and hyperlinks to other pages or sites. A website is usually a collection of web pages. A web page is a document that's created in html that shows up on the internet when you type in or go to the web page's address. Web Page A web page is a document commonly written in HyperText Markup Language (HTML) that is accessible through the Internet or other network using a browser. A web page is accessed by entering a URL address and may contain text, graphics, and hyperlinks to other web pages and files. Web pages are created using HTML which stands for HyperText Markup Language. All web pages, whether big or small, have to be developed in HTML to be displayed in web browsers. HTML, contrary to its name, is not a language. Rather, it consists of tags that specify the purpose of what they enclose. For instance, by surrounding a block of text on a web page with the <p> tag (the paragraph tag) tells the browser that all that text is to be placed as paragraph or using the <em> around a phrase will give emphasis to it.
7 Types of Web Pages Advocacy Web pages established for political candidates, called “e-campaigning,” has become an important part of politics. Surveys show that more than 50 percent of Internet users turn to the Web for information about political topics. Business/marketing Web pages used for shopping on the Internet are increasingly popular. In 1999, 17 million households shopped online. This figure is expected to grow to 49 million by 2004. A survey of back-to-school shoppers 34 years old and younger showed that 17 percent planned to shop online for their children’s school needs. Perhaps more significant, only 6 percent of surveyed shoppers reported being uncomfortable with buying on the Internet. Educational institutions frequently publish informational Web pages. Today, most colleges have web sites that offer course descriptions, information about the student population, and registration costs and deadlines. When shopping for college, surveys show that high school seniors use the Web more than catalogs or guidebooks; about 80 percent of college-bound students start looking at college Web sites as sophomores. News Web pages are the most popular Web sites among Americans with access to the Internet. Although these Web sites often are associated with newspapers, magazines, television stations, or radio stations, some are published only online, without a related print or broadcast media. Portal Web pages often offer the following free services: search engine, news, sports and weather, free personal Web pages, reference tools, shopping malls, e-mail, instant messaging, newsgroups, and chat rooms. The dictionary defines a “portal” as a door or gateway. Portal Web pages are gateways to a host of services. INTERNET CHAT On the Internet, chatting is talking to other people who are using the Internet at the same time you are. Usually, this "talking" is the exchange of typed-in messages requiring one site as the repository for the messages (or "chat site") and a group of users who take part from anywhere on the Internet. In some cases, a private chat can be arranged between two parties who meet initially in a group chat. Chats can be ongoing or scheduled for a particular time and duration. Most chats are focused on a particular topic of interest and some involve guest experts or famous people who "talk" to anyone joining the chat. Internet Chat Chats are conducted on online services (especially America Online), by bulletin board services, and by Web sites. Several Web sites, notably Talk City, exist solely for the purpose of conducting chats. Some chat sites such as Worlds Chat allow participants to assume the role or appearance of an avatar in a simulated or virtual reality environment.
8 WEBSITES Websites have many functions and can be used in various fashions; a website can be a personal website, a commercial website, a government website or a non-profit organization website. Websites can be the work of an individual, a business or other organization, and are typically dedicated to a particular topic or purpose. Any website can contain a hyperlink to any other website, so the distinction between individual sites, as perceived by the user, can be blurred. Websites are written in, or converted to, HTML (Hyper Text Markup Language) and are accessed using a software interface classified as a user agent. Web pages can be viewed or otherwise accessed from a range of computer-based and Internet-enabled devices of various sizes, including desktop computers, laptops, PDAs and cell phones. A website is hosted on a computer system known as a web server, also called an HTTP server. These terms can also refer to the software that runs on these systems which retrieves and delivers the web pages in response to requests from the website's users. ELECTRONIC MAIL What is Email? Electronic Mail is the facility of sending text-based messages and letters to any Internet user. Everybody on the Internet has his/her own unique e-mail address. Using which one can communicate with other e-mail users and that too very quickly. We can also attach picture, sound, video or document files to the e-mail. A message sent from one computer to another over the Internet. To start sending emails you will need: • A computer connected to the Internet (You can use the library computers!) • 87An email address Email (or e-mail) stands for electronic mail and is used primarily for transferring letters from one digital device to another. These digital devices can be computers, palm tops or even mobile phones. Email messages can contain text as well as pictures and other attached files. The advantages of email over traditional post are tremendous.
9 Getting an Email Address: You will need to get an email address from a company that has “mail servers”, i.e. special computers that can deliver emails to the right place. Email from your Internet Service Provider (ISP) Company: ISPs (Internet Service Providers) are companies that provide a connection to the Internet for a monthly fee. They usually include one or more email addresses in the monthly Internet connection fee. Examples of ISPs in Halifax: See the yellow pages for a complete list of ISPs under Internet-Products & Services • Aliant - (High speed Internet via the phone lines) • Chebucto Community Net (Dial-up Internet) • EastLink (High-speed cable Internet) If you have email from an ISP you will be able to check it in two ways. 1. At home: using software (e.g., Outlook) which can automatically remember your login name and password for you. 2. At the library or at home: by logging in to the company’s webmail website. You will need to remember your login name and password. Free Web-Based Email Service Providers: To sign up for a free web-based email account, go to one of these websites and look for links like “Sign up now ” or “ “Register here ” to access the registration form. • www.gmail.com • www.yahoo.com • www.hotmail.com • www.lycos.com Parts of an Email Address: johnsmith@gmail.com Sending a Message: STEP 1. Fill in the boxes: When you start to write an email message you will see a form with numerous empty boxes. Here is an explanation of what you need to type in each box. To: Type the email address(es) of the people to whom you are sending the message. When writing to more than one person put a comma between their addresses. (e.g., sam@mail.com, jen@mail.com)
10 CC: Type an email address in the “Carbon Copy ” box if you just want to “cc” someone for their information, and you don’t expect them to respond. The main recipient in the “To” box will be able to see the email addresses in the “CC” box. BCC: Type an email address to “Blind Carbon Copy” if you want someone to receive the message without the main recipient knowing. Title: Type a brief title/subject for your message. This is not mandatory but it is helpful for the recipient. Message: Type your message in the large box. SEARCH ENGINES Search engines are like the phone books for the Internet. They are special websites that allow you to find information on other websites. To demonstrate using Google, the basic procedure is the same for all search engines. General  Search Engines  Specialized Search Engines Google: www.google.ca Eluta (job postings) : www.eluta.ca Bing: www.bing.com Kids Click : www.kidsclick.com Steps for Searching:  Go to www.google.ca  Type keywords into the search box.  Press enter or click Google Search URLs URL is an acronym for Uniform Resource Locator and is a reference (an address) to a resource on the Internet. A unique resource locator (URL) is a link that is used to access a Web site on the Internet. A URL is unique to each site, and is typically based on the nature of the site. Without specifying a valid URL, users cannot access a particular site. A URL has two main components • Protocol identifier: For the URL http://example.com, the protocol identifier is http. • Resource name: For the URL http://example.com, the resource name is example.com.
11 The protocol identifier and the resource name are separated by a colon and two forward slashes. The protocol identifier indicates the name of the protocol to be used to fetch the resource. The example uses the Hypertext Transfer Protocol (HTTP), which is typically used to serve up hypertext documents. HTTP is just one of many different protocols used to access different types of resources on the net. Other protocols include File Transfer Protocol (FTP), Gopher, File, and News. The resource name is the complete address to the resource. The format of the resource name depends entirely on the protocol used, but for many protocols, including HTTP, the resource name contains one or more of the following components: Host Name: The name of the machine on which the resource lives. Filename: The pathname to the file on the machine. Port Number: The port number to which to connect (typically optional). Reference: A reference to a named anchor within a resource that usually identifies a specific location within a file (typically optional). DOMAIN NAMES A domain name is an identification string that defines a realm of administrative autonomy, authority or control within the Internet. Domain names are formed by the rules and procedures of the Domain Name System (DNS). Any name registered in the DNS is a domain name. Domain names are used in various networking contexts and application-specific naming and addressing purposes. In general, a domain name represents an Internet Protocol (IP) resource, such as a personal computer used to access the Internet, a server computer hosting a web site, or the web site itself or any other service communicated via the Internet. Domain names are also used as simple identification labels to indicate ownership or control of a resource. Such examples are the realm identifiers used in the Session Initiation Protocol (SIP), the Domain Keys used to verify DNS domains in e-mail systems, and in many others. Uniform Resource Identifiers (Uris): An important function of domain names is to provide easily recognizable and memorisable names to numerically addressed Internet resources. This abstraction allows any resource to be moved to a different physical location in the address topology of the network,
12 globally or locally in an intranet. Such a move usually requires changing the IP address of a resource and the corresponding translation of this IP address to and from its domain name. PORTAL Portal is a term, generally synonymous with gateway, for a World Wide Web site that is or proposes to be a major starting site for users when they get connected to the Web or that users tend to visit as an anchor site. There are general portals and specialized or niche portals. Some major general portals include Yahoo, Excite, Netscape, Lycos, CNET, Microsoft Network, and America Online's AOL.com. Examples of niche portals include Garden.com (for gardeners), Fool.com (for investors), and SearchNetworking.com (for network administrators). A number of large access providers offer portals to the Web for their own users. Most portals have adopted the Yahoo style of content categories with a text-intensive, faster loading page that visitors will find easy to use and to return to. Companies with portal sites have attracted much stock market investor interest because portals are viewed as able to command large audiences and numbers of advertising viewers. 1) The term portal space is used to mean the total number of major sites competing to be one of the portals. 2) In fantasy games, science-fiction, and some "New Age" philosophies, a portal is a gateway to another world of the past, present, or future, or to an expanded awareness. 3) In 3-D graphics development, portal rendering is a technique that increases the effect of realism and speeds up presentation. CONCLUSION: This Unit covers the concepts of Internet, Web Browsers, Web pages, Web Sites, E-mail, URLs and Portals. REVIEW QUESTIONS: 1. What program gets us on the Internet? 2. What website are you taken to when you first open a browser? 3. Where is the browser program located once it has opened a web page? 4. Where is the title bar located? 5. Give some examples of Protocols. 6. What is the most widely used search engine? 7. What is the expansion for W3C? 8. Write a short note on Search Engines. 9. Give a brief account of Portals 10. Discuss about Internet and WWW. 11. Explain with suitable examples the applications of Internet.
13 UNIT II CONCEPTS OF HTML OBJECTIVE To introduce the design aspects of the World Wide Web Page and HTML as HTML is the tool for designing a Web Page. History of HTML The seed for HTML, was sown by IBM in the early 1980s. They wanted to set a documentation system in which one could mark the title, heading, paragraphs and font type selections. They called it General Mark-up Language (GML). In 1986, the International Standardising Organization (ISO) took up this concept and standardized it as Standard Generalised Mark-up Language(SGML). In 1989, Tim Berners Lee and his team in the European Laboratory for Particle Physics (CERR) designed the present form of the documentation language and called it HTML. HTML Generations The oldest version of HTML is called HTML 0. This is read either as HTML Version 0 or HTML level 0. HTML 1 is an up gradation of HTML 0. It has new tags for highlighting a text and displaying images. In HTML 2, edit boxes, list boxes and buttons were introduced. In HTML 3, flexible figure handling procedures were included. It also supports mathematical equations, formulas, a banner area and has several other interesting features. It also makes table formulation easy. HTML Basics After installing an HTML editor and setting up a folder we are ready to begin creating our page. Begin by creating a file named index.htm or index. html, this will be your start page. All servers on the Internet look for an index file if no file is specified. For example, when typing http://www.computerhope.com, the server is accessing http://www.computerhope.com/index.htm. <html> <head> <title>My first web page</title> </head> <body> Your web page content goes here </body> </html> The above code is a very basic example of the code that helps make up every web page. As you can see, the section starts of with <html>, which is defining that everything within <html> is HTML code. Next, you have <head>, which is defining the heading of your HTML document. Third, we have the <title> section within <head>, which titles this page being shown. Finally, the <body> section is contains what is shown on the web page.
14 As you can see from looking at the above code, you will realize that the basic HTML commands are fairly simple to use. First, we start off with <center>; this is telling the browser to center the information within these tags. Next, the <h1> or heading one statement, which tell the browser to display the text in the largest heading. Next, the <hr> tag tells the browser to display a line straight across the screen. The third line contains <br> that creates a break on the page. Next, the <p> is short for "paragraph" and helps separate the text in the page. Next, the <b> tag is short for bold and will bold the text contained with the tag. In the next section the <ul> starts a bullet list and each bullet is represented by the <li> tag. Finally, the "a href" tag is a method of creating a link to another location. Introduction to HTML: Designing a Home Page The first page of a website is called the Home Page. The home page is like the drawing room of our house or the reception area of an office. It normally has the logo of the company, with a pleasant background, having several hot texts. The acronym for Hyper-Text Mark-up Language is HTML. It is a documentation language to mark the headings, title, tables etc. It is a universal language to design a static web page. It is machine independent and all Internet browsers accept the HTML code.  Hypertext is simply a piece of text that works as a link.  Markup Language is a way of writing layout information within documents. Basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor. Example <! DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Hyper Text Markup Language (HTML) is the primary building block of creating a website. HTML is a very basic markup language and requires memorization of a few dozen HTML commands that structure the look and layout of each of the web pages. Before writing any HTML code or designing first web page, we must decide on an HTML editor or text editor such as Notepad or WordPad.
15 HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets: <tagname>content</tagname>  HTML tags normally come in pairs like <p> and </p>  The first tag in a pair is the start tag, the second tag is the end tag  The end tag is written like the start tag, but with a slash before the tag name HTML DOCUMENT Using HTML, we can create static web pages. Every HTML, document has the following two sections: • Head • Body The head begins with the <HEAD> tag and ends with the </HEAD> tag. In the head section, the Title is the most important item. The Title begins with the <TITLE> and ends with </TITLE>. The body begins with <BODY> and ends with </BODY>. Heading can be created with tags H1, H2, ….., H6. H1 will make a big heading. H2 will make it smaller and H3 will make it still small, and so on. For Example, if we want “Bharathidasan University” to appear as a big heading, we type <h1> BHARATHIDASAN UNIVERSITY</h1> The output will be as shown below BHARATHIDASAN UNIVERSITY All HTML documents must start with a type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. Example <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> The following are some more tags. <! . . . . Comments <br> Line Break <p> Start a new paragragh <pre> </pre> Preformatted text <b> </b> Bold Face
16 <u> </u> Underline <I> </I> Italics <tt> </tt> Typewriter Font <ol> </ol> Ordered list <ul> </ul> Unordered list <li> </li> A list item Web Browsers The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document: HTML Versions Since the early days of the web, there have been many versions of HTML: Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 Viewing the Website Open the computer browser and type the location of your web page. For example, if you have placed the index.htm or index.html file within the webpage folder, you would type in the browser c:webpageindex.htm or c:webpageindex.html if you are using an IBM compatible computer. If you have Microsoft Windows or Apple, you can also double-click the web page file so it opens in a browser automatically. Displaying Images There are two methods of displaying images on your web page. The first method is linking to another website to display the images by using the below code. <img src="http://www.computerhope.com/logo.gif" alt="logo"> Using the above HTML tag you can display images of other websites, which is also called a hotlink. The alternate and recommended method would be to use the below code. <img src="mypic.gif" alt="My picture"> If the mypic.gif exists on the computer the picture is shown on your website. Adding pictures is an excellent way to spruce up the website.
17 HTML Headings HTML headings are defined with the <h1> to <h6> tags: Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> HTML Paragraphs HTML paragraphs are defined with the <p> tag: Example <p>This is a paragraph.</p> <p>This is another paragraph.</p> HTML Images HTML images are defined with the <img> tag. The source file (src), alternative text (alt), and size (width and height) are provided as attributes Example <img src="w3schools.jpg" alt="W3Schools. com" width="104" height="142"> ANCHOR TAG An anchor is a piece of text which marks the beginning and/or the end of a hypertext link. When a page is shown, some of its words may need further explanation. Such words are called hot text and they appear in a different color. When the cursor is moved to the hot text, a hand symbol appears. When we click it, another HTML file will be opened and that will have the required explanation. A hot text is created with an anchor tag <a>.The text between the opening tag and the closing tag is either the start or destination (or both) of a link. For example, if a hot text “St.Xavier’s College” is to created with an HTML document, college.html we must type <ahref=”college.html”> St.Xavier’s College</a> For example, an HTML file Xavier.Html, is shown below. It contains details about Dr.C.Xavier <html> <head> <title>Xavier</title> </head> <body> <h1>Dr.C.Xavier<h1> <hr> <br>
18 Attributes of the anchor tag are as follows HREF OPTIONAL. If the HREF attribute is present, the anchor is sensitive text: the start of a link. If the reader selects this text, (s)he should be presented with another document whose network address is defined by the value of the HREF attribute . The format of the network address is specified elsewhere. This allows for the form HREF="#identifier" to refer to another anchor in the same document. If the anchor is in another document, the attribute is a relative name, relative to the documents address (or specified base address if any). @@NOTE: This refers to the URI specification, which does not cover relative addresses. There is no specification of how to distinguish relative addresses from absolute addresses. NAME OPTIONAL. If present, the attribute NAME allows the anchor to be the destination of a link. The value of the attribute is an identifier for the anchor. Identifiers are arbitrary strings but must be unique within the HTML document. Another document can then make a reference explicitly to this anchor by putting the identifier after the address, separated by a hash sign. @@NOTE: This feature is representable in SGML as an ID attribute, if we restrict the identifiers to be SGML names. REL OPTIONAL. An attribute REL may give the relationship (s) described by the hypertext link. The value is a comma-separated list of relationship values. Values and their semantics will be registered by the HTML registration authority . The default relationship if none other is given is void. REL should not be present unless HREF is present. REV OPTIONAL. The same as REL , but the semantics of the link type are in the reverse direction. A link from A to B with REL="X" expresses the same relationship as a link from B to A with REV="X". An anchor may have both REL and REV attributes. URN OPTIONAL. If present, this specifies a uniform resource number for the document. TITLE OPTIONAL. This is informational only. If present the value of this field should equal the value of the TITLE of the document whose address is given by the HREF attribute. METHODS OPTIONAL. The value of this field is a string which if present must be a comma separated list of HTTP METHODS supported by the object for public use.All attributes are optional, although one of NAME and HREF is necessary for the anchor to be useful.
19 Example of Use: For example, if a hot text “St.Xavier’s College” is to created with an HTML document, college.html we must type <ahref=”college.html”> St.Xavier’s College</a>. For example, an HTML file Xavier.Html, is shown below. It contains details about Dr.C.Xavier <html> <head> <title>Xavier</title> </head> <body> <h1>Dr.C.Xavier<h1> <hr> <br> Dr.C.Xavier is working as a senior lecturer in computer science in <a href=”college.html”> St Xavier’s College </a> Palayamkottai. Palayamkottai and Tirunelveli are considered as twin cities of the famous <a href = ”district.html”> Tirunelveli Kattabomman </a> District. <br> </body> </html> When this file is open using an Internet browser we get the following picture. First Web Page HYPER LINKS When we click a hot text another HTML document is opened. This is how we link two texts. This is called the hyper link. If website runs into several pages, it is possible to define hyper links within the same web document itself. In this case we must define a target name as follows. <a name = comp></a> In this case an identification called COMP has been defined using the anchor tag <A>. This is called the identification of a location. In another part of the document, we can specify a hot text as follows. <A href=”#COMP”> COMPUTER SCIENCE </A> When the hot text computer science is clicked, the cursor jumps to the location with the identification COMP.
20 Example Considered the following HTML document. <html> <head> <title> <St Xavier’s College> </title> </head> <body> <h1> St Xavier’s College</h1> ……………………………………………… The <a href =”#comp”>computer science </a> is rendering commendable service to the society. ……………………………………………… <a name = comp> </a> <h4> department of computer science</h4> The department offers ……………………………………… </body> The HTML document shown above is a single document <a name=comp></a> defines an identification of the location. The hot text “computer science” is given a short-cut link to this location. The identification of the location can also be defined in the <br>tag or <h1>tag or any head or similar tags. For instance in the above example, the location identification has been defined as: <a name = comp> </a> <h4> department of computer science</h4> Instead of the above code, we can simply write: <h4 id = comp> department of computer science</h4> Similarly, we can also write it as an attribute of a break tag. <br id =comp> Example Consider the following HTML document. <head> <title> tamilnadu tourist information </title> <body> Tamilnadu has very interesting tourist spots at the following places. <ul> <li><a href=”#maha”>Mahabalipuram</a> <li><a href=”#Kodai”>Kodaikkanal</a>
21 <li><a href=”#OOty”>Ooty</a> ……………………………………………… <h4 id = maha> Mahabalipuram </h4> ……………………………………………… <h4 id = Kodai>Kodaikkanal </h4> ……………………………………………… <h4 id = OOty>Ooty </h4> ……………………………………………… </body> SAMPLE HTML DOCUMENTS <html> <head> <title> Prakash</title> <!this file was created by Mr.Prakash himself on his own multimedia Pentium computer> </head> <body> <h1>K.P.Rathina Prakasam</h1> <hr> <br> K.P.Rathina Prakasam is a businessman. He is the Managing Partner of <a href = "Nataraja stores.html">M/s Nataraja Stores </a>Palayamkottai. His firm deals with hardware and paints. The firm handles wholesale and retail sale of quality building materials including <a href = "Berger Paints.html"> Berger Paints</a> at reasonable and competitive prices to the customers. <br> </body> </html> When this document is opened in the web. It appears as shown in the following figure Nataraja Stores.html <html> <head> <title>nataraja stores</title> </head> <body> <h2>Nataraja stores</h2> <hr> <br>
22 M/s Nataraja Stores is situated at 239, Tiruchendur Road, Palayamkottai. The firm was established in the year 1982. This firm is very popular by its goodwill for reliable, good quality building materials at reasonable prices. This firm's sister concern, M / s A.M.A.A.T. Nataraja Nadar Shining Stores, Tirunelveli Junction, was established in 1947 , the year of Indian Independence. <br> </body> </html> When this document is opened in the web. It appears as shown in the following figure HEAD AND BODY SECTION HEADER SECTION Every HTML document must have a head section which begins with the tag < head> and ends with </head>. The following are some important components of the header section. • Title • Prologue • Links TITLE: The title is the heading that appears as the title of the window. It is enclosed between tags <title> and </title>. Example: <html> <head> <title>AQUATIC BIODIVERSITY CENTER</title> </head> <body> <h1>AQUATIC BIODIVERSITY CENTER</h2> <hr>
23 The Aquatic Biodiversity Centre is a research centre of the zoology department. There are five research scholars presently working in this centre. One is working on the energy utilization and interaction of multispecies of fish. The other four are working on the effect of low pH on the physiology of freshwater fishes. </body> </html> In the above document, notice that the tile has been given in the header section as <title> AQUATIC BIODIVERSITY CENTER </title> So the title appear at the top of the window Example In order to distinguish between a title and a head, the following HTML document given <html> <head> <title>AQUATIC BIODIVERSITY CENTER</title> </head> <body> The Aquatic Biodiversity Center is a research center of the zoology department. There are five research scholars presently working in this center. One is working on the energy utilization and interaction of multispecies of fish. The other four are working on the effect of low pH on the physiology of freshwater fishes. </body> </html> This is the same HTML document but the heading has been removed PROLOGUE: A prologue is only comment which can tell about the HTML version that is adopted for preparing the document. A prologue is shown as follows. < ! Doctype HTML 3.0 >
24 LINKS: The link tag can be used for the following purposes.  To inform the browser of the previous document  To inform the browser of the next document  To link the banner  To inform the location of the base document location Previous and Next The HTML document can be placed in between two old HTML documents using a link tag. Suppose we want to assign an HTML document “dept, html” as the previous document and “family.html” as the next document. We define it as follows. <HEAD> <TITLE> DR C.XAVIER </TITLE> <LINK REL = PREVIOUS HREF = “DEPT.HTML”> <LINK REL= NEXT HREF=”FAMIL.HTML”> </HEAD> If we define it in this way, whenever we open this HTML document using a browser, the back button of the the tool bar opens the document dept.html and the next button open the document family.html. <LINK REL= HOME HREF=”COLLEGE.HTML”> The above statement assigns college.html for the home button of the tool bar. Banner A banner is a fixed part of the page that will stay on the screen when we scroll the text of the page. The emblem of a college, logo of a company or the name of a company can be a banner. The banner must be prepared as a separate HTML document and it must be linked as a banner to the document. For example, suppose emblem.html is an HTML document which shows the emblem of a college. We can link it to an HTML document in the header section as follows. <HEAD> <TITLE> DR C.XAVIER </TITLE> <LINK REL = PREVIOUS HREF = “DEPT.HTML”> <LINK REL= NEXT HREF=”FAMIL.HTML”> <LINK REL= HOME HREF=”college.html”> <LINK REL= BANNER HREF=”emblem.html”> </HEAD> Base Element The base element in the head section informs the browser the location where all the base documents are available. This is similar to defining the path in a DOS operating system. Suppose we define the following in the head section <BASE HREF =”http://www.xavier.edu”>
25 Hereafter, whenever we define an anchor, we can simply give the document file name and the system will search only in the location http://www.xavier.edu COLORFUL WEB PAGE People have been appreciating anything only if it is colorful and neat. A web page can also be made colorful by using three attributes in the <body> tag. They are  Background design  Background color  Text color Background The background of the web page can be designed using any picture available in bmp format, gif format. Suppose, we specify a body of the page using a <body> tag shown as follows <body src= “acrade.bmp”> The background of the page will be tiled using the picture of “acrade.bmp” Example:1 <html> <head> <title>background testing</title> </head> <body background=" Flowers.bmp"> <h1> St Xavier's College<h1> </body> </html> The output is shown in the following figure. Example:2 <html> <head> <title>background testing</title> </head> <body background=" mm54.jpg"> <h1> St Xavier's College<h1> </body> </html>
26 Colors Any color is a combination of three basic colors, namely: • Red • Green • Blue In HTML, each of the above colors has a degree from 00 to FF in hexadecimal form. So it permits 256 degrees for each basic color (because FF in hexadecimal form is 255 in decimal form and 0 to 255 gives 256 degrees). If we assign the colors as: Red = FF(full) Green=00(empty) Blue=00(empty) Then the resulting color is red. So the color red has its color string “#FF0000”. A color string is got by the degrees of the colors red, green, and blue, preceded by the symbol. So, the color strings are #000000 #000001 #000002 ……………………… #0000FF #000100 #000200 ……………………… #00FFFF #010000 ……………………… #FFFFFF The basic colors red, green, and blue have 256 degrees each, so we can create 16,777 216 different colors strings, as 256 X 256 X 256=16,777 216. The color string is given within double quotes. Green will get the color string “#0000FF”. other colors can be got by properly mixing the three colors and choosing the color string. The following table shows the color strings for some common colors.
27 Color strings
28 Background Color The background color of the web page can be selected by assigning the color string to the bgcolor attribute of the body tag. Suppose we want our web page background color to be magenta. The color string for magenta is “#FF00FF”. so we write the <body> tag as <body bgcolor = “FF00FF”>. Text Color The color of the text in the web page can be selected by assigning a color string to the text attribute of the web page. Suppose we want our text appear in pink color. The color string for pink color is “#BE8F8F”, so we can assign for the text attribute in the <body> tag as follows. <body text = “#BE8F8F”> Link Colors In the web page hot texts (links) will appear in a different color. When we open a web page, several links may appear in a page. By clicking the hot text we will visit the linked document. In order to distinguish between the links which have been visited already (visited link “vlink”), the link which we are now visiting (active link “alink”) and those not yet visited (“link”), we can assign three different colors for the hot texts. These colors can be assigned using the attributes link, alink and vlink of the body tag. So a body tag may look like the one as follows. <body bgcolor=”#FF0000” text=”#00FF00” link=”#AAAA00” vlink=”#AA00AA” alink=”#00AAAA”> This body tag defines the following five colors: The background color is #FF0000” The text color is ”#00FF00” The link color is ”#AAAA00” The visited link color is ”#AA00AA” The active link color is ”#00AAAA” COMMENT LINES HTML programming language has the facility to include comment lines for the reference of the programmer. The comment will not appear in the web page. We include comments using the <! >. The general format is: <! Comment …..> Example <! This file was created by Mr.X himself on his own multimedia Pentium computer> <! This part of illustrates the product profile of the company> Some sample html documents In this section, some sample HTML documents are presented for reference. The outputs are also shown for immediate understanding of the HTML codes.
29 Sample 1 Consider the following HTML document <html> <head> <title>nataraja stores</title> </head> <body bgcolor=#aabb00 text=##RR00FF background=" flowers.bmp"> <h2>Nataraja stores</h2> <hr> <br> M/s Nataraja Stores is situated at 239, Tiruchendur Road, Palayamkottai. The firm was established in the year 1982. This firm is very popular by its goodwill for reliable, good quality building materials at reasonable prices. This firm's sister concern, M / s A.M.A.A.T. Nataraja Nadar Shining Stores, Tirunelveli Junction, was established in 1947 , the year of Indian Independence. <br> </body> </html> The output of this document on the web page is shown as below. A Sample Page of a Background Design Sample 2 Consider the following HTML document <html> <head> <title> Prakash</title> <! this file was created by Mr.Prakash himself on his own multimedia Pentium computer> </head> <body bgcolor=#yyff00ff text=##yy00gg> <h1>K.P.Rathina Prakasam</h1> <hr> <br>
30 K.P.Rathina Prakasam is a businessman. He is the Managing Partner of <a href = "Nataraja stores.html">M/s Nataraja Stores </a> Palayamkottai. His firm deals with hardware and paints. The firm handles wholesale and retail sale of quality building materials including <a href = "Berger Paints.html"> Berger Paints</a> at reasonable and competitive prices to the customers. <br> </body> </html> The output of the above HTML document on the web appears as shown in figure CONCLUSION This Unit covers the concepts of designing a HTML Web page, HTML Document, Anchor Tag, Head and Body Section, Title Prologue Links and Comment Lines. A large number of examples have been provided for all. REVIEW QUESTIONS: 1. Prepare a two-paragraph text about your house. In this paragraph, mention that your house has a garden, a drawing room, two bedrooms, etc. Develop an HTML document which displays these two paragraph in such a way that the world garden, drawing room, Kitchen etc. are bot texts. Prepare HTML documents “garden .html” , “drawing room.html”, etc, to describe the respective rooms. In the description, write about the attributes of the room. For example, if a television is in the drawing room, mention that in such a way that television. Figure illustrates the format for a house. 2. Develop an HTML document which displays your names as an <b1> heading and displays the name of any four of your friends. Each of your friends names must be a hot text. When you click a friend’s name, it must open another HTML document, which tells about your friend. 3. Write the names of several countries in a paragraph and store it as an HTML document, “world.html”. Each continents name must be a hot text. When you click Europe, it
31 should open a file called “Europe.html”. So prepare “Europe.html”, “America.html”, “Africa.html”, “asia.html” and “Australia.html”. Each of the HTML documents must give a brief introduction of the continent and list a few important countries in it. Each countries in must be a hot text. When you click India (for example), it must open “India.html”. 4. Write a note on color combinations and designing colors using the three basic colors. 5. Explain the prologue and its uses in HTML documents. 1. Illustrate the use of the <title> tag in HTML documents. 2. What are the uses of <meta> tags in the head section? 3. Explain the method of assigning a background design for a document. 4. What is the use of the text attribute in the <body> tag? 5. Explain the various attributes of the <body> tag. 6. Design a document describing you. Assign a suitable background design, background color 7. and a text color. 8. Write a note on banners. 9. Write a note on link attributes in the header section. 10. Explain comment Lines with examples.
32 UNIT III DESIGNING THE BODY SECTION OBJECTIVE: To describe the Designing aspects of the Body Section, Heading, Printing, Horizontal Rule, Tags and List DESIGNING THE BODY SECTION Heading Printing H is the element name that stands for "Heading". There are 6 levels of Headings being 1 the biggest and 6 the smallest Heading. Headings are block-level elements and like most other elements, a Heading is composed with an Opening Tag, the content and a Closing Tag, hence the HTML code for a level 1 Heading would look like this: Example 1 <h1> This is a H1 headline</h1> And here are all the 6 different heading levels together Example 2 <h1>H1 - the biggest headline</h1> <h2>H2 - smaller than H1</h2> <h3>H3 - smaller than H2</h3> <h4>H4 - smaller than H3</h4> <h5>H5 - smaller than H4</h5> <h6>H6 - the smallest headline</h6> Example 3 <! DOCTYPE html> <html> <head> .</head> <body> <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h1> </body> </html>
33 Comments in HTML Sometimes it´s very useful to include comments inside the HTML code which allow as keeping a better view of our document´s structure. Especially large documents can become pretty confusing when they contain a lot of different codes. Comments can be also useful to place instructions inside the HTML code of website templates in order to make it easier for a user to understand the structure of a template. Other uses for comments are to temporarily hide content from being displayed on our web pages A comment starts with "<!--" and ends with "-->" and all its content is not displayed when the document is viewed in a browser. A comment may basically contain any text and code, except " -- ". <! -- I am a comment --> ALIGNING THE HEADING Attribute for <H# ...> ALIGN = LEFT | RIGHT | CENTER | JUSTIFY ALIGN aligns the header LEFT, CENTER or RIGHT. LEFT is the default. <H1 ALIGN=LEFT>My Resume</H1> <H1 ALIGN=CENTER>My Resume</H1> <H1 ALIGN=RIGHT>My Resume</H1> produces There is a JUSTIFY value, which only applies if the text in the header is so long it must wrap to the next line. If this happens, your header is probably too long: <H1 ALIGN=JUSTIFY>Starflower’s Wild Spectacular Awesome Wonderful Bitchin' Happenin' Cool Neat-o-Keen-o Superb Thunderous Sprightly Spry Magnificent Spunky Liberated Kind- Hearted Flowery Web Page! </H1> It produces Starflower’s Wild Spectacular Awesome Wonderful Bitchin' Happenin' Cool Neat-o- Keen-o Superb Thunderous Sprightly Spry Magnificent Spunky Liberated Kind-Hearted Flowery Web Page! My Resume My Resume My Resume
34 HORIZONTAL RULE Horizontal Rule is simple lines used to divide different parts of a webpage. To create a Horizontal Rule, the stand-alone element hr is used. The simplest horizontal line is formed by "< hr >", which creates a 100% wide and 1 pixel thick line. The default color is grey, the default style "groove" and the default alignment is centered. To change thickness, alignment, width and style of the horizontal rule, you may use certain attributes inside the hr tag, such as size (for thickness in pixels), width (for the length), align (for the alignment) and noshade (for the style). These attributes may take the following values align: left / right / center size: an integer number width: integer number or percentage no shade: no values Example <hr> <hr width="500" size="15"> <hr width="50%" align="left" size="5" noshade> Escaping Special Characters There are certain characters which have special functions in HTML, for example the angle brackets "<" (the "less than" sign) and ">" (the "greater than" sign), which are used for HTML Tags, and the double quotation marks ("), which are used to delimit the values of attributes. Also, there are many special characters that cannot be easily entered on a keyboard, such as the copyright or trademark symbols (© ® ™) and those characters that cannot be expressed in the document´s character encoding, for example foreign currencies like Yen (¥) and Euro (€) or foreign letters (ç, ã, α, ω, β, δ). So if you want to use these characters inside your text, you need to "escape" (= encode) them using the so-called character entity references, or entities for short. Entities are case- sensitive and take the following form: &entity; (ampersand, entity name, and semicolon) Here are some of the most commonly used entities.
35 There are two main uses for the character entity &nbsp; (= non breaking space). As the name implies, it creates blank spaces that prevent line breaks. So if you have words in the text of your webpage that you do not want to be separated because it would negatively affect the text flow, then you would use &nbsp; between these words instead of a regular blank space. Another use is to separate single words with more than just one space. As you already know, all the white space and blank lines between single words inside your HTML code are merged together into one by the web browsers. So if you have certain places where you would like to have more white space before, behind or between words, then you could also use one or more occurrences of the &nbsp; entity. PARAGRAPHS Most of the text on your webpage will be embedded in paragraphs. For this purpose you will be using the p element. The example below shows two paragraphs. Example <p>This is a paragraph. It begins with an opening tag, .... </p> <p>There is always a blank line between two paragraphs. </p> Elements for Text Formatting From the different text formatting options you have, a few basic ones are done by using special elements. All these elements are composed with an opening tag, the content to be formatted and a closing tag. You can see the most frequently used ones in the table below, their names, their effects on text and how the HTML code for the display example looks like. The Correct Nesting of Elements Before you start experimenting with the elements above, you should learn how to correctly "nest" different elements, i.e. writing the opening and closing tags of the HTML elements in the right order when you put several ones inside another.
36 Below are two lines of HTML code. In the first line, the inline element B is correctly nested inside the block-level element P, the two inline elements STRIKE and U are correctly nested inside B and the inline element BIG is correctly nested inside U. Although the second line is invalid HTML code, most web browsers would still display it correctly as you can see in the display example. Example <p>Buy now for <b><strike>37 $</strike> <u><big>only 19.95</big></u></b></p> <p>Buy now for <strike><b>37 $</strike> <big><u>only 19.95</b></u></big></p> This is illustrated in the following figure. TABS Horizontal Tabs Permitted Context: %text Content Model: Empty! The TAB element can be used when you want fine control over the horizontal positioning. The TAB element is used with the <tab id=name> attribute to define named tab stops. Subsequently, you can use the TAB element with the <tab to=name> attribute to move to the previously defined tab stop. This approach avoids the need to know the font metrics in advance. The TAB element, together with style sheets, allows conversion software to preserve layout information when importing documents created with conventional word processing software. For example: <p><b>noct<tab id=t1>ambulant</b> - walking at night<br><tab to=t1>(from Latin: <i>nox noctis</i> night + i> ambulare </i> walk) which is rendered as: noctambulant - walking at night (from Latin: nox noctis night + ambulare walk) The tab stop name (t1 in the example) should be unique within the current document and composed from an initial letter followed by letters, digits or hyphens. Sometimes, you want to make the remainder of the line flush right while leaving the earlier words unmoved. This is possible with the align attribute. For example: Left part of line<tab align=right>and right part of line which is rendered as Left part of line and right part of line.
37 FORMATTING Formatting Characters In the web page, the characters can be made Bold, Italics, etc by using some html tag. There are two methods of formatting characters.  Logical styles  Physical styles  The logical styles inform the browser what kind of text to present. Logical Style Tags: Physical Style Format The physical style format tags explicitly inform the browser how the characters must be shown. Bold, italics etc. The physical style tags are shown in the following table. The <sub> and <sup> tags are used to represent mathematical and chemical formulae. Formula: Y =x2+y2+xasiny This can be represented in HTML as follows. Y=X<sup>2</sup>+Y<sup>2</sup>+X<sup>a siny </sup> Consider the expression Pnew = Pold+ x2 – yacosx
38 Here the HTML Code is P<sub> new</sub>= P<sub>old</sub>+x<sup>2</sup>-y<sup>acosx</sup> Font Tag The font tag is used to set a specific font size. It has two attributes namely face and size. Example <font face = Arial size =25> Welcome <font> This causes the message “Welcome” to appear in Arial Font with Size=25. In Relative size, inform the browser to increase or decrease the usual size. Suppose we write <font size=+3>Department of Computer Science <font> The heading “Department of Computer Science” appears in the size which is three more than the normal size. If the normal size is 12 points, this text will appear in 15 points. Base Font At the beginning of the document, the default font size for the entire page can be selected using the <basefont> tag. For example, consider the tag shown below <base font face= Arial size=16> This statement specifies Arial 16 points for the entire document. Notice that the <basefont> tag has no corresponding end tag such as </basefont> Preformatting Text The text without any change can be typed using the <pre> <pre> tag pair. The text or symbol between <pre> and </pre> appear as they are in the page. Special Characters Special Characters such as <, >, etc, can be included in the web page using escape codes which begin with the ampersand(&) symbol. The ampersand symbol must be followed by the mnemonic keyword for the symbol. Some mnemonic symbols are shown in the following table. Instead of mnemonic code, the ASCII code of the symbol may also be given in the HTML code.
39 IMAGES AND PICTURES The img element Example Program <!DOCTYPE html> <html> <head> . </head> <body> <img src= “ ”width=“ ”height=“ ”alt=“ ”> </body> </html> The <img> element, like most elements, is a container. It is not an image in and of itself, but a receptacle for one. Just as the p element holds a paragraph, the img element holds an image. However, it does so in a entirely different way. Most notably, the image is a separate file that loads into the space created by the img element. There are three types of image files used in HTML, indicated by different filename extensions: .jpg, .gif and .png (also known as JPEGs, GIFs and PINGs); Let's first take a look at what is used to display the image below. Note that there is no closing tag. It's one of the few elements that doesn't use them. <img src="images.jpg" class="flr" alt="Lake Atitlan, Guatemala" width="300" height="240"> The "src" or source attribute tells the browser what image (ie. image file) goes in the tag and where to find it. The "alt" attribute refers to alternative text. While the "height" and "width" are not required, they are highly recommended. The align attribute specifies the alignment of the picture. The possible alignments are shown in the following table. Picture Alignments
40 In the source attribute there are two ways to show what is known as the "path" to the image file: The "absolute path": <img src="http://www.html-5-tutorial.com/images/atitlan.jpg" ... The "relative path": <img src="images/atitlan.jpg" ... Example <img src="../images/family.jpg" alt="family picture"> <br> <img src="../images/baby.jpg" width="241" height="257" alt="baby picture" border="0"> <img src="../images/flowers.jpg" width="199" height="258" alt="flowers" border="0"> Low Resolution Images Whenever the image given in the src tag is of high resolution, the browser takes some time to load the image file. It is possible to show an image of low resolution until the high resolution image is loaded. For example, suppose elephant.gif is a high resolution image file. We can also create another image of an elephant as a low-resolution image and call the file elephantlow.gif. Now we can instruct the browser to first display the fileelephantlow.gif and then to load and display the high resolution file elephant.gif. This can be accomplished by the lowsrc attribute of the <img> tag as follows <img src=”elephant.gif” lowsrc=”elephantlow.gif”> Specifying Width and Height Although src is the only truly necessary attribute in the <img> tag, a few others come strongly recommended. The width and height attributes simply indicate the dimension of the graphic in pixels, such as: <IMG SRC="star.gif" WIDTH="50" HEIGHT="50"> With this information, the browser can lay out the page before the graphics download. Without width and height values, the page may be redrawn several times (first without graphics in place, and again each time new graphics arrive). It is worthwhile to take the time to include accurate width and height information in the image tag. Resizing images If the values specified in the width and height attributes are different than the actual dimensions of the graphic, the browser resizes the graphic to match the specified dimensions. If you specify a percentage value for width and height, some later browsers resize the image to the desired proportions.
41 Scaling an image with width and height attributes Although this effect can certainly be used strategically, as for resizing a single pixel graphic to hold a certain amount of space, it usually just results in a pixilated, poor image quality, as shown in above Figure It is better to resize images in a graphics program than to leave it up to the browser. Using width and height to preload images Preloading images refers to methods used for downloading images and storing them in cache before they actually need to be displayed on the page. One trick for preloading is to place the graphic on a page that will be accessed first (such as a home page), but with the width and height attributes set to one pixel. This causes the image to download with the rest of the page, but the only thing that will be visible is a one-pixel dot (which can be tucked away in a inconspicuous place). <IMG SRC="bigpicture.gif" WIDTH="1" HEIGHT="1"> Ideally, the image finishes downloading quietly and is stored in the browser's cache while the user is still reading the first page. The graphic should then pop into view instantly when the user links to the page where the image is displayed at its full size. Vertical Alignment The align attribute is used to control how the graphic is positioned in relation to the flow of the text. Vertical alignment controls the placement of the graphic in relation to points in the surrounding text (usually the baseline). The default alignment is bottom, which aligns the bottom of the image with the baseline of the surrounding text. The following Figure shows the result for the following code with no vertical alignment settings: <P>Star light <IMG SRC="star.gif"> Star bright.</P> Default (bottom) Alignment of Image with text The universally supported values for vertical alignment are top, middle, and bottom. Netscape Navigator introduced another (somewhat more subtle) set, which was then picked up for support in Internet Explorer 4.0. These are absbottom, absmiddle, texttop, and baseline (the same as bottom). The following Figure demonstrates the intended effects of each of these alignment values. The reality is slightly different. The absbottom value, for instance, seems to render the same as bottom, even in Navigator.
42 Vertical alignment values Horizontal Alignment The align attribute can be used to align a graphic on the left or right margin of the page by using the values left or right, respectively. What makes the left and right alignment special is that in addition to placing the graphic on a margin, it allows the text to flow around it. The following figure shows how images are displayed when set to align to the left or right. Text wraps around images when they are aligned to the left or right Right Alignment without Text Wrap Using the align=right attribute to place a graphic against the right margin automatically results in text wrapping around the graphic. If you want to move it to the right without the wrap, put the image in a paragraph (<p>), then align the paragraph to the right, as shown here: <P ALIGN="right"> <IMG SRC="leaf.gif" > </P><P>An Oak and a Reed were arguing...</P> Adding Space Around Aligned Images When text flows around a graphic, it tends to bump up against the graphic's edge. Usually, it is preferable to have a little space between the graphic and the surrounding text. In HTML, this space is provided by using the vspace and hspace attributes within the <img> tag.
43 The vspace (vertical space) attribute holds a specified number of pixels space above and below an aligned graphic. Space to the left and the right is added with hspace (horizontal space). Note that space is always added symmetrically (both top and bottom, or on both sides), and it is not possible with these attributes to specify an amount of space along a particular side of the graphic (you can, however, do this with style sheets). The following figure shows an image aligned with the hspace attribute set to 12. Image alignment with horizontal spacing Stopping Text Wrap Text automatically wraps to fill the space along the side of an aligned graphic (or other inline object). To stop the text from wrapping and start the next line against the margin (instead of against the image), insert a line break tag (<br>) with the clear attribute. The clear attribute gives the browser directions on where to place the new line. It has three possible values: left , right, and all. If your graphic is aligned right, insert <br clear=right> to begin the text below the graphic against the right margin. For left-aligned graphics, use <br clear=left>. The <br clear=all> tag starts the text below the graphics on both margins (see Figure below ), so it may be the only value you'll ever need. Border for an Image To change the appearance of image borders, you need to use CSS (Cascading Style Sheets). You can include CSS in your images using the style attribute of the HTML img tag. You can use the HTML code on this page to determine image borders within your HTML document. Below are some examples of what you can do with HTML image borders. Solid Border img style="max-width:95%;border:3px solid black;" src="http:// www.quackit. com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href="/html/ tags/html_img_tag.cfm" > HTML <code> &lt;img&gt;</code> Tag</a>, <a ref="/ html/ tutorial/ html_ images.cfm" >HTML Images</a>, <a href= "/css / properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>
44 Dotted Border <img style="max-width:95%;border:2px dotted #545565;" src = "http://www. quackit.com/pix/ milford_ sound/milford_ sound_t.jpg" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href= "/html/ tags/html_img_ tag.cfm"> HTML <code> &lt;img&gt; </code> Tag</a>, <a href="/html /tutorial/html_images.cfm"> HTML Images</a>,<ahref="/css/ properties/css_ border.cfm ">CSS <code>border</code> Property</a>.</div> Grooved Border <img style="max-width:95%;border:6px groove #545565;" src="http:// www.quackit. com /pix/ milford_sound/ milford_sound _ t.jpg"alt ="Milford Sound in NewZealand" /> Double Border <img style="max-width:95%;border:6px double #545565;" src="http: //www. quackit.com /pix/ milford_sound /milford _sound_t.jpg" alt="Milford Sound in New Zealand" /> Ridged Border <img style="max-width:95%;border:6px ridge #545565;" src="http:// www.quackit.com / pix/milford_sound /milford_sound_t.jpg" alt="Milford Sound in New Zealand" />
45 Dashed Border <img style="max-width:95%;border:6px dashed #545565;" src="http:// www.quackit.com/pix /milford_sound/ milford_sound_t.jpg" alt="Milford Sound in New Zealand" /> LISTS AND THEIR TYPES Introduction Lists are another nice formatting tool for the content of our webpage. Definition Lists A definition list is usually used to create glossaries and has a little bit more complex structure than the two lists above. The basic code for a definition list is formed with the element DL and at least one element pair DT and DD. DT stands for Definition Term and contains the term to be explained and DD stands for Definition Definition and contains the definitio0n of the term. The content of DD is displayed indented relatively to the content of DT. DT may contain only text and inline elements such as B, I, U, SPAN, STRIKE. It may NOT contain block-level elements such as P and H1. DD may contain text, inline elements and may also contain block-level elements like P, H1, H2, OL, DL, TABLE. This allows for definition lists to be complexly nested, but don´t bother about this now as you probably won´t have a use for nested definition lists anyway. Here´s the basic code for a definition list. <dl> <dt> </dt> <dd> </dd> </dl> If a term has more than one definitions, you can also use more DD elements after he DT element, one for each separate definition: <dl> <dt> </dt> <dd> </dd> <dd> </dd> </dl>
46 The most commonly used list types are:  Unordered list - used to group a set of related items, in no particular order.  Ordered list - used to group a set of related items, in a specific order.  Description list - used to display name/value pairs such as terms and their definitions, or times and events. Each one has a specific purpose and earning they are not interchangeable. Unordered Lists Unordered lists, or bulleted lists, are used when a set of items can be placed in any order. An example is a shopping list:  milk  bread  butter  coffee beans These items are all part of one list, however, you could put the items in any order and the list would still make sense:  bread  coffee beans  milk  butter You can use CSS to change the bullet to one of several default styles, use your own image, or even display the list without bullets—we’ll look at how to do that in the Styling lists and links article. Unordered List Markup Unordered lists use one set of <ul></ul> tags, wrapped around many sets of <li> </li>:<code><ul> <li>bread</li> <li>coffee beans</li> <li>milk</li> <li>butter</li> </ul></code> Ordered Lists Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order. An example would be cooking instructions, which must be completed in order for the recipe to work: 1. Gather ingredients 2. Mix ingredients together 3. Place ingredients in a baking dish
47 4. Bake in oven for an hour 5. Remove from oven 6. Allow to stand for ten minutes 7. Serve If the list items were moved around into a different order, the information would no longer make sense: 1. Gather ingredients 2. Bake in oven for an hour 3. Serve 4. Remove from oven 5. Place ingredients in a baking dish 6. Allow to stand for ten minutes 7. Mix ingredients together Ordered lists can be displayed with one of several numbering or alphabetic systems—that is, letters or numbers. The default in most browsers is decimal numbers, but there are more options: Letters  Lowercase ascii letters (a, b, c…)  Uppercase ascii letters (A, B, C…).  Lowercase classical Greek: (έ, ή, ί…) Numbers  Decimal numbers (1, 2, 3…)  Decimal numbers with leading zeros (01, 02, 03…)  Lowercase Roman numerals (i, ii, iii…)  Uppercase Roman numerals (I, II, III…)  Traditional Georgian numbering (an, ban, gan…)  Traditional Armenian numbering (mek, yerku, yerek…) Again, you can use CSS to change the style of your ordered lists. Ordered List Markup Ordered lists use one set of <ol></ol> tags, wrapped around many sets of <li></li>: <code><ol> <li>Gather ingredients</li> <li>Mix ingredients together</li> <li>Place ingredients in a baking dish</li> <li>Bake in oven for an hour</li> <li>Remove from oven</li> <li>Allow to stand for ten minutes</li> <li>Serve</li> </ol></code>
48 Unordered Lists (Bullet Lists) An unordered list is formed with the element UL and contains at least one list element LI. So the very basic form of an unordered list would be. <ul> <li> </li> </ul> Here´s an example for an unordered list with some content. Example <p><b>1stPage2000</b> is my favorite free HTML editor. It makes creating webpages easy and fast because ...</p> <ul> <li>it uses different colors for different HTML elements so one gets a better view over a document´s structure.</li> <li>it has hotkeys for the quick insertion of tags.</li> <li>I can use pre-written HTML code snippets.</li> <li>it has a great, comprehensive HTML reference.</li> <li>it has many wizards for the speedy inclusion of tables, images, lists, links and other elements.</li> </ul> Ordered Lists (Bullet Lists) An ordered list is built with the element OL and also at least one list element LI. So the basic code for an ordered list looks like this: <ol> <li> </li> </ol> As said already, an ordered list uses ordinal numbers instead of bullets before each list item. Below is an example for an ordered list. <h1>Native American Ten Commandments</h1> <p> ( author unknown ) </p> <ol> <li>Treat the Earth and all that dwell thereon with respect.</li> <li>Remain close to the Great Spirit.</li> <li>Consider the impact on the next six generations when making decisions.</li> <li>Work together to benefit all humanity.</li> <li>Freely give help and kindness wherever needed.</li> etc ...</ol> Type Attributes Instead of numerals, we can have letters A, B, C…. or a, b, c…. etc, or roman letters in the ordering of the listed items. This is specified by the type attribute in the <OL> tag. The following are the symbols used the type attribute.
49 Heading in a List It is possible to introduce Intermediate Heading using the <LH> tag of HTML. For example, consider the following text Bharathidasan University offers the following courses: Regular Courses • Mathematics • Bio Medical Sciences • Commerce Distance Education Courses • B.Sc Computer Science • M.Sc Computer Science • B.C.A • M.C.A In the above text regular courses and Distance Education Courses are called a Listed Headings. So the HTML code can be written as Bharathidasan University offers the following courses. <UL> <LH> Regular Courses<br><br> <LI> Mathematics <LI> Bio Medical Sciences <LI> Commerce <br><br> <LH> Distance Education Courses <LI> B.Sc Computer Science <LI> M.Sc Computer Science <LI> B.C.A <LI> M.C.A <br><br> </UL> NESTED LISTS A list item can contain another entire list — this is known as "nesting" a list. It is useful for things like tables of contents, such as the one at the start of this article: 1. Chapter One  Section One  Section Two  Section Three
50 2. Chapter Two 3. Chapter Three The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks something like this: <code><ol> <li>Chapter One <ol> <li>Section One</li> <li>Section Two </li> <li>Section Three </li> </ol> </li> <li>Chapter Two</li> <li>Chapter Three </li> </ol></code> Note how the nested list starts after the <li> and the text of the containing list item (“Chapter One”); then ends before the </li> of the containing list item. Nested lists often form the basis for website navigation menus, as they are a good way to define the hierarchical structure of the website. Theoretically you can nest as many lists as you like, although in practice it can become confusing to nest lists too deeply. For very large lists, you may be better off splitting the content up into several lists with headings instead, or even splitting it up into separate pages. CONCLUSION: In this unit, the concepts of designing the body section and the detailed techniques have been explained with suitable examples. REVIEW QUESTIONS: 1. How do you align headings? What are the four types of alignments? Give examples. 2. Explain about horizontal rule. 3. What are the physical style tags? Tabulate them. 4. What are the logical Style Tag? Tabulate them. 5. Explain in detail about font tag. 6. List out the special characters which can be included in the web page. 7. Discuss about the concept of picture alignments. 8. How do you have border for an image. Explain with example. 9. What is List? What are the types? 10. How do you have heading in the List? 11. Specify about type attribute. Give a detailed account of nested lists. 12. Develop an HTML document to print the following
51 SPECIAL FEATURES OF SOLAR HEATER SCHEME • System guaranteed for 2 years. • 100% depreciation allowed for tax payers. • Capital investment paid back within 3-4 years with cumulative energy savings. • Negligible maintenance requirement. • Soft loan facilities available from IREDA, IDBI and from nationalized banks. • Long life of the system (15-20 years) results in enormous life-time energy savings. • Non-polluting and non-depletable energy sources. 13. Write an HTML document to print the following. The family has the following facilities. 1. Own house  2400 square feet living area  Separate bungalow  Car shed available 2. Car  Maruti Omni van  Registration number TN 728195  1994 model 3. Farm  Coconut groves  35 acres  Mango groves 15.Write an HTML document to print the following. The library has the following cassettes. 1.Cinema • Bombay • I love you • Crazy Crazy • The Sun 2. Educational • Mathematics 1) Part I. Analytical Geometry 2) Part II. Calculus 3) Part III. Trigonometry 3. Cultural • Classical Music 1) M.S. Subalakshmi 2) Sreenivasa Iyengar 3) Yesudas 4) Thiagaraja Bhagavathar • Classical Dances 1) Bharata Natyam 2) Kuchupudi 3) Bhangra
52 UNIT-IV TABLES AND FORMS OBJECTIVE: This unit introduces concepts of forms which provide the means to collect information from web clients. It also deals with frames which provide a way to divide the browser window in to smaller rectangles each of which can display a different document. The last section in this unit discusses about forms. TABLES Tables are common fixtures in printed documents, books, and, of course, Web documents. Tables provide a highly effective way of presenting many kinds of information. Table is an excellent way of presenting information, especially when a company wants to cite various prices for its services or products. For instance, some websites require users to sign up different levels of membership in order to access certain exclusive contents. They can present to users the distinct features that each level has to offer in a table-like format. Depending on the content, tables can be good for arranging many other kinds of data for deeper clarity other than pricing. Creating a table is easy, but organizing data in an easy-to-understand tabular format together with an appealing layout is often challenging. Most of us have came across numerous tables on the net, and some of these can be rather plain-looking ones with no or minimal design whatever. A table is a matrix of cells. The cells in the top row often contain column labels, those in the leftmost column often contain row labels, and most of the rest of the cells contain the data of the table. The content of a cell can be almost any document element, including text, a heading, a horizontal rule, an image, and a nested table. Components of Table:  Table caption  Table heading row  Rows and columns Example:
53 Basic Table Tags A table is specified as the content of the block tag <table> There are two kinds of lines in tables: the line around the outside of the whole table is called the border; the lines that separate the cells from each other are called ruler. A table that does not include the border attribute will be a matrix of cells with neither a border nor rules. The browser has default widths for table borders and rules, which are used if the border attribute is assigned the value "border". Otherwise, a number can be given as border’s value, which specifies the border width in pixels. For example, border = "3" specifies a border 3 pixels wide. A border value of "0" specifies no border and no rules. The rules are set at 1 pixel when any nonzero border value is specified. All table borders are beveled to give a three-dimensional appearance, although this is ineffective when narrow border widths are used. The border attribute is the most common attribute for the <table> tag. In most cases, a displayed table is preceded by a title, given as the content of a <caption> tag, which can immediately follow the opening <table>tag. The cells of a table are specified one row at a time. Each row of a table is specified with a row tag,<tr> . Within each row, the row label is specified by the table heading tag<th>. Although the <th>tag has heading in its name, we call these tags labels to avoid confusion with headings created with the <hx>tags. Each data cell of a row is specified with a table data tag,<td>. The first row of a table usually has the table’s column labels. For example, if a table has three data columns and their column labels are, respectively, Apple, Orange, and Screwdriver, the first row can be specified by the following: <tr> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr> Each data row of a table is specified with a heading tag and one data tag for each data column. For example, the first data row for our work-in-progress table might be as follows: <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> <td> 0 </td> </tr> In tables that have both row and column labels, the upper-left corner cell is often empty. This empty cell is specified with a table header tag that includes no content (either <th></th> or just <th />). The following document describes the whole table:
54 Output The rowspan and colspan Attributes In many cases, tables have multiple levels of row or column labels in which one label covers two or more secondary labels. For example, consider the display of a partial table shown in below Figure. In this table, the upper-level label Fruit Juice Drinks spans the three lower-level label cells. Multiple-level labels can be specified with the rowspan and colspan attributes. Two levels of column labels The colspan attribute specification in a table header or table data tag tells the browser to make the cell as wide as the specified number of rows below it in the table. For the previous example, the following markup could be used: <tr> <th colspan = "3"> Fruit Juice Drinks </th> </tr> <tr> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr>
55 If there are fewer cells in the rows above or below the spanning cell than the colspan attribute specifies, the browser stretches the spanning cell over the number of cells that populate the column in the table. The rowspan attribute of the table heading and table data tags does for rows what colspan does for columns. A table that has two levels of column labels and also has row labels must have an empty upper-left corner cell that spans both the multiple rows of column labels and the multiple columns. Such a cell is specified by including both rowspan and colspan attributes. Consider the following table specification, which is a minor modification of the previous table: The above Figure shows a browser display of cell_span.html. The above Figure Display of cell_span.html: multiple-labeled columns and labeled rows. The align and valign Attributes The placement of the content within a table cell can be specified with the align and valign attributes in the <tr>, <th>, and <td> tags. The align attribute has the possible values left, right, and center, with the obvious meanings for horizontal placement of the content within a cell. The default alignment for th cells is center; for td cells, it is left. If align is specified in a <tr> tag, it applies to all of the cells in the row. If it is included in a <th> or <td> tag, it applies only to that cell. The valign attribute of the <th> and <td> tags has the possible values top and bottom. The default vertical alignment for both headings and data is center. Because valign applies only to a single cell, there is never any point in specifying center. The following example illustrates the align and valign attributes: The above figure shows a browser display of cell_align.html. The above figure shows Display of cell_align.html: the align and valign attributes.
56 The Cell padding and Cell spacing Attributes The table tag has two attributes that can respectively be used to specify the spacing between the content of a table cell and the cell’s edge and the spacing between adjacent cells. The cellpadding attribute is used to specify the spacing between the content of a cell and the inner walls of the cell—often, to prevent text in a cell from being too close to the edge of the cell. The cellspacing attribute is used to specify the distance between cells in a table. The following document, space_pad.html, illustrates the cellpadding and cellspacing attributes: The above figure shows a browser display of space_pad.html. The above figure shows Display of space_ pad. html Table Sections Tables naturally occur in two and sometimes three parts: header, body, and footer. (Not all tables have a natural footer.) These three parts can be respectively denoted in XHTML with the thead, tbody, and tfoot elements. The header includes the column labels, regardless of the number of levels in those labels. The body includes the data of the table, including the row labels. The footer, when it appears, sometimes has the column labels repeated after the body. In some tables, the footer contains totals for the columns of data above. A table can have multiple
57 body sections, in which case the browser may delimit them with horizontal lines that are thicker than the rule lines within a body section. Colouring Cells Each cell can be assigned a background color using the bgcolor attribute. For example if we want a particular cell to have a red background color, the <td> tag must be given as follows. <td bgcolor= “#ff0000”> Consider the table shown in the below. It has three columns. If we want the first column to be red in color, the second in green and the third in blue, we must type the HTML document as follows. <table border=5 width=80%> <caption> Admission 1997-98</caption> <tr> <th bgcolor=#ff0000 align=center> Community <th bgcolor=#00ff00 align=right> Male <th bgcolor=#00ff00 align=right> Female <tr><td bgcolor=#ff0000 align=center> OC <td bgcolor=#00ff00 align= center >35 <td bgcolor=#0000ff align= center >15 <tr><td bgcolor=#ff0000 align=center> BC <td bgcolor=#00ff00 align= center >50 <td bgcolor=#0000ff align= center >45 <tr><td bgcolor=#ff0000 align=center> SC/ST <td bgcolor=#00ff00 align= center >65 <td bgcolor=#0000ff align= center >12 </table> FORMS The most common way for a user to communicate information from a Web browser to the server is through a form. Modeled on the paper forms that people frequently are required to fill out, forms can be described in XHTML and displayed by the browser. XHTML provides tags to generate the commonly used objects on a screen form. These objects are called controls or widgets. There are controls for single-line and multiple-line text collection, checkboxes, radio buttons, and menus, among others. All control tags are inline tags. Most controls are used to gather information from the user in the form of either text or button selections. Each control can have a value, usually given through user input. Together, the values of all of the controls (that have values) in a form are called the form data.
58 The <form> Tag All of the controls of a form appear in the content of a <form> tag. A block tag, <form>, can have several different attributes, only one of which, action, is required. The action attribute specifies the URL of the application on the Web server that is to be called when the user clicks the Submit button. The method attribute of <form> specifies one of the two techniques, get or post, used to pass the form data to the server. The default is get, so if no method attribute is given in the <form> tag, get will be used. The alternative technique is post. In both techniques, the form data is coded into a text string when the user clicks the Submit button. When the get method is used, the browser attaches the query string to the URL of the HTTP request, so the form data is transmitted to the server together with the URL. The browser inserts a question mark at the end of the actual URL just before the first character of the query string so that the server can easily find the beginning of the query string. The get method can also be used to pass parameters to the server when forms are not involved. (This cannot be done with post.) One disadvantage of the get method is that some servers place a limit on the length of the URL string and truncate any characters past the limit. So, if the form has more than a few controls, get is not a good choice. When the post method is used, the query string is passed by some other method to the form-processing program. There is no length limitation for the query string with the post method, so, obviously, it is the better choice when there are more than a few controls in the form. There are also some security concerns with get that are not a problem with post. The <input> Tag Many of the commonly used controls are specified with the inline tag <input>, including those for text, passwords, checkboxes, radio buttons, and the action buttons Reset, Submit, and plain. The one attribute of <input> that is required for all of the controls discussed in this section is type, which specifies the particular kind of control. The control’s kind is its type name, such as checkbox. All of the previously listed controls except Reset and Submit also require a name attribute, which becomes the name of the value of the control within the form data. The controls for checkboxes and radio buttons require a value attribute, which initializes the value of the control. The values of these controls are placed in the form data that is sent to the server when the Submit button is clicked. A text control, which we usually refer to as a text box, creates a horizontal box into which the user can type text. Text boxes are often used to gather information from the user, such as the user’s name and address. The default size of a text box is often 20 characters. Because the default size can vary among browsers, it is a good idea to include a size on each text box. This is done with the size attribute of <input>. If the user types more characters than will fit in the box, the box is scrolled. If you do not want the box to be scrolled, you can include the maxlength attribute to specify the maximum number of characters that the browser will accept in the box. Any additional characters are ignored. As an example of a text box, consider the following: <form action = ""> <p> <input type = "text" name = "Name" size = "25" /> </p> </form> Suppose the user typed the following line:
59 Alfred Paul von Frickenburger The text box would collect the whole string, but the string would be scrolled to the right, leaving the following shown in the box: ed Paul von Frickenburger The left end of the line would be part of the value of Name, even though it does not appear in the box. The ends of the line can be viewed in the box by moving the cursor off the ends of the box. Notice that controls cannot appear directly in the form content—they must be placed in some block container, such as a paragraph. This is because <input> is an inline tag. Now consider a similar text box that includes a maxlength attribute: <form action = ""> <p> <input type = "text" name = "Name" size = "25" maxlength = "25" /> </p> </form> If the user typed the same name as in the previous example, the resulting value of the Name text box would be as follows: Alfred Paul von Frickenbu No matter what was typed after the u in that person’s last name, the value of Name would be as shown. If the contents of a text box should not be displayed when they are entered by the user, a password control can be used as follows: <input type = "password" name = "myPassword" size = "10" maxlength = "10" /> In this case, regardless of what characters are typed into the password control, only bullets or asterisks are displayed by the browser. There are no restrictions on the characters that can be typed into a text box. So, the string "?!34,:" could be entered into a text box meant for names. Therefore, the entered contents of text boxes nearly always must be validated, either on the browser or on the server to which the form data is passed for processing, or on both. Text boxes, as well as most other control elements, should be labeled. Labeling could be done simply by inserting text into the appropriate places in the form: Phone: <input type = "text" name = "phone" /> This markup effectively labels the text box, but there are several ways the labeling could be better. For one thing, there is no connection between the label and the control. Therefore, they could become separated in maintenance changes to the document. A control and its label can be connected by putting the control and its label in the content of a label element, as in the following element: <label> Phone: <input type = "text" name = "phone" /> </label> Now the text box and its label are encapsulated together. There are several other benefits of this approach to labeling controls. First, browsers often render the text content of a label element differently to make it stand out. Second, if the text content of a label element is selected, the cursor is implicitly moved to the control in the content of the label. This feature is an aid to new Web users.
60 Third, the text content of a label element can be rendered by a speech synthesizer on the client machine when the content of the label element is selected. This feature can be a great aid to a user with a visual disability. FRAMES Frameset Definition A set of frames in defined using the <frameset> tag which ends with the </frameset> tag. The <frameset> tag has two attributes.  Row or column frame  Size of each frame We must use the cols attribute. We must use the rows attribute. The sizes of the frames are mentioned in any one of the following units:  Pixel  Percentage  Fraction Pixel unit The pixel unit simply represents the number of pixels in each frame. Commas must separate the numbers. for example, consider the following: <frameset cols=”150,70,70”> ………… ………… </frameset> This definition creates three column-wise frames, with the first frame of 150 pixels width, the second of 70 pixels width. Percentage unit The percentage unit divides the window according to the specified percentages. For example, consider the frameset definition: <frameset rows=”70%,30%”> ………… </frameset> In the above definition,two row-wise frames are defined in the container.The first frame has 70 per cent of the container and the second one has 30 per cent of the container. If the total percentages is greater than 100,all percentages are scaled down. If the sum of the percentages is less than 100, the extra spaces are left out. Fraction unit Instead of using pixel of percentage units, we can use fraction units to represent the relative sizes of the frames. suppose we give the following. <frameset cols=”4*,4*,*,*”>
61 ………… </frameset> Frame Definition The definition of the frame is given using the<frame>tag.The<frame> tag may have any of the following attributes:  Source HTML address(SRC)  Name of the frame(NAME)  Margin width(MARGINWIDTH)  Scrolling button(SCROLLING)  Whether it can be resized Source HTML Address(SRC) The SRC attributes specifies the URL of the HTML document to be displayed in this frame. The URL is given in double quotes. Name of the frame (NAME) A frame is given a name to identify it when specifying the target of html documents.The name of the frame begins with an alphabetic letter.NAME=”contents” defines the name of this frame. Margin The MARGINWIDTH and MARGINHIGHT attributes specify the left,right,top and bottom margins to be maintained in the frame. The margins are maintained in number of pixels. Scrolling The scrolling attribute is used to describe whether the frame should base a scroll bar or not. If we specify SCROLLING=”YES”, a scrollbar is shown in the frame. If we specify SCROLLING + “NO”, the sroll bar does not appear in the frame. If we specify SCROLLING=”AUTO”, the browser decides whether a scroll bar is needed. If the content is more than the frame size, a scroll bar appears. No resize The NORESIZE attributes has no value to assign. If this is given, the frames is not resizable by the user. Example Suppose we want to define a frame with the following attributes values. <frame src=”contents.html” name = “frameone” marginwidth = 40 marginheight = 60 scrolling = “yes” noresize> Here the name of the frame is frameone.This frame will shoe the content of the HTML document “contents.html”.The left and right margins are defined as 40 pixels.The top and bottom margins are defined as 60 pixels. The frame will have a scroll bar. The user cannot resize the frame.
62 Nested Framesets Suppose we want to divide the window column-wise into three frames .The following frameset tags can do the division of the three frames column-wise <frameset cols=”20%,40%,40%”> ………… ………… </frameset> We want to divide the middle frame into two row-wise subframes of equal size . This can be done by another <frameset> tag as follow <frameset cols=”50%,50%”> ………… ………… </frameset> The overall frameset tag is nested with another frameset tag as follows. <frameset col= “25%,50%,25%”> <frame name=”leftframe” scrolling=”yes”> <frameset rows=”50%,50%”> <frame name=”topframe” scrolling=”yes”> <frame name=”bottomframe” scrolling=”yes”> </frameset> <frame name=”leftframe” scrolling=”yes”> </frameset> Suppose each frame is assigned an HTML source as follows. Frame Source Leftframe birds.html Rightframe contents.html Topframe animals.html Bottomframe fruits.html The complete HTML document is shown as follows. <frameset col= “20%,40%,40%”> <frame name=”leftframe” src=” birds.html”> <frameset rows=”50%,50%”> <frame name=”topframe” src=” animals.html”> <frame name=”bottomframe” src=” fruits.html”> </frameset> <frame name=”rtframe” src=” contents.html”> </frameset>
63 CONCLUSION: This unit comprises of the concepts of table handling, frames and forms. All the features in tables, frames and forms have been well illustrated with all related techniques. REVIEW QUESTIONS: 1. What are tables? Give example. 2. How do you create table in html? 3. What are the components of table? Give example. 4. Why do you need table tags? Explain. 5. Distinguish between rowspan and colspan Attributes. 6. Discuss about align and valign Attributes. 7. How do you create table in HTML? Explain with example. 8. Specify about Cell padding and Cell spacing Attributes. 9. Explain the concept of Colouring Cells. 10. Discuss about forms in detail. 11. What are frames? 12. Write a short note on Nested Framesets. 13. Write an HTML program to print your bio data in the following format. 14. Write an HTML program to print the following table
64 15. Write a HTML program to print the following table. 16. Write an HTML Program to print the following table 17. Write an HTML Program to print the following table
65 UNIT V DYNAMIC HTML OBJECTIVE: This Unit deals with the concepts of DHTML, Cascading Style Sheets, Defining Style Sheet etc. The method of linking a style sheet to an HTML document is also explained. Different types of style sheets namely internal style sheets, External Style Sheets and Multiple Style Sheets are also explained. DHTML Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997. DHTML allows scripting languages to change variables in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load. DHTML allows authors to add effects to their pages that are otherwise difficult to achieve. In short words: scripting language is changing the DOM and page style. DHTML is the combination of HTML, CSS and JavaScript. Dynamic HTML has the following features.  Style sheets  Absolute positioning  Multimedia effects  Database access facility  Dynamic fonts  Scripting Cascading Style Sheets Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. The language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications. What is CSS?  CSS stands for Cascading Style Sheets  CSS defines how HTML elements are to be displayed
66  Styles were added to HTML 4.0 to solve a problem  CSS saves a lot of work  External Style Sheets are stored in CSS files Cascading Style Sheets, a new feature added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page. The term Cascading derives from the fact that multiple style sheets can be applied to the same Web page. HTML is used to structure content. CSS is used for formatting structured content. CSS was a revolution in the world of web design. The concrete benefits of CSS include:  control layout of many documents from one single style sheet;  more precise control of layout;  apply different layout to different media-types (screen, print, etc.);  numerous advanced and sophisticated techniques DEFINING STYLES A statement of the following format defines a style. Item (property: value) For example, consider the following H1 (font: “Times Roman”Bold 24pt; color: red) This statement tells us that all the H1 type headings must appear in Times Roman font, 24 point size, bold and in red color. Consider the following. A (color: red; text-decoration: blinking) This informs the browser that all the hypertexts with anchors must appear in red color and they must also be blinking. Suppose we want any paragraph text to appear in Arial font, in 12-point size with a text indent of 0.5 inches, we can give the following statement in the style sheet. P (font: 12pt “Arial”; text-indent: 0.5in) Suppose we want to have a 1.5-inch left margin and a 1.5-inch right margin in the whole body of the page, we can specify this as follows in the style sheet. Body (marginleft:1.5in;marginright:1.5in) Further, if we want to define that the background color be while and the text color red, we write the following statement in the style sheet. Body(background:white;color:black; margin-left:1.5in; margin-right:1.5in) One or more statements defining the styles form a style sheet. For example, the following is a style sheet. body(font:14pt “Arial”; color:black; background:white) H1(font;24pt “Times Roman”, bold)
67 P(font:12pt “Times Roman”) H4(font:20pt ‘Times Roman”bold”) A(text-decorator: blinking;color:green) Elements of Styles Style usually define the following  Font name, size and style  Text indent  Margins (left and right)  Background and text color  Text alignment Font Assignments Whenever a font is to be assigned we define it as shown in the following example. Font: “Times Roman”4pt bold; We can also define it as follows. Font-size:14pt;font-name:”Times Roman”;font-weight:bold The point size is defined as an integer followed by “pt”. instead of defining the absolute font size, we can also define it in a relative manner. For example, we can define font-size=+2pt. This tells us that the style assigned is 2 pts more than the normal font size. If the normal font size is 12pts, then this will be assigned 14pts. Similarly, if we define font-size=-3pt, this will reduce the normal font size by 3pts.It is also possible to define the font size using the key words shown in Table. Key words for font sizes For example, consider the following fontsize: xx-large; This defines the font size to be very large. The browser takes care of the actual font size to be assigned.
68 The font style can be defined as follows. font-style:italic; font-style:bold; font-style:normal; The weight of the font can be defined as follows. font-weight:bold; font-weight:bolder; We can use any of the following key words to define the font-weight. Normal Bold Bolder lighter MARGIN AND SPACE SETTINGS The margins, text indent and other space settings are defined in any of the following units shown in the following table. Size units We can set the margins, indent and line height using the following attributes. The following are some examples. Margin-left: 0.5 in; Margin-right: 9 mm; Text-indent: 1.5cm; Key words for margins, indents and line height
69 When the line height is more, we will get more line spacing. The following are some examples. line-height:3em; line-height:2I; line-height:1.5cm; Color It is possible to define two colors, one for the text and one for the background. The key word background is used to set the background color, and color is used to set the text color. Consider the following style definition. Body (background: white: color: blue) This style defines that the background be white in color and the text in blue. The popular colors white, red, orange , pink, yellow, etc, are all accepted key words to represent the respective colors. Text Alignment The text alignment can be defined using the text-align attribute. The values may be left, right, and center or justified. The following are some examples. text-align: left; text-align: right; text-align: center; text-align: justify; Having seen the elements of style sheets, let us now see how a style sheet with HTML documents. Linking a Style Sheet to an HTML Document There are three methods of defining and linking styles to an HTML, document. They are as follows.  In-line style  External style sheet  Internal style sheet In the case of in-line style, the style attribute defines a style within any of the tags such as <h1>tag, <p>tag, etc. This is not very useful, because the style applies only to the defined location. Internal and external style sheets are used widely in web page design. In-Line Styles In the in-line style, the type style is defined within the body of the HTML document itself. For example, in the paragraph tag <p> we can specify the style as follows. <p style = “font: “Arial” 18pt”> The Society of Jesus (the Jesuits) is a worldwide organization of religious men, numbering about 22 500 spread all over the world, of whom over 3000 are working in 14 <a href = provinces.html>prov-inces </a> of india
70 </p> <p style = “font: “Times roman” 13pt”>In <ahref = tamilnadu.html> Tamilnadu</a>alone there are around 500 Jesuits working in schools and colleges, youth services and social work centers, in parishes and in mission out-reach programs and in almost any and every form of service and ministry of the church. </p> The complete document is as follows. <html> <head> <title> In-line style illustration </title> </head> <body> <h1 style =”font: 24pt “ Arial” BOLD”> <hr> <p style = “font : Arial” 18pt”> The Society of jesus (the Jesuits) is a worldwide organization of religious men, numbering about 22 500 spread all over the world, of whom over 3000 are working in 14 <a href = provinces.html> provinces </a> of india. </p> <p style = “font : “Times Roman” 13pt”> In <a href = tamilnadu.html> Tamilnadu </a> alone there are around 500 jesuits working in schools and colleges, youth services and social work centers, in parishes and in mission out- reach programs and in almost any and every form of service and ministry of the church. </p> The complete document is as follows. <html> <head> <title> In-line style illustration </title> </head> <body> <h1 style = “font: 24pt “Arial” BOLD”> <hr> <p style = “font: “Arial” 18pt”>
71 The society of jesus(the Jesuits) is a worldwide organization of religious men, numbering about 22500 spread all over the world, of whom over 3000 are working in 14 <a href = provinces.html> provinces</a> of india </p> <p style = “font: “Times new roman” 13pt”> In <a href=tamilnadu.html> tamilnadu</a> alone there are around 500 jesuits working in schools and colleges, youth services and social work centers, in parishes and in mission out-reach programs and in almost any and every form of services and ministry of the church. </p> </body> <html> In the preceding example, the style is defined within a tag, For example,styles can be defined within the <p> tag, <h1> tag, <h2> tag, any heading tag, <hr> tag, <a> tag, etc. It is also possible to design a single style for a portion of the HTML document. For example, suppose we want to define a style for three paragraphs. Then we can define a style and make it span three paragraphs as follows. <span style = “text-indent: 4em; margin-left:10%; margin-right:15%> <h5> Department of Computer Science</h5> <p> the department of computer science is offering various courses such as B.Sc., PGDCA., M.Sc., and M.C.A., A well equipped laboratory and good library are there for the use of the students. </p> <h5> Department of Mathematics</h5> The department of mathematics is a very old department of this college. The department has undergraduate and post-graduate courses.</p> <h5> Department of Folklore</h5> <p> The folklore department is offering an M.A. degree course in Folklore. The Folklore Research and Resources Centre (FRRC) is an international research and resource centre attached to the folklore department</p> </span> External Style Sheets In case of an external style sheet, it is stored in a separate file. This style sheet can be linked to any number of HTML documents.
72 HTML Document Consider the style sheet “exstyle.css”, which is shown below. Body{font:14pt “Arial”; color: black; background:orange} H1{font:12pt “Times Roman” bold} P{font:12pt “Times Roman”} H4{font 26pt “Times Roman” italics} A{text-decorator:blinking; color: green} The above style sheet has already been typed and stored in the file “exstyle.css”. This style sheet can be linked by the <LINK> tag of the header section as follows. <LINK REL=stylesheet href=”exstyle.css” type = “text/css”> The attribute rel=stylesheet inform us that this <LINK> tag is for linking a style sheet to the document. The href=”exstyle.css” informs that “exstyle.css” is the file name of the style sheet. Type=”text/css” informs us that the style sheet type is text/css. A complete HTML document “Jesuit. Html”, which uses this style sheet, is shown as follows. <html> <head> <title> The society of Jesus </title> <LINK REL = “stylesheet” href = “exstyle.css type = “text/css”> </head> <body> <h1> The Jesuits </h1> <p> The society of jesus (the Jesuits) is a worldwide organization of religious men, numbering about 22500 spread all over the world, of whom over 3000 are working in 14<a href=provinces.html> provinces </a> of india. In <a href = tamilnadu.html> Tamilnadu </a> alone there are around 500 jesuits working in schools and colleges, youth services and social work centers, in parishes and in mission out-reach programs and in almost any and every form of service and ministry of the church.</p> <h4>Jesuit education</h4> <p> Jesuit education in the Madurai province today draws its inspiration from two epoch-making statements, namely the vision statement and preamble to Jesuit higher education, that originated in the Madurai province meet of 1985. </p> </body> </html>
73 Internal Style Sheets In the above example, we defined a style sheet file “exstyle.css” and three HTML documents, “Jesuits.html”, “provinces.html” and “tamilnadu.html”. they are linked as shown in figure. Notice that “tamilnadu.html” does not use the style sheet “exstyle.css”. Linking Style Sheets A style sheet can be defined fully in the header section with the <style> and </style tags> as illustrated in the figure. This way of defining style sheets is called an internal style sheet Internal style sheet In our example in the previous section, the same styles are to be followed for the file “provinces.html” also. So all the style sheet entries must be given in the “provinces.html” file too. Using the internal style sheet method, the files “Jesuits.html” and “provinces.html” are shown as follows. “Jesuits.html” <html> <head> <title> Society of Jesus </title> <style type=”text/css”> Body {font:14pt “Arial”;color:black;background:orange} h1{font:12pt “Times new roman” bold} P{font:12pt “Times new roman”} h1{font:26pt “Times new roman” italics} Exstyle. css Tamilnad u.html Jesuits.h tml Provinces. html Style sheet Head Body
74 A{text-decorator:blinking;color:green} <style> <body> <p> The society of Jesus (the Jesuits) is a worldwide organization of religious men, numbering about 22500 spread all over the world, of whom over 3000 are working in 14 <a href=provinces.html>provinces</a> of India. In <a href=tamilnadu.html> Tamilnadu</a> alone there are around 500 Jesuits working in schools and colleges, youth services and social work centers, in parishes and in mission out-reach programs and in almost any and every form of services and ministry of the Church. </p> </body> </html> “provinces.html” <head> <title> “Provinces.html” <head> </title> <style type=”textcss”> Body{font:14pt “Arial”;color:black;background:orange} H1{font:12pt “Times new roman” bold} P{font:12pt “Times new roman”} H4{font:26pt “Times new roman” italics} A{text-decorator:blinking;color:green} <style> <body> <h1> Jesuit Provinces<h1> <p> The Jesuit Community divides the Jesuit institutions into several provinces. For example, Madurai province includes all the institutions in Tamilnadu. The following colleges come under the Madurai Province: <h4> Madurai Province Colleges</h4> <UL> <LI> Loyola College, Chennai <LI> St Joseph’s College, Trichy <LI> St Xavier’s College, Tirunelveli
75 <LI> St Xavier’s College of Education, Tirunelveli <LI> Arul Anandar College, Karmathur </UL> </body> </html> Multiple Style Sheet It is possible to define several styles for a tag. For example, consider the <H1> tag and the following statement. H1{font :24pt “Arial” bold} This defines that all the <H1> tags in the document cause printing in Arial 24 pt bold. However, it is possible to define two or more types of <H1> styles. Suppose that we want to define three types of <H1> styles with the names chapter, section and sub section. Suppose we want the following styles to be defined. Type of <H1>font style size Chapter Arial bold 24 Section Times bold 20 Subsection Times Italics 18 The style sheet entries will be as follows H1.chapter{font:24pt “Arial” bold} H1.section{font:20pt “times new roman” bold} H1.Subsection{font:18pt “Times Roman” italics} When we we use a particular type of style in the <h1> tag, we mention the type using the class attribute. For example, suppose we give the following statements in an HTML document. <h1 class=”chapter”> chapter2 java fundamentals</h1><br> <h1 class=”Section”> section 2.1 java operators</h1><br> <h1 class=”Subsection”> section 2.1.1 Binary operators</h1> <br> <h1 class=”subsection”> section 2.1.2 unary operators</h1><br> <h1 class=”subsection” > section 2.1.3 relational operators </h1><br.<h1 class =”section”> section 2.2 control structures</h1><br><h1 class =”subsection”> section 2.2.1 IF structure </h1> <br> <h1 class=”subsection”> section 2.2.2 Break statement</h1><br> <h1 class=”chapter”>chapter 3 loop structures </h1><br> In the above example, the following will appear as per the style defined in “H1.chapter”. That is, they appear in Arial 24 points bold as shown below. chapter2 java fundamentals chapter3 Loop Structures
76 The following will appear as per the style defined in H1.section. Section 2.1 Java Operators Section 2.2 Control Structures That is, they appear in Times New Roman 20 points bold size. The following will appear as the style defined in “h1.subsection”. section 2.1.1 Binary operators section 2.1.2 unary operators section 2.1.3 relational operators section 2.2.1 IF structure section 2.2.2 Break statement That is, they appear in Times new roman 18 points italics. CONCLUSION With the use of the concepts mentioned in this chapter, one is able to design different style sheets. REVIEW QUESTIONS: 1. Explain how you will design a style. 2. Define a paragraph style with the font Helvetica, 14 points 3. Explain the elements of styles in detail. 4. Explain the relative definition of font sizes. 5. Explain the various units of measurement used to specify margins. 6. What are the three types of style sheets linking to HTML documents? 7. Illustrate the in-line style with a suitable example. 8. Illustrate the internal style sheet with a suitable example. 9. Illustrate external style sheet with a suitable example. 10. What are multiple styles? Illustrate with suitable examples.

More Related Content

PDF
24.9.14 internet applications notes-miss sushma jaiswal
byVivek Khandelwal
 
DOCX
Sekolah ictl
byKhairul Ummi
 
DOC
1 web programming
byumardanjumamaiwada
 
PPTX
Week two lecture
byHarry Essel
 
DOC
Internet
byShiva Krishna Chandra Shekar
 
PPS
2 internet essentials
bychris30931
 
PPT
Everything about Internet
byRAJEEV KUMAR SINGH
 
DOC
Handout web technology.doc1
bymikeade30002
 
24.9.14 internet applications notes-miss sushma jaiswal
byVivek Khandelwal
 
Sekolah ictl
byKhairul Ummi
 
1 web programming
byumardanjumamaiwada
 
Week two lecture
byHarry Essel
 
Internet
byShiva Krishna Chandra Shekar
 
2 internet essentials
bychris30931
 
Everything about Internet
byRAJEEV KUMAR SINGH
 
Handout web technology.doc1
bymikeade30002
 

Similar to Designing for the Web: Mastering User-Centric Design

PPTX
Introduction to computer lec (6)
bySamiullah Khan
 
PPT
Chapter 1Into the Internet
byPatty Ramsey
 
PDF
computer Unit 9
byAqeel Rehman
 
PDF
Chapter 1
byAliiyLomugdang
 
PDF
chapter 2.pdf
byBadeIbnuBade
 
PPTX
Presentation1
bynishagoswami1994
 
DOCX
Tics
bystefimbe
 
PPTX
Chirag sharma
byChirag Sharma
 
PPTX
Internetnuovo1
bymaristella1956
 
PPTX
Internetnuovo1
byluciaguglielmi4
 
PPTX
The Internet and the World Wide Web.pptx
byJuneKierLanayon
 
PPTX
INTERNET.pptx
byABHILASHAPANCHAL2
 
PPT
The Internet and the World Wide Web
bydpd
 
RTF
Rachna
bynaveen2282
 
PPT
Internet Appendix A
bydpd
 
PPTX
Unit 1 - Introduction.pptx
byBhisandulal
 
PPT
Akki
byakkihaihum
 
PPTX
Chapter-3-The-Internet-and-World-Wide-Web.pptx
byEdeleneGetes
 
PPT
Introduction to Internet and history of internet_1.ppt
bymudassarrnazar
 
PPTX
Internetnuovo1
bymariagabrielladistasi
 
Introduction to computer lec (6)
bySamiullah Khan
 
Chapter 1Into the Internet
byPatty Ramsey
 
computer Unit 9
byAqeel Rehman
 
Chapter 1
byAliiyLomugdang
 
chapter 2.pdf
byBadeIbnuBade
 
Presentation1
bynishagoswami1994
 
Tics
bystefimbe
 
Chirag sharma
byChirag Sharma
 
Internetnuovo1
bymaristella1956
 
Internetnuovo1
byluciaguglielmi4
 
The Internet and the World Wide Web.pptx
byJuneKierLanayon
 
INTERNET.pptx
byABHILASHAPANCHAL2
 
The Internet and the World Wide Web
bydpd
 
Rachna
bynaveen2282
 
Internet Appendix A
bydpd
 
Unit 1 - Introduction.pptx
byBhisandulal
 
Akki
byakkihaihum
 
Chapter-3-The-Internet-and-World-Wide-Web.pptx
byEdeleneGetes
 
Introduction to Internet and history of internet_1.ppt
bymudassarrnazar
 
Internetnuovo1
bymariagabrielladistasi
 

Recently uploaded

PDF
Transform Your Online Store with AltiusNxt AI Enriched data
byAltiusNxt Technologies
 
PDF
UiPath Community Day UNI - Nuevos productos de UiPath.pdf
byfelixluen
 
PDF
Immer vorne mit dabei sein - Roaming leicht gemacht
bypanagenda
 
PPTX
UiPath Automation Suite_Community Session_3/3
bysuhanisingh58689
 
PDF
Unlocking Access: Enriching Public Services with Location Intelligence.pdf
byPrecisely
 
PDF
Staying Ahead of the Curve - Roaming Just Got Easier
bypanagenda
 
PDF
GDG Boise - Innovating with Google Cloud Artificial Intelligence
byJoey Brown
 
PDF
TrustArc Webinar - It’s Time to Rethink Privacy
byTrustArc
 
PDF
Embedding sustainability: Tips for ebook and print production - Tech Forum 2025
byBookNet Canada
 
PDF
How UK Employers Are Simplifying Entry-Level Hiring with Day One Jobs
byDay One Talent Solutions Ltd
 
PDF
Fighting CVEs in Embedded Linux with the Yocto Project and OTA Updates
byLeon Anavi
 
PPTX
RAPTOR_Intro_Exercises_Presentation.pptx
bySwatiMalik36
 
PPTX
Healthcare BI - Turning Raw Data into Actionable Insights.pptx
byDash Technologies Inc
 
PDF
PDF Security Intelligence Platform | Cybersecurity Project by Ashish Patil
byAshishPatil495087
 
PDF
Data Center Exit to Cloud _ Managed Datacenter Migration.pdf
byAstuteBusiness
 
PDF
The Future-Ready PMO: Unlocking Project Success with Copilot and AI Innovatio...
byWellingtone
 
PPTX
Practical tips for keeping your C# code base clean
byDennis Doomen
 
PDF
Spec Driven Development with Kiro: Ensuring Quality and Traceability in the A...
byHaim Michael
 
PDF
How Tridens DevSecOps Ensures Compliance, Security, and Agility
byTridens
 
PDF
AI Demands More: Help Ensure Network Readiness With ThousandEyes
byThousandEyes
 
Transform Your Online Store with AltiusNxt AI Enriched data
byAltiusNxt Technologies
 
UiPath Community Day UNI - Nuevos productos de UiPath.pdf
byfelixluen
 
Immer vorne mit dabei sein - Roaming leicht gemacht
bypanagenda
 
UiPath Automation Suite_Community Session_3/3
bysuhanisingh58689
 
Unlocking Access: Enriching Public Services with Location Intelligence.pdf
byPrecisely
 
Staying Ahead of the Curve - Roaming Just Got Easier
bypanagenda
 
GDG Boise - Innovating with Google Cloud Artificial Intelligence
byJoey Brown
 
TrustArc Webinar - It’s Time to Rethink Privacy
byTrustArc
 
Embedding sustainability: Tips for ebook and print production - Tech Forum 2025
byBookNet Canada
 
How UK Employers Are Simplifying Entry-Level Hiring with Day One Jobs
byDay One Talent Solutions Ltd
 
Fighting CVEs in Embedded Linux with the Yocto Project and OTA Updates
byLeon Anavi
 
RAPTOR_Intro_Exercises_Presentation.pptx
bySwatiMalik36
 
Healthcare BI - Turning Raw Data into Actionable Insights.pptx
byDash Technologies Inc
 
PDF Security Intelligence Platform | Cybersecurity Project by Ashish Patil
byAshishPatil495087
 
Data Center Exit to Cloud _ Managed Datacenter Migration.pdf
byAstuteBusiness
 
The Future-Ready PMO: Unlocking Project Success with Copilot and AI Innovatio...
byWellingtone
 
Practical tips for keeping your C# code base clean
byDennis Doomen
 
Spec Driven Development with Kiro: Ensuring Quality and Traceability in the A...
byHaim Michael
 
How Tridens DevSecOps Ensures Compliance, Security, and Agility
byTridens
 
AI Demands More: Help Ensure Network Readiness With ThousandEyes
byThousandEyes
 

Designing for the Web: Mastering User-Centric Design

  • 1.
    1 UNIT I INTRODUCTION TOTHE INTERNET OBJECTIVE: To make the Students aware of the basic and fundamental concepts of Internet. Computers in Business Computer-based business applications were called Business Data Processing Systems (BDPS) and COBOL (Common Business Oriented Language) was largely used to design them. Business data was stored in the form of data files and COBOL programs were used to process the data files and generate useful reports. Later simple queries and an attractive format called Data Base Management Systems (DBMS) were used. At this stage a new technology called Graphical User Interface (GUI) was introduced. A GUI divides a program into two parts. One part is for managing the data files, and the other to design pictures and icons to get input from the user. The first part is called the back end, and the second part is called the front end. In the meantime, more sophisticated file management techniques have also been introduced which allows more than one file to be manipulated by simple commands. This type of data file is called a Relational Database. The database management system which supports relational databases and relational features is called a Relational Database Management System (RDBMS). The Next important improvement in the field of computers is the concept of networking. INTERNET The Internet is a global system of interconnected computer networks that use the standard Internet Protocol Suite (TCP/IP) (Transmission Control Protocol / Internet Protocol) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks of local to global scope, that are linked by a broad array of electronic and optical networking technologies. The Internet carries a vast range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support electronic mail. Brief History of the Internet Late 1960's to early 1970's: Department of Defence Advanced Research Projects Agency (ARPA) Network - ARPANET served as basis for early networking research as well as a central backbone during the development of the Internet. TCP/IP evolved as the standard networking protocol for exchanging data between computers on the network. Mid-To-Late 1970's: Basic services were developed that make up the Internet: Remote connectivity - File Transfer - Electronic mail 1979-80 : Usenet systems for newsgroups 1982: Internet Gopher
  • 2.
    2 1991: Public introductionto World Wide Web (mostly text based) - In the early 1990s, the developers at CERN spread word of the Web's capabilities to scientific audiences worldwide. 1993: By September 1993, the share of Web traffic traversing the NSFNET Internet backbone reached 75 gigabytes per month or one percent. 1994: By July 1994 it was one terabyte per month. 1994 Prior to this time the WWW was not used for commercial business purposes - The Internet is one-third research and education network. Commercial communications begin to take over the majority of Internet traffic. DEFINITION OF INTERNET Internet is network of network or collection of heterogeneous networks. Network is an interconnection of systems to share data and information. What is the Internet? The Internet is a worldwide telecommunications system that provides connectivity for millions of other, smaller networks. Therefore, the Internet is often referred to as a network of networks. It allows computer users to communicate with each other across distance and computer platforms. The Internet began in 1969 as the U.S. Department of Defence's Advanced Research Project Agency (ARPA) to provide immediate communication within the Department in case of war. Computers were then installed at U.S. universities with defence related projects. As scholars began to go online, this network changed from military use to scientific use. As ARPANET grew, administration of the system became distributed to a number of organizations, including the National Science Foundation (NSF). This shift of responsibility began the transformation of the science oriented ARPANET into the commercially minded and funded Internet used by millions today. The Internet acts as a pipeline to transport electronic messages from one network to another network. At the heart of most networks is a server, a fast computer with large amounts of memory and storage space. The server controls the communication of information between the devices attached to a network, such as computers, printers, or other servers. The Internet can be defined as a network of globally connected computers that is decentralized by design. This definition can be broken down into three parts. a. Is a network A network is a collection of computers. The Internet can also be referred to as a network because it is a collection of millions of computers. b. Globally connected computers This means that it can be connected to the Internet, regardless of location. The Internet has brought people in the world closer by connecting computers located in the remotest of locations. c. Decentralized design The Internet has a decentralized design. That is, there is no centralized body that controls the way in which the Internet functions. The Internet does provide online services that are centrally administered, but as a whole, it would not be incorrect to say that the Internet has a
  • 3.
    3 decentralized design. Eachcomputer connected to the Internet is called a host. The operator/user of a particular host can choose from the millions of available Internet services and can also make services available through the Internet. An Internet Service Provider (ISP) allows the user access to the Internet through their server. Many teachers use a connection through a local university as their ISP because it is free. Other ISPs, such as American Online, telephone companies, or cable companies provide Internet access for their members. The Internet is a useful source of information about news, sports, and entertainment because it changes along with the minute by minute events that occur in the world. The WORLD WIDE WEB (WWW) The World Wide Web (WWW) is a collection of pages maintained on the Internet using a technique that is called Hyper-text. Hyper-Text Hyper-Text is a text of more than two dimensions. Consider any text that is typed from left to right. It has only two dimensions:  Left to right  Top to Bottom Left to right is normally considered as the x-axis and top to bottom is considered the y-axis. The terms Internet and World Wide Web are often used in every-day speech without much distinction. However, the Internet and the World Wide Web are not one and the same. The Internet is a global system of interconnected computer networks. In contrast, the Web is one of the services that run on the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and URLs(Uniform Resource Locator). In short, the Web is an application running on the Internet. Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser, or by following a hyperlink to that page or resource.
  • 4.
    4 The web browserthen initiates a series of communication messages, behind the scenes, in order to fetch and display it. First, the server-name portion of the URL is resolved into an IP (Internet Protocol) address using the global, distributed Internet database known as the Domain Name System (DNS). This IP address is necessary to contact the Web server. The browser then requests the resource by sending an HTTP request to the Web server at that particular address. In the case of a typical web page, the HTML text of the page is requested first and parsed immediately by the web browser, which then makes additional requests for images and any other files that complete the page image. The most widely used part of the Internet is the World Wide Web (often abbreviated "WWW" or called "the Web"). Its outstanding feature is hypertext, a method of instant cross- referencing. In most Web sites, certain words or phrases appear in text of a different color than the rest; often this text is also underlined. When you select one of these words or phrases, you will be transferred to the site or page that is relevant to this word or phrase. Sometimes there are buttons, images, or portions of images that are "clickable." If you move the pointer over a spot on a Web site and the pointer changes into a hand, this indicates that you can click and be transferred to another site. While receiving these files from the web server, browsers may progressively render the page onto the screen as specified by its HTML, Cascading Style Sheets (CSS), or other page composition languages. Any images and other resources are incorporated to produce the on- screen web page that the user sees. Most web pages contain hyperlinks to other related pages and perhaps to downloadable files, source documents, definitions and other web resources. Such a collection of useful, related resources, interconnected via hypertext links is dubbed a web of information. Publication on the Internet created what Tim Berners-Lee first called the World Wide Web Connection To The Internet Through Leased Line Protocol Network designers have designed several protocols now, and some of them are as follows: • Simple Mail Transfer Protocol (SMTP) • Point –to-Point Protocol (PPP) • Hyper-Text Transfer Protocol (HTTP) • Transfer Control Protocol / Internet Protocol (TCP/IP)
  • 5.
    5 Internet Protocol isa technical switching scheme, which enables a node of one network to communicate with a node of another network. INTERNET APPLICATIONS The Internet is treated as one of the biggest invention. It has a large number of uses. 1. Communication 2. Job searches 3. Finding books and study material 4. Health and medicine 5. Travel 6. Entertainment 7. Shopping 8. Stock market updates 9. Research 10. Business use of internet: different ways by which internet can be used for business are:  Information about the product can be provided online to the customer.  Provide market information to the business  It helps business to recruit talented people  Helps in locating suppliers of the product  Fast information regarding customers view about companies’ product  Eliminate middle men and have a direct contact with contact with customer.  Providing information to the investor by providing companies back ground and financial information on web site. BROWSERS The software used for browsing web pages is called a browser. The following are some popular browsers:  Netscape Navigator  Mosaic  Hot Java What is a Web Browser? A Web browser contains the basic software you need in order to find, retrieve, view, and send information over the Internet. This includes software that lets you: • Send and receive electronic-mail (or e-mail) messages worldwide nearly instantaneously. • Read messages from newsgroups (or forums) about thousands of topics in which users share information and opinions. • Browse the World Wide Web (or Web) where you can find a rich variety of text, graphics, and interactive information.
  • 6.
    6 The most popularbrowsers are Microsoft Internet Explorer and Netscape Navigator. The appearance of a particular Web site may vary slightly depending on the browser you use. Exploring the Internet using Microsoft Internet Explorer. Start Internet Explorer by double- Clicking the icon on your desktop. WEB PAGES Web pages are what make up the World Wide Web. These documents are written in HTML (Hypertext Markup Language) and are translated by your Web browser. Web pages can either be static or dynamic. Static pages show the same content each time they are viewed. Dynamic pages have content that can change each time they are accessed. These pages are typically written in scripting languages such as PHP, Perl, ASP, or JSP. The scripts in the pages run functions on the server that return things like the date and time, and database information. All the information is returned as HTML code, so when the page gets to your browser, all the browser has to do is translate the HTML. Electronic (digital) document created with HTML and, therefore, accessible with a browser. In addition to text and graphics, web pages may also contain downloadable data files, audio and video files, and hyperlinks to other pages or sites. A website is usually a collection of web pages. A web page is a document that's created in html that shows up on the internet when you type in or go to the web page's address. Web Page A web page is a document commonly written in HyperText Markup Language (HTML) that is accessible through the Internet or other network using a browser. A web page is accessed by entering a URL address and may contain text, graphics, and hyperlinks to other web pages and files. Web pages are created using HTML which stands for HyperText Markup Language. All web pages, whether big or small, have to be developed in HTML to be displayed in web browsers. HTML, contrary to its name, is not a language. Rather, it consists of tags that specify the purpose of what they enclose. For instance, by surrounding a block of text on a web page with the <p> tag (the paragraph tag) tells the browser that all that text is to be placed as paragraph or using the <em> around a phrase will give emphasis to it.
  • 7.
    7 Types of WebPages Advocacy Web pages established for political candidates, called “e-campaigning,” has become an important part of politics. Surveys show that more than 50 percent of Internet users turn to the Web for information about political topics. Business/marketing Web pages used for shopping on the Internet are increasingly popular. In 1999, 17 million households shopped online. This figure is expected to grow to 49 million by 2004. A survey of back-to-school shoppers 34 years old and younger showed that 17 percent planned to shop online for their children’s school needs. Perhaps more significant, only 6 percent of surveyed shoppers reported being uncomfortable with buying on the Internet. Educational institutions frequently publish informational Web pages. Today, most colleges have web sites that offer course descriptions, information about the student population, and registration costs and deadlines. When shopping for college, surveys show that high school seniors use the Web more than catalogs or guidebooks; about 80 percent of college-bound students start looking at college Web sites as sophomores. News Web pages are the most popular Web sites among Americans with access to the Internet. Although these Web sites often are associated with newspapers, magazines, television stations, or radio stations, some are published only online, without a related print or broadcast media. Portal Web pages often offer the following free services: search engine, news, sports and weather, free personal Web pages, reference tools, shopping malls, e-mail, instant messaging, newsgroups, and chat rooms. The dictionary defines a “portal” as a door or gateway. Portal Web pages are gateways to a host of services. INTERNET CHAT On the Internet, chatting is talking to other people who are using the Internet at the same time you are. Usually, this "talking" is the exchange of typed-in messages requiring one site as the repository for the messages (or "chat site") and a group of users who take part from anywhere on the Internet. In some cases, a private chat can be arranged between two parties who meet initially in a group chat. Chats can be ongoing or scheduled for a particular time and duration. Most chats are focused on a particular topic of interest and some involve guest experts or famous people who "talk" to anyone joining the chat. Internet Chat Chats are conducted on online services (especially America Online), by bulletin board services, and by Web sites. Several Web sites, notably Talk City, exist solely for the purpose of conducting chats. Some chat sites such as Worlds Chat allow participants to assume the role or appearance of an avatar in a simulated or virtual reality environment.
  • 8.
    8 WEBSITES Websites have manyfunctions and can be used in various fashions; a website can be a personal website, a commercial website, a government website or a non-profit organization website. Websites can be the work of an individual, a business or other organization, and are typically dedicated to a particular topic or purpose. Any website can contain a hyperlink to any other website, so the distinction between individual sites, as perceived by the user, can be blurred. Websites are written in, or converted to, HTML (Hyper Text Markup Language) and are accessed using a software interface classified as a user agent. Web pages can be viewed or otherwise accessed from a range of computer-based and Internet-enabled devices of various sizes, including desktop computers, laptops, PDAs and cell phones. A website is hosted on a computer system known as a web server, also called an HTTP server. These terms can also refer to the software that runs on these systems which retrieves and delivers the web pages in response to requests from the website's users. ELECTRONIC MAIL What is Email? Electronic Mail is the facility of sending text-based messages and letters to any Internet user. Everybody on the Internet has his/her own unique e-mail address. Using which one can communicate with other e-mail users and that too very quickly. We can also attach picture, sound, video or document files to the e-mail. A message sent from one computer to another over the Internet. To start sending emails you will need: • A computer connected to the Internet (You can use the library computers!) • 87An email address Email (or e-mail) stands for electronic mail and is used primarily for transferring letters from one digital device to another. These digital devices can be computers, palm tops or even mobile phones. Email messages can contain text as well as pictures and other attached files. The advantages of email over traditional post are tremendous.
  • 9.
    9 Getting an EmailAddress: You will need to get an email address from a company that has “mail servers”, i.e. special computers that can deliver emails to the right place. Email from your Internet Service Provider (ISP) Company: ISPs (Internet Service Providers) are companies that provide a connection to the Internet for a monthly fee. They usually include one or more email addresses in the monthly Internet connection fee. Examples of ISPs in Halifax: See the yellow pages for a complete list of ISPs under Internet-Products & Services • Aliant - (High speed Internet via the phone lines) • Chebucto Community Net (Dial-up Internet) • EastLink (High-speed cable Internet) If you have email from an ISP you will be able to check it in two ways. 1. At home: using software (e.g., Outlook) which can automatically remember your login name and password for you. 2. At the library or at home: by logging in to the company’s webmail website. You will need to remember your login name and password. Free Web-Based Email Service Providers: To sign up for a free web-based email account, go to one of these websites and look for links like “Sign up now ” or “ “Register here ” to access the registration form. • www.gmail.com • www.yahoo.com • www.hotmail.com • www.lycos.com Parts of an Email Address: [email protected] Sending a Message: STEP 1. Fill in the boxes: When you start to write an email message you will see a form with numerous empty boxes. Here is an explanation of what you need to type in each box. To: Type the email address(es) of the people to whom you are sending the message. When writing to more than one person put a comma between their addresses. (e.g., [email protected], [email protected])
  • 10.
    10 CC: Type an emailaddress in the “Carbon Copy ” box if you just want to “cc” someone for their information, and you don’t expect them to respond. The main recipient in the “To” box will be able to see the email addresses in the “CC” box. BCC: Type an email address to “Blind Carbon Copy” if you want someone to receive the message without the main recipient knowing. Title: Type a brief title/subject for your message. This is not mandatory but it is helpful for the recipient. Message: Type your message in the large box. SEARCH ENGINES Search engines are like the phone books for the Internet. They are special websites that allow you to find information on other websites. To demonstrate using Google, the basic procedure is the same for all search engines. General  Search Engines  Specialized Search Engines Google: www.google.ca Eluta (job postings) : www.eluta.ca Bing: www.bing.com Kids Click : www.kidsclick.com Steps for Searching:  Go to www.google.ca  Type keywords into the search box.  Press enter or click Google Search URLs URL is an acronym for Uniform Resource Locator and is a reference (an address) to a resource on the Internet. A unique resource locator (URL) is a link that is used to access a Web site on the Internet. A URL is unique to each site, and is typically based on the nature of the site. Without specifying a valid URL, users cannot access a particular site. A URL has two main components • Protocol identifier: For the URL http://example.com, the protocol identifier is http. • Resource name: For the URL http://example.com, the resource name is example.com.
  • 11.
    11 The protocol identifierand the resource name are separated by a colon and two forward slashes. The protocol identifier indicates the name of the protocol to be used to fetch the resource. The example uses the Hypertext Transfer Protocol (HTTP), which is typically used to serve up hypertext documents. HTTP is just one of many different protocols used to access different types of resources on the net. Other protocols include File Transfer Protocol (FTP), Gopher, File, and News. The resource name is the complete address to the resource. The format of the resource name depends entirely on the protocol used, but for many protocols, including HTTP, the resource name contains one or more of the following components: Host Name: The name of the machine on which the resource lives. Filename: The pathname to the file on the machine. Port Number: The port number to which to connect (typically optional). Reference: A reference to a named anchor within a resource that usually identifies a specific location within a file (typically optional). DOMAIN NAMES A domain name is an identification string that defines a realm of administrative autonomy, authority or control within the Internet. Domain names are formed by the rules and procedures of the Domain Name System (DNS). Any name registered in the DNS is a domain name. Domain names are used in various networking contexts and application-specific naming and addressing purposes. In general, a domain name represents an Internet Protocol (IP) resource, such as a personal computer used to access the Internet, a server computer hosting a web site, or the web site itself or any other service communicated via the Internet. Domain names are also used as simple identification labels to indicate ownership or control of a resource. Such examples are the realm identifiers used in the Session Initiation Protocol (SIP), the Domain Keys used to verify DNS domains in e-mail systems, and in many others. Uniform Resource Identifiers (Uris): An important function of domain names is to provide easily recognizable and memorisable names to numerically addressed Internet resources. This abstraction allows any resource to be moved to a different physical location in the address topology of the network,
  • 12.
    12 globally or locallyin an intranet. Such a move usually requires changing the IP address of a resource and the corresponding translation of this IP address to and from its domain name. PORTAL Portal is a term, generally synonymous with gateway, for a World Wide Web site that is or proposes to be a major starting site for users when they get connected to the Web or that users tend to visit as an anchor site. There are general portals and specialized or niche portals. Some major general portals include Yahoo, Excite, Netscape, Lycos, CNET, Microsoft Network, and America Online's AOL.com. Examples of niche portals include Garden.com (for gardeners), Fool.com (for investors), and SearchNetworking.com (for network administrators). A number of large access providers offer portals to the Web for their own users. Most portals have adopted the Yahoo style of content categories with a text-intensive, faster loading page that visitors will find easy to use and to return to. Companies with portal sites have attracted much stock market investor interest because portals are viewed as able to command large audiences and numbers of advertising viewers. 1) The term portal space is used to mean the total number of major sites competing to be one of the portals. 2) In fantasy games, science-fiction, and some "New Age" philosophies, a portal is a gateway to another world of the past, present, or future, or to an expanded awareness. 3) In 3-D graphics development, portal rendering is a technique that increases the effect of realism and speeds up presentation. CONCLUSION: This Unit covers the concepts of Internet, Web Browsers, Web pages, Web Sites, E-mail, URLs and Portals. REVIEW QUESTIONS: 1. What program gets us on the Internet? 2. What website are you taken to when you first open a browser? 3. Where is the browser program located once it has opened a web page? 4. Where is the title bar located? 5. Give some examples of Protocols. 6. What is the most widely used search engine? 7. What is the expansion for W3C? 8. Write a short note on Search Engines. 9. Give a brief account of Portals 10. Discuss about Internet and WWW. 11. Explain with suitable examples the applications of Internet.
  • 13.
    13 UNIT II CONCEPTS OFHTML OBJECTIVE To introduce the design aspects of the World Wide Web Page and HTML as HTML is the tool for designing a Web Page. History of HTML The seed for HTML, was sown by IBM in the early 1980s. They wanted to set a documentation system in which one could mark the title, heading, paragraphs and font type selections. They called it General Mark-up Language (GML). In 1986, the International Standardising Organization (ISO) took up this concept and standardized it as Standard Generalised Mark-up Language(SGML). In 1989, Tim Berners Lee and his team in the European Laboratory for Particle Physics (CERR) designed the present form of the documentation language and called it HTML. HTML Generations The oldest version of HTML is called HTML 0. This is read either as HTML Version 0 or HTML level 0. HTML 1 is an up gradation of HTML 0. It has new tags for highlighting a text and displaying images. In HTML 2, edit boxes, list boxes and buttons were introduced. In HTML 3, flexible figure handling procedures were included. It also supports mathematical equations, formulas, a banner area and has several other interesting features. It also makes table formulation easy. HTML Basics After installing an HTML editor and setting up a folder we are ready to begin creating our page. Begin by creating a file named index.htm or index. html, this will be your start page. All servers on the Internet look for an index file if no file is specified. For example, when typing http://www.computerhope.com, the server is accessing http://www.computerhope.com/index.htm. <html> <head> <title>My first web page</title> </head> <body> Your web page content goes here </body> </html> The above code is a very basic example of the code that helps make up every web page. As you can see, the section starts of with <html>, which is defining that everything within <html> is HTML code. Next, you have <head>, which is defining the heading of your HTML document. Third, we have the <title> section within <head>, which titles this page being shown. Finally, the <body> section is contains what is shown on the web page.
  • 14.
    14 As you cansee from looking at the above code, you will realize that the basic HTML commands are fairly simple to use. First, we start off with <center>; this is telling the browser to center the information within these tags. Next, the <h1> or heading one statement, which tell the browser to display the text in the largest heading. Next, the <hr> tag tells the browser to display a line straight across the screen. The third line contains <br> that creates a break on the page. Next, the <p> is short for "paragraph" and helps separate the text in the page. Next, the <b> tag is short for bold and will bold the text contained with the tag. In the next section the <ul> starts a bullet list and each bullet is represented by the <li> tag. Finally, the "a href" tag is a method of creating a link to another location. Introduction to HTML: Designing a Home Page The first page of a website is called the Home Page. The home page is like the drawing room of our house or the reception area of an office. It normally has the logo of the company, with a pleasant background, having several hot texts. The acronym for Hyper-Text Mark-up Language is HTML. It is a documentation language to mark the headings, title, tables etc. It is a universal language to design a static web page. It is machine independent and all Internet browsers accept the HTML code.  Hypertext is simply a piece of text that works as a link.  Markup Language is a way of writing layout information within documents. Basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor. Example <! DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Hyper Text Markup Language (HTML) is the primary building block of creating a website. HTML is a very basic markup language and requires memorization of a few dozen HTML commands that structure the look and layout of each of the web pages. Before writing any HTML code or designing first web page, we must decide on an HTML editor or text editor such as Notepad or WordPad.
  • 15.
    15 HTML Tags HTML tagsare keywords (tag names) surrounded by angle brackets: <tagname>content</tagname>  HTML tags normally come in pairs like <p> and </p>  The first tag in a pair is the start tag, the second tag is the end tag  The end tag is written like the start tag, but with a slash before the tag name HTML DOCUMENT Using HTML, we can create static web pages. Every HTML, document has the following two sections: • Head • Body The head begins with the <HEAD> tag and ends with the </HEAD> tag. In the head section, the Title is the most important item. The Title begins with the <TITLE> and ends with </TITLE>. The body begins with <BODY> and ends with </BODY>. Heading can be created with tags H1, H2, ….., H6. H1 will make a big heading. H2 will make it smaller and H3 will make it still small, and so on. For Example, if we want “Bharathidasan University” to appear as a big heading, we type <h1> BHARATHIDASAN UNIVERSITY</h1> The output will be as shown below BHARATHIDASAN UNIVERSITY All HTML documents must start with a type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. Example <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> The following are some more tags. <! . . . . Comments <br> Line Break <p> Start a new paragragh <pre> </pre> Preformatted text <b> </b> Bold Face
  • 16.
    16 <u> </u> Underline <I></I> Italics <tt> </tt> Typewriter Font <ol> </ol> Ordered list <ul> </ul> Unordered list <li> </li> A list item Web Browsers The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document: HTML Versions Since the early days of the web, there have been many versions of HTML: Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 Viewing the Website Open the computer browser and type the location of your web page. For example, if you have placed the index.htm or index.html file within the webpage folder, you would type in the browser c:webpageindex.htm or c:webpageindex.html if you are using an IBM compatible computer. If you have Microsoft Windows or Apple, you can also double-click the web page file so it opens in a browser automatically. Displaying Images There are two methods of displaying images on your web page. The first method is linking to another website to display the images by using the below code. <img src="http://www.computerhope.com/logo.gif" alt="logo"> Using the above HTML tag you can display images of other websites, which is also called a hotlink. The alternate and recommended method would be to use the below code. <img src="mypic.gif" alt="My picture"> If the mypic.gif exists on the computer the picture is shown on your website. Adding pictures is an excellent way to spruce up the website.
  • 17.
    17 HTML Headings HTML headingsare defined with the <h1> to <h6> tags: Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> HTML Paragraphs HTML paragraphs are defined with the <p> tag: Example <p>This is a paragraph.</p> <p>This is another paragraph.</p> HTML Images HTML images are defined with the <img> tag. The source file (src), alternative text (alt), and size (width and height) are provided as attributes Example <img src="w3schools.jpg" alt="W3Schools. com" width="104" height="142"> ANCHOR TAG An anchor is a piece of text which marks the beginning and/or the end of a hypertext link. When a page is shown, some of its words may need further explanation. Such words are called hot text and they appear in a different color. When the cursor is moved to the hot text, a hand symbol appears. When we click it, another HTML file will be opened and that will have the required explanation. A hot text is created with an anchor tag <a>.The text between the opening tag and the closing tag is either the start or destination (or both) of a link. For example, if a hot text “St.Xavier’s College” is to created with an HTML document, college.html we must type <ahref=”college.html”> St.Xavier’s College</a> For example, an HTML file Xavier.Html, is shown below. It contains details about Dr.C.Xavier <html> <head> <title>Xavier</title> </head> <body> <h1>Dr.C.Xavier<h1> <hr> <br>
  • 18.
    18 Attributes of theanchor tag are as follows HREF OPTIONAL. If the HREF attribute is present, the anchor is sensitive text: the start of a link. If the reader selects this text, (s)he should be presented with another document whose network address is defined by the value of the HREF attribute . The format of the network address is specified elsewhere. This allows for the form HREF="#identifier" to refer to another anchor in the same document. If the anchor is in another document, the attribute is a relative name, relative to the documents address (or specified base address if any). @@NOTE: This refers to the URI specification, which does not cover relative addresses. There is no specification of how to distinguish relative addresses from absolute addresses. NAME OPTIONAL. If present, the attribute NAME allows the anchor to be the destination of a link. The value of the attribute is an identifier for the anchor. Identifiers are arbitrary strings but must be unique within the HTML document. Another document can then make a reference explicitly to this anchor by putting the identifier after the address, separated by a hash sign. @@NOTE: This feature is representable in SGML as an ID attribute, if we restrict the identifiers to be SGML names. REL OPTIONAL. An attribute REL may give the relationship (s) described by the hypertext link. The value is a comma-separated list of relationship values. Values and their semantics will be registered by the HTML registration authority . The default relationship if none other is given is void. REL should not be present unless HREF is present. REV OPTIONAL. The same as REL , but the semantics of the link type are in the reverse direction. A link from A to B with REL="X" expresses the same relationship as a link from B to A with REV="X". An anchor may have both REL and REV attributes. URN OPTIONAL. If present, this specifies a uniform resource number for the document. TITLE OPTIONAL. This is informational only. If present the value of this field should equal the value of the TITLE of the document whose address is given by the HREF attribute. METHODS OPTIONAL. The value of this field is a string which if present must be a comma separated list of HTTP METHODS supported by the object for public use.All attributes are optional, although one of NAME and HREF is necessary for the anchor to be useful.
  • 19.
    19 Example of Use: Forexample, if a hot text “St.Xavier’s College” is to created with an HTML document, college.html we must type <ahref=”college.html”> St.Xavier’s College</a>. For example, an HTML file Xavier.Html, is shown below. It contains details about Dr.C.Xavier <html> <head> <title>Xavier</title> </head> <body> <h1>Dr.C.Xavier<h1> <hr> <br> Dr.C.Xavier is working as a senior lecturer in computer science in <a href=”college.html”> St Xavier’s College </a> Palayamkottai. Palayamkottai and Tirunelveli are considered as twin cities of the famous <a href = ”district.html”> Tirunelveli Kattabomman </a> District. <br> </body> </html> When this file is open using an Internet browser we get the following picture. First Web Page HYPER LINKS When we click a hot text another HTML document is opened. This is how we link two texts. This is called the hyper link. If website runs into several pages, it is possible to define hyper links within the same web document itself. In this case we must define a target name as follows. <a name = comp></a> In this case an identification called COMP has been defined using the anchor tag <A>. This is called the identification of a location. In another part of the document, we can specify a hot text as follows. <A href=”#COMP”> COMPUTER SCIENCE </A> When the hot text computer science is clicked, the cursor jumps to the location with the identification COMP.
  • 20.
    20 Example Considered the followingHTML document. <html> <head> <title> <St Xavier’s College> </title> </head> <body> <h1> St Xavier’s College</h1> ……………………………………………… The <a href =”#comp”>computer science </a> is rendering commendable service to the society. ……………………………………………… <a name = comp> </a> <h4> department of computer science</h4> The department offers ……………………………………… </body> The HTML document shown above is a single document <a name=comp></a> defines an identification of the location. The hot text “computer science” is given a short-cut link to this location. The identification of the location can also be defined in the <br>tag or <h1>tag or any head or similar tags. For instance in the above example, the location identification has been defined as: <a name = comp> </a> <h4> department of computer science</h4> Instead of the above code, we can simply write: <h4 id = comp> department of computer science</h4> Similarly, we can also write it as an attribute of a break tag. <br id =comp> Example Consider the following HTML document. <head> <title> tamilnadu tourist information </title> <body> Tamilnadu has very interesting tourist spots at the following places. <ul> <li><a href=”#maha”>Mahabalipuram</a> <li><a href=”#Kodai”>Kodaikkanal</a>
  • 21.
    21 <li><a href=”#OOty”>Ooty</a> ……………………………………………… <h4 id= maha> Mahabalipuram </h4> ……………………………………………… <h4 id = Kodai>Kodaikkanal </h4> ……………………………………………… <h4 id = OOty>Ooty </h4> ……………………………………………… </body> SAMPLE HTML DOCUMENTS <html> <head> <title> Prakash</title> <!this file was created by Mr.Prakash himself on his own multimedia Pentium computer> </head> <body> <h1>K.P.Rathina Prakasam</h1> <hr> <br> K.P.Rathina Prakasam is a businessman. He is the Managing Partner of <a href = "Nataraja stores.html">M/s Nataraja Stores </a>Palayamkottai. His firm deals with hardware and paints. The firm handles wholesale and retail sale of quality building materials including <a href = "Berger Paints.html"> Berger Paints</a> at reasonable and competitive prices to the customers. <br> </body> </html> When this document is opened in the web. It appears as shown in the following figure Nataraja Stores.html <html> <head> <title>nataraja stores</title> </head> <body> <h2>Nataraja stores</h2> <hr> <br>
  • 22.
    22 M/s Nataraja Storesis situated at 239, Tiruchendur Road, Palayamkottai. The firm was established in the year 1982. This firm is very popular by its goodwill for reliable, good quality building materials at reasonable prices. This firm's sister concern, M / s A.M.A.A.T. Nataraja Nadar Shining Stores, Tirunelveli Junction, was established in 1947 , the year of Indian Independence. <br> </body> </html> When this document is opened in the web. It appears as shown in the following figure HEAD AND BODY SECTION HEADER SECTION Every HTML document must have a head section which begins with the tag < head> and ends with </head>. The following are some important components of the header section. • Title • Prologue • Links TITLE: The title is the heading that appears as the title of the window. It is enclosed between tags <title> and </title>. Example: <html> <head> <title>AQUATIC BIODIVERSITY CENTER</title> </head> <body> <h1>AQUATIC BIODIVERSITY CENTER</h2> <hr>
  • 23.
    23 The Aquatic BiodiversityCentre is a research centre of the zoology department. There are five research scholars presently working in this centre. One is working on the energy utilization and interaction of multispecies of fish. The other four are working on the effect of low pH on the physiology of freshwater fishes. </body> </html> In the above document, notice that the tile has been given in the header section as <title> AQUATIC BIODIVERSITY CENTER </title> So the title appear at the top of the window Example In order to distinguish between a title and a head, the following HTML document given <html> <head> <title>AQUATIC BIODIVERSITY CENTER</title> </head> <body> The Aquatic Biodiversity Center is a research center of the zoology department. There are five research scholars presently working in this center. One is working on the energy utilization and interaction of multispecies of fish. The other four are working on the effect of low pH on the physiology of freshwater fishes. </body> </html> This is the same HTML document but the heading has been removed PROLOGUE: A prologue is only comment which can tell about the HTML version that is adopted for preparing the document. A prologue is shown as follows. < ! Doctype HTML 3.0 >
  • 24.
    24 LINKS: The link tagcan be used for the following purposes.  To inform the browser of the previous document  To inform the browser of the next document  To link the banner  To inform the location of the base document location Previous and Next The HTML document can be placed in between two old HTML documents using a link tag. Suppose we want to assign an HTML document “dept, html” as the previous document and “family.html” as the next document. We define it as follows. <HEAD> <TITLE> DR C.XAVIER </TITLE> <LINK REL = PREVIOUS HREF = “DEPT.HTML”> <LINK REL= NEXT HREF=”FAMIL.HTML”> </HEAD> If we define it in this way, whenever we open this HTML document using a browser, the back button of the the tool bar opens the document dept.html and the next button open the document family.html. <LINK REL= HOME HREF=”COLLEGE.HTML”> The above statement assigns college.html for the home button of the tool bar. Banner A banner is a fixed part of the page that will stay on the screen when we scroll the text of the page. The emblem of a college, logo of a company or the name of a company can be a banner. The banner must be prepared as a separate HTML document and it must be linked as a banner to the document. For example, suppose emblem.html is an HTML document which shows the emblem of a college. We can link it to an HTML document in the header section as follows. <HEAD> <TITLE> DR C.XAVIER </TITLE> <LINK REL = PREVIOUS HREF = “DEPT.HTML”> <LINK REL= NEXT HREF=”FAMIL.HTML”> <LINK REL= HOME HREF=”college.html”> <LINK REL= BANNER HREF=”emblem.html”> </HEAD> Base Element The base element in the head section informs the browser the location where all the base documents are available. This is similar to defining the path in a DOS operating system. Suppose we define the following in the head section <BASE HREF =”http://www.xavier.edu”>
  • 25.
    25 Hereafter, whenever wedefine an anchor, we can simply give the document file name and the system will search only in the location http://www.xavier.edu COLORFUL WEB PAGE People have been appreciating anything only if it is colorful and neat. A web page can also be made colorful by using three attributes in the <body> tag. They are  Background design  Background color  Text color Background The background of the web page can be designed using any picture available in bmp format, gif format. Suppose, we specify a body of the page using a <body> tag shown as follows <body src= “acrade.bmp”> The background of the page will be tiled using the picture of “acrade.bmp” Example:1 <html> <head> <title>background testing</title> </head> <body background=" Flowers.bmp"> <h1> St Xavier's College<h1> </body> </html> The output is shown in the following figure. Example:2 <html> <head> <title>background testing</title> </head> <body background=" mm54.jpg"> <h1> St Xavier's College<h1> </body> </html>
  • 26.
    26 Colors Any color isa combination of three basic colors, namely: • Red • Green • Blue In HTML, each of the above colors has a degree from 00 to FF in hexadecimal form. So it permits 256 degrees for each basic color (because FF in hexadecimal form is 255 in decimal form and 0 to 255 gives 256 degrees). If we assign the colors as: Red = FF(full) Green=00(empty) Blue=00(empty) Then the resulting color is red. So the color red has its color string “#FF0000”. A color string is got by the degrees of the colors red, green, and blue, preceded by the symbol. So, the color strings are #000000 #000001 #000002 ……………………… #0000FF #000100 #000200 ……………………… #00FFFF #010000 ……………………… #FFFFFF The basic colors red, green, and blue have 256 degrees each, so we can create 16,777 216 different colors strings, as 256 X 256 X 256=16,777 216. The color string is given within double quotes. Green will get the color string “#0000FF”. other colors can be got by properly mixing the three colors and choosing the color string. The following table shows the color strings for some common colors.
  • 27.
  • 28.
    28 Background Color The backgroundcolor of the web page can be selected by assigning the color string to the bgcolor attribute of the body tag. Suppose we want our web page background color to be magenta. The color string for magenta is “#FF00FF”. so we write the <body> tag as <body bgcolor = “FF00FF”>. Text Color The color of the text in the web page can be selected by assigning a color string to the text attribute of the web page. Suppose we want our text appear in pink color. The color string for pink color is “#BE8F8F”, so we can assign for the text attribute in the <body> tag as follows. <body text = “#BE8F8F”> Link Colors In the web page hot texts (links) will appear in a different color. When we open a web page, several links may appear in a page. By clicking the hot text we will visit the linked document. In order to distinguish between the links which have been visited already (visited link “vlink”), the link which we are now visiting (active link “alink”) and those not yet visited (“link”), we can assign three different colors for the hot texts. These colors can be assigned using the attributes link, alink and vlink of the body tag. So a body tag may look like the one as follows. <body bgcolor=”#FF0000” text=”#00FF00” link=”#AAAA00” vlink=”#AA00AA” alink=”#00AAAA”> This body tag defines the following five colors: The background color is #FF0000” The text color is ”#00FF00” The link color is ”#AAAA00” The visited link color is ”#AA00AA” The active link color is ”#00AAAA” COMMENT LINES HTML programming language has the facility to include comment lines for the reference of the programmer. The comment will not appear in the web page. We include comments using the <! >. The general format is: <! Comment …..> Example <! This file was created by Mr.X himself on his own multimedia Pentium computer> <! This part of illustrates the product profile of the company> Some sample html documents In this section, some sample HTML documents are presented for reference. The outputs are also shown for immediate understanding of the HTML codes.
  • 29.
    29 Sample 1 Consider thefollowing HTML document <html> <head> <title>nataraja stores</title> </head> <body bgcolor=#aabb00 text=##RR00FF background=" flowers.bmp"> <h2>Nataraja stores</h2> <hr> <br> M/s Nataraja Stores is situated at 239, Tiruchendur Road, Palayamkottai. The firm was established in the year 1982. This firm is very popular by its goodwill for reliable, good quality building materials at reasonable prices. This firm's sister concern, M / s A.M.A.A.T. Nataraja Nadar Shining Stores, Tirunelveli Junction, was established in 1947 , the year of Indian Independence. <br> </body> </html> The output of this document on the web page is shown as below. A Sample Page of a Background Design Sample 2 Consider the following HTML document <html> <head> <title> Prakash</title> <! this file was created by Mr.Prakash himself on his own multimedia Pentium computer> </head> <body bgcolor=#yyff00ff text=##yy00gg> <h1>K.P.Rathina Prakasam</h1> <hr> <br>
  • 30.
    30 K.P.Rathina Prakasam isa businessman. He is the Managing Partner of <a href = "Nataraja stores.html">M/s Nataraja Stores </a> Palayamkottai. His firm deals with hardware and paints. The firm handles wholesale and retail sale of quality building materials including <a href = "Berger Paints.html"> Berger Paints</a> at reasonable and competitive prices to the customers. <br> </body> </html> The output of the above HTML document on the web appears as shown in figure CONCLUSION This Unit covers the concepts of designing a HTML Web page, HTML Document, Anchor Tag, Head and Body Section, Title Prologue Links and Comment Lines. A large number of examples have been provided for all. REVIEW QUESTIONS: 1. Prepare a two-paragraph text about your house. In this paragraph, mention that your house has a garden, a drawing room, two bedrooms, etc. Develop an HTML document which displays these two paragraph in such a way that the world garden, drawing room, Kitchen etc. are bot texts. Prepare HTML documents “garden .html” , “drawing room.html”, etc, to describe the respective rooms. In the description, write about the attributes of the room. For example, if a television is in the drawing room, mention that in such a way that television. Figure illustrates the format for a house. 2. Develop an HTML document which displays your names as an <b1> heading and displays the name of any four of your friends. Each of your friends names must be a hot text. When you click a friend’s name, it must open another HTML document, which tells about your friend. 3. Write the names of several countries in a paragraph and store it as an HTML document, “world.html”. Each continents name must be a hot text. When you click Europe, it
  • 31.
    31 should open afile called “Europe.html”. So prepare “Europe.html”, “America.html”, “Africa.html”, “asia.html” and “Australia.html”. Each of the HTML documents must give a brief introduction of the continent and list a few important countries in it. Each countries in must be a hot text. When you click India (for example), it must open “India.html”. 4. Write a note on color combinations and designing colors using the three basic colors. 5. Explain the prologue and its uses in HTML documents. 1. Illustrate the use of the <title> tag in HTML documents. 2. What are the uses of <meta> tags in the head section? 3. Explain the method of assigning a background design for a document. 4. What is the use of the text attribute in the <body> tag? 5. Explain the various attributes of the <body> tag. 6. Design a document describing you. Assign a suitable background design, background color 7. and a text color. 8. Write a note on banners. 9. Write a note on link attributes in the header section. 10. Explain comment Lines with examples.
  • 32.
    32 UNIT III DESIGNING THEBODY SECTION OBJECTIVE: To describe the Designing aspects of the Body Section, Heading, Printing, Horizontal Rule, Tags and List DESIGNING THE BODY SECTION Heading Printing H is the element name that stands for "Heading". There are 6 levels of Headings being 1 the biggest and 6 the smallest Heading. Headings are block-level elements and like most other elements, a Heading is composed with an Opening Tag, the content and a Closing Tag, hence the HTML code for a level 1 Heading would look like this: Example 1 <h1> This is a H1 headline</h1> And here are all the 6 different heading levels together Example 2 <h1>H1 - the biggest headline</h1> <h2>H2 - smaller than H1</h2> <h3>H3 - smaller than H2</h3> <h4>H4 - smaller than H3</h4> <h5>H5 - smaller than H4</h5> <h6>H6 - the smallest headline</h6> Example 3 <! DOCTYPE html> <html> <head> .</head> <body> <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h1> </body> </html>
  • 33.
    33 Comments in HTML Sometimesit´s very useful to include comments inside the HTML code which allow as keeping a better view of our document´s structure. Especially large documents can become pretty confusing when they contain a lot of different codes. Comments can be also useful to place instructions inside the HTML code of website templates in order to make it easier for a user to understand the structure of a template. Other uses for comments are to temporarily hide content from being displayed on our web pages A comment starts with "<!--" and ends with "-->" and all its content is not displayed when the document is viewed in a browser. A comment may basically contain any text and code, except " -- ". <! -- I am a comment --> ALIGNING THE HEADING Attribute for <H# ...> ALIGN = LEFT | RIGHT | CENTER | JUSTIFY ALIGN aligns the header LEFT, CENTER or RIGHT. LEFT is the default. <H1 ALIGN=LEFT>My Resume</H1> <H1 ALIGN=CENTER>My Resume</H1> <H1 ALIGN=RIGHT>My Resume</H1> produces There is a JUSTIFY value, which only applies if the text in the header is so long it must wrap to the next line. If this happens, your header is probably too long: <H1 ALIGN=JUSTIFY>Starflower’s Wild Spectacular Awesome Wonderful Bitchin' Happenin' Cool Neat-o-Keen-o Superb Thunderous Sprightly Spry Magnificent Spunky Liberated Kind- Hearted Flowery Web Page! </H1> It produces Starflower’s Wild Spectacular Awesome Wonderful Bitchin' Happenin' Cool Neat-o- Keen-o Superb Thunderous Sprightly Spry Magnificent Spunky Liberated Kind-Hearted Flowery Web Page! My Resume My Resume My Resume
  • 34.
    34 HORIZONTAL RULE Horizontal Ruleis simple lines used to divide different parts of a webpage. To create a Horizontal Rule, the stand-alone element hr is used. The simplest horizontal line is formed by "< hr >", which creates a 100% wide and 1 pixel thick line. The default color is grey, the default style "groove" and the default alignment is centered. To change thickness, alignment, width and style of the horizontal rule, you may use certain attributes inside the hr tag, such as size (for thickness in pixels), width (for the length), align (for the alignment) and noshade (for the style). These attributes may take the following values align: left / right / center size: an integer number width: integer number or percentage no shade: no values Example <hr> <hr width="500" size="15"> <hr width="50%" align="left" size="5" noshade> Escaping Special Characters There are certain characters which have special functions in HTML, for example the angle brackets "<" (the "less than" sign) and ">" (the "greater than" sign), which are used for HTML Tags, and the double quotation marks ("), which are used to delimit the values of attributes. Also, there are many special characters that cannot be easily entered on a keyboard, such as the copyright or trademark symbols (© ® ™) and those characters that cannot be expressed in the document´s character encoding, for example foreign currencies like Yen (¥) and Euro (€) or foreign letters (ç, ã, α, ω, β, δ). So if you want to use these characters inside your text, you need to "escape" (= encode) them using the so-called character entity references, or entities for short. Entities are case- sensitive and take the following form: &entity; (ampersand, entity name, and semicolon) Here are some of the most commonly used entities.
  • 35.
    35 There are twomain uses for the character entity &nbsp; (= non breaking space). As the name implies, it creates blank spaces that prevent line breaks. So if you have words in the text of your webpage that you do not want to be separated because it would negatively affect the text flow, then you would use &nbsp; between these words instead of a regular blank space. Another use is to separate single words with more than just one space. As you already know, all the white space and blank lines between single words inside your HTML code are merged together into one by the web browsers. So if you have certain places where you would like to have more white space before, behind or between words, then you could also use one or more occurrences of the &nbsp; entity. PARAGRAPHS Most of the text on your webpage will be embedded in paragraphs. For this purpose you will be using the p element. The example below shows two paragraphs. Example <p>This is a paragraph. It begins with an opening tag, .... </p> <p>There is always a blank line between two paragraphs. </p> Elements for Text Formatting From the different text formatting options you have, a few basic ones are done by using special elements. All these elements are composed with an opening tag, the content to be formatted and a closing tag. You can see the most frequently used ones in the table below, their names, their effects on text and how the HTML code for the display example looks like. The Correct Nesting of Elements Before you start experimenting with the elements above, you should learn how to correctly "nest" different elements, i.e. writing the opening and closing tags of the HTML elements in the right order when you put several ones inside another.
  • 36.
    36 Below are twolines of HTML code. In the first line, the inline element B is correctly nested inside the block-level element P, the two inline elements STRIKE and U are correctly nested inside B and the inline element BIG is correctly nested inside U. Although the second line is invalid HTML code, most web browsers would still display it correctly as you can see in the display example. Example <p>Buy now for <b><strike>37 $</strike> <u><big>only 19.95</big></u></b></p> <p>Buy now for <strike><b>37 $</strike> <big><u>only 19.95</b></u></big></p> This is illustrated in the following figure. TABS Horizontal Tabs Permitted Context: %text Content Model: Empty! The TAB element can be used when you want fine control over the horizontal positioning. The TAB element is used with the <tab id=name> attribute to define named tab stops. Subsequently, you can use the TAB element with the <tab to=name> attribute to move to the previously defined tab stop. This approach avoids the need to know the font metrics in advance. The TAB element, together with style sheets, allows conversion software to preserve layout information when importing documents created with conventional word processing software. For example: <p><b>noct<tab id=t1>ambulant</b> - walking at night<br><tab to=t1>(from Latin: <i>nox noctis</i> night + i> ambulare </i> walk) which is rendered as: noctambulant - walking at night (from Latin: nox noctis night + ambulare walk) The tab stop name (t1 in the example) should be unique within the current document and composed from an initial letter followed by letters, digits or hyphens. Sometimes, you want to make the remainder of the line flush right while leaving the earlier words unmoved. This is possible with the align attribute. For example: Left part of line<tab align=right>and right part of line which is rendered as Left part of line and right part of line.
  • 37.
    37 FORMATTING Formatting Characters In theweb page, the characters can be made Bold, Italics, etc by using some html tag. There are two methods of formatting characters.  Logical styles  Physical styles  The logical styles inform the browser what kind of text to present. Logical Style Tags: Physical Style Format The physical style format tags explicitly inform the browser how the characters must be shown. Bold, italics etc. The physical style tags are shown in the following table. The <sub> and <sup> tags are used to represent mathematical and chemical formulae. Formula: Y =x2+y2+xasiny This can be represented in HTML as follows. Y=X<sup>2</sup>+Y<sup>2</sup>+X<sup>a siny </sup> Consider the expression Pnew = Pold+ x2 – yacosx
  • 38.
    38 Here the HTMLCode is P<sub> new</sub>= P<sub>old</sub>+x<sup>2</sup>-y<sup>acosx</sup> Font Tag The font tag is used to set a specific font size. It has two attributes namely face and size. Example <font face = Arial size =25> Welcome <font> This causes the message “Welcome” to appear in Arial Font with Size=25. In Relative size, inform the browser to increase or decrease the usual size. Suppose we write <font size=+3>Department of Computer Science <font> The heading “Department of Computer Science” appears in the size which is three more than the normal size. If the normal size is 12 points, this text will appear in 15 points. Base Font At the beginning of the document, the default font size for the entire page can be selected using the <basefont> tag. For example, consider the tag shown below <base font face= Arial size=16> This statement specifies Arial 16 points for the entire document. Notice that the <basefont> tag has no corresponding end tag such as </basefont> Preformatting Text The text without any change can be typed using the <pre> <pre> tag pair. The text or symbol between <pre> and </pre> appear as they are in the page. Special Characters Special Characters such as <, >, etc, can be included in the web page using escape codes which begin with the ampersand(&) symbol. The ampersand symbol must be followed by the mnemonic keyword for the symbol. Some mnemonic symbols are shown in the following table. Instead of mnemonic code, the ASCII code of the symbol may also be given in the HTML code.
  • 39.
    39 IMAGES AND PICTURES Theimg element Example Program <!DOCTYPE html> <html> <head> . </head> <body> <img src= “ ”width=“ ”height=“ ”alt=“ ”> </body> </html> The <img> element, like most elements, is a container. It is not an image in and of itself, but a receptacle for one. Just as the p element holds a paragraph, the img element holds an image. However, it does so in a entirely different way. Most notably, the image is a separate file that loads into the space created by the img element. There are three types of image files used in HTML, indicated by different filename extensions: .jpg, .gif and .png (also known as JPEGs, GIFs and PINGs); Let's first take a look at what is used to display the image below. Note that there is no closing tag. It's one of the few elements that doesn't use them. <img src="images.jpg" class="flr" alt="Lake Atitlan, Guatemala" width="300" height="240"> The "src" or source attribute tells the browser what image (ie. image file) goes in the tag and where to find it. The "alt" attribute refers to alternative text. While the "height" and "width" are not required, they are highly recommended. The align attribute specifies the alignment of the picture. The possible alignments are shown in the following table. Picture Alignments
  • 40.
    40 In the sourceattribute there are two ways to show what is known as the "path" to the image file: The "absolute path": <img src="http://www.html-5-tutorial.com/images/atitlan.jpg" ... The "relative path": <img src="images/atitlan.jpg" ... Example <img src="../images/family.jpg" alt="family picture"> <br> <img src="../images/baby.jpg" width="241" height="257" alt="baby picture" border="0"> <img src="../images/flowers.jpg" width="199" height="258" alt="flowers" border="0"> Low Resolution Images Whenever the image given in the src tag is of high resolution, the browser takes some time to load the image file. It is possible to show an image of low resolution until the high resolution image is loaded. For example, suppose elephant.gif is a high resolution image file. We can also create another image of an elephant as a low-resolution image and call the file elephantlow.gif. Now we can instruct the browser to first display the fileelephantlow.gif and then to load and display the high resolution file elephant.gif. This can be accomplished by the lowsrc attribute of the <img> tag as follows <img src=”elephant.gif” lowsrc=”elephantlow.gif”> Specifying Width and Height Although src is the only truly necessary attribute in the <img> tag, a few others come strongly recommended. The width and height attributes simply indicate the dimension of the graphic in pixels, such as: <IMG SRC="star.gif" WIDTH="50" HEIGHT="50"> With this information, the browser can lay out the page before the graphics download. Without width and height values, the page may be redrawn several times (first without graphics in place, and again each time new graphics arrive). It is worthwhile to take the time to include accurate width and height information in the image tag. Resizing images If the values specified in the width and height attributes are different than the actual dimensions of the graphic, the browser resizes the graphic to match the specified dimensions. If you specify a percentage value for width and height, some later browsers resize the image to the desired proportions.
  • 41.
    41 Scaling an imagewith width and height attributes Although this effect can certainly be used strategically, as for resizing a single pixel graphic to hold a certain amount of space, it usually just results in a pixilated, poor image quality, as shown in above Figure It is better to resize images in a graphics program than to leave it up to the browser. Using width and height to preload images Preloading images refers to methods used for downloading images and storing them in cache before they actually need to be displayed on the page. One trick for preloading is to place the graphic on a page that will be accessed first (such as a home page), but with the width and height attributes set to one pixel. This causes the image to download with the rest of the page, but the only thing that will be visible is a one-pixel dot (which can be tucked away in a inconspicuous place). <IMG SRC="bigpicture.gif" WIDTH="1" HEIGHT="1"> Ideally, the image finishes downloading quietly and is stored in the browser's cache while the user is still reading the first page. The graphic should then pop into view instantly when the user links to the page where the image is displayed at its full size. Vertical Alignment The align attribute is used to control how the graphic is positioned in relation to the flow of the text. Vertical alignment controls the placement of the graphic in relation to points in the surrounding text (usually the baseline). The default alignment is bottom, which aligns the bottom of the image with the baseline of the surrounding text. The following Figure shows the result for the following code with no vertical alignment settings: <P>Star light <IMG SRC="star.gif"> Star bright.</P> Default (bottom) Alignment of Image with text The universally supported values for vertical alignment are top, middle, and bottom. Netscape Navigator introduced another (somewhat more subtle) set, which was then picked up for support in Internet Explorer 4.0. These are absbottom, absmiddle, texttop, and baseline (the same as bottom). The following Figure demonstrates the intended effects of each of these alignment values. The reality is slightly different. The absbottom value, for instance, seems to render the same as bottom, even in Navigator.
  • 42.
    42 Vertical alignment values HorizontalAlignment The align attribute can be used to align a graphic on the left or right margin of the page by using the values left or right, respectively. What makes the left and right alignment special is that in addition to placing the graphic on a margin, it allows the text to flow around it. The following figure shows how images are displayed when set to align to the left or right. Text wraps around images when they are aligned to the left or right Right Alignment without Text Wrap Using the align=right attribute to place a graphic against the right margin automatically results in text wrapping around the graphic. If you want to move it to the right without the wrap, put the image in a paragraph (<p>), then align the paragraph to the right, as shown here: <P ALIGN="right"> <IMG SRC="leaf.gif" > </P><P>An Oak and a Reed were arguing...</P> Adding Space Around Aligned Images When text flows around a graphic, it tends to bump up against the graphic's edge. Usually, it is preferable to have a little space between the graphic and the surrounding text. In HTML, this space is provided by using the vspace and hspace attributes within the <img> tag.
  • 43.
    43 The vspace (verticalspace) attribute holds a specified number of pixels space above and below an aligned graphic. Space to the left and the right is added with hspace (horizontal space). Note that space is always added symmetrically (both top and bottom, or on both sides), and it is not possible with these attributes to specify an amount of space along a particular side of the graphic (you can, however, do this with style sheets). The following figure shows an image aligned with the hspace attribute set to 12. Image alignment with horizontal spacing Stopping Text Wrap Text automatically wraps to fill the space along the side of an aligned graphic (or other inline object). To stop the text from wrapping and start the next line against the margin (instead of against the image), insert a line break tag (<br>) with the clear attribute. The clear attribute gives the browser directions on where to place the new line. It has three possible values: left , right, and all. If your graphic is aligned right, insert <br clear=right> to begin the text below the graphic against the right margin. For left-aligned graphics, use <br clear=left>. The <br clear=all> tag starts the text below the graphics on both margins (see Figure below ), so it may be the only value you'll ever need. Border for an Image To change the appearance of image borders, you need to use CSS (Cascading Style Sheets). You can include CSS in your images using the style attribute of the HTML img tag. You can use the HTML code on this page to determine image borders within your HTML document. Below are some examples of what you can do with HTML image borders. Solid Border img style="max-width:95%;border:3px solid black;" src="http:// www.quackit. com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href="/html/ tags/html_img_tag.cfm" > HTML <code> &lt;img&gt;</code> Tag</a>, <a ref="/ html/ tutorial/ html_ images.cfm" >HTML Images</a>, <a href= "/css / properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>
  • 44.
    44 Dotted Border <img style="max-width:95%;border:2pxdotted #545565;" src = "http://www. quackit.com/pix/ milford_ sound/milford_ sound_t.jpg" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href= "/html/ tags/html_img_ tag.cfm"> HTML <code> &lt;img&gt; </code> Tag</a>, <a href="/html /tutorial/html_images.cfm"> HTML Images</a>,<ahref="/css/ properties/css_ border.cfm ">CSS <code>border</code> Property</a>.</div> Grooved Border <img style="max-width:95%;border:6px groove #545565;" src="http:// www.quackit. com /pix/ milford_sound/ milford_sound _ t.jpg"alt ="Milford Sound in NewZealand" /> Double Border <img style="max-width:95%;border:6px double #545565;" src="http: //www. quackit.com /pix/ milford_sound /milford _sound_t.jpg" alt="Milford Sound in New Zealand" /> Ridged Border <img style="max-width:95%;border:6px ridge #545565;" src="http:// www.quackit.com / pix/milford_sound /milford_sound_t.jpg" alt="Milford Sound in New Zealand" />
  • 45.
    45 Dashed Border <img style="max-width:95%;border:6pxdashed #545565;" src="http:// www.quackit.com/pix /milford_sound/ milford_sound_t.jpg" alt="Milford Sound in New Zealand" /> LISTS AND THEIR TYPES Introduction Lists are another nice formatting tool for the content of our webpage. Definition Lists A definition list is usually used to create glossaries and has a little bit more complex structure than the two lists above. The basic code for a definition list is formed with the element DL and at least one element pair DT and DD. DT stands for Definition Term and contains the term to be explained and DD stands for Definition Definition and contains the definitio0n of the term. The content of DD is displayed indented relatively to the content of DT. DT may contain only text and inline elements such as B, I, U, SPAN, STRIKE. It may NOT contain block-level elements such as P and H1. DD may contain text, inline elements and may also contain block-level elements like P, H1, H2, OL, DL, TABLE. This allows for definition lists to be complexly nested, but don´t bother about this now as you probably won´t have a use for nested definition lists anyway. Here´s the basic code for a definition list. <dl> <dt> </dt> <dd> </dd> </dl> If a term has more than one definitions, you can also use more DD elements after he DT element, one for each separate definition: <dl> <dt> </dt> <dd> </dd> <dd> </dd> </dl>
  • 46.
    46 The most commonlyused list types are:  Unordered list - used to group a set of related items, in no particular order.  Ordered list - used to group a set of related items, in a specific order.  Description list - used to display name/value pairs such as terms and their definitions, or times and events. Each one has a specific purpose and earning they are not interchangeable. Unordered Lists Unordered lists, or bulleted lists, are used when a set of items can be placed in any order. An example is a shopping list:  milk  bread  butter  coffee beans These items are all part of one list, however, you could put the items in any order and the list would still make sense:  bread  coffee beans  milk  butter You can use CSS to change the bullet to one of several default styles, use your own image, or even display the list without bullets—we’ll look at how to do that in the Styling lists and links article. Unordered List Markup Unordered lists use one set of <ul></ul> tags, wrapped around many sets of <li> </li>:<code><ul> <li>bread</li> <li>coffee beans</li> <li>milk</li> <li>butter</li> </ul></code> Ordered Lists Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order. An example would be cooking instructions, which must be completed in order for the recipe to work: 1. Gather ingredients 2. Mix ingredients together 3. Place ingredients in a baking dish
  • 47.
    47 4. Bake inoven for an hour 5. Remove from oven 6. Allow to stand for ten minutes 7. Serve If the list items were moved around into a different order, the information would no longer make sense: 1. Gather ingredients 2. Bake in oven for an hour 3. Serve 4. Remove from oven 5. Place ingredients in a baking dish 6. Allow to stand for ten minutes 7. Mix ingredients together Ordered lists can be displayed with one of several numbering or alphabetic systems—that is, letters or numbers. The default in most browsers is decimal numbers, but there are more options: Letters  Lowercase ascii letters (a, b, c…)  Uppercase ascii letters (A, B, C…).  Lowercase classical Greek: (έ, ή, ί…) Numbers  Decimal numbers (1, 2, 3…)  Decimal numbers with leading zeros (01, 02, 03…)  Lowercase Roman numerals (i, ii, iii…)  Uppercase Roman numerals (I, II, III…)  Traditional Georgian numbering (an, ban, gan…)  Traditional Armenian numbering (mek, yerku, yerek…) Again, you can use CSS to change the style of your ordered lists. Ordered List Markup Ordered lists use one set of <ol></ol> tags, wrapped around many sets of <li></li>: <code><ol> <li>Gather ingredients</li> <li>Mix ingredients together</li> <li>Place ingredients in a baking dish</li> <li>Bake in oven for an hour</li> <li>Remove from oven</li> <li>Allow to stand for ten minutes</li> <li>Serve</li> </ol></code>
  • 48.
    48 Unordered Lists (BulletLists) An unordered list is formed with the element UL and contains at least one list element LI. So the very basic form of an unordered list would be. <ul> <li> </li> </ul> Here´s an example for an unordered list with some content. Example <p><b>1stPage2000</b> is my favorite free HTML editor. It makes creating webpages easy and fast because ...</p> <ul> <li>it uses different colors for different HTML elements so one gets a better view over a document´s structure.</li> <li>it has hotkeys for the quick insertion of tags.</li> <li>I can use pre-written HTML code snippets.</li> <li>it has a great, comprehensive HTML reference.</li> <li>it has many wizards for the speedy inclusion of tables, images, lists, links and other elements.</li> </ul> Ordered Lists (Bullet Lists) An ordered list is built with the element OL and also at least one list element LI. So the basic code for an ordered list looks like this: <ol> <li> </li> </ol> As said already, an ordered list uses ordinal numbers instead of bullets before each list item. Below is an example for an ordered list. <h1>Native American Ten Commandments</h1> <p> ( author unknown ) </p> <ol> <li>Treat the Earth and all that dwell thereon with respect.</li> <li>Remain close to the Great Spirit.</li> <li>Consider the impact on the next six generations when making decisions.</li> <li>Work together to benefit all humanity.</li> <li>Freely give help and kindness wherever needed.</li> etc ...</ol> Type Attributes Instead of numerals, we can have letters A, B, C…. or a, b, c…. etc, or roman letters in the ordering of the listed items. This is specified by the type attribute in the <OL> tag. The following are the symbols used the type attribute.
  • 49.
    49 Heading in aList It is possible to introduce Intermediate Heading using the <LH> tag of HTML. For example, consider the following text Bharathidasan University offers the following courses: Regular Courses • Mathematics • Bio Medical Sciences • Commerce Distance Education Courses • B.Sc Computer Science • M.Sc Computer Science • B.C.A • M.C.A In the above text regular courses and Distance Education Courses are called a Listed Headings. So the HTML code can be written as Bharathidasan University offers the following courses. <UL> <LH> Regular Courses<br><br> <LI> Mathematics <LI> Bio Medical Sciences <LI> Commerce <br><br> <LH> Distance Education Courses <LI> B.Sc Computer Science <LI> M.Sc Computer Science <LI> B.C.A <LI> M.C.A <br><br> </UL> NESTED LISTS A list item can contain another entire list — this is known as "nesting" a list. It is useful for things like tables of contents, such as the one at the start of this article: 1. Chapter One  Section One  Section Two  Section Three
  • 50.
    50 2. Chapter Two 3.Chapter Three The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks something like this: <code><ol> <li>Chapter One <ol> <li>Section One</li> <li>Section Two </li> <li>Section Three </li> </ol> </li> <li>Chapter Two</li> <li>Chapter Three </li> </ol></code> Note how the nested list starts after the <li> and the text of the containing list item (“Chapter One”); then ends before the </li> of the containing list item. Nested lists often form the basis for website navigation menus, as they are a good way to define the hierarchical structure of the website. Theoretically you can nest as many lists as you like, although in practice it can become confusing to nest lists too deeply. For very large lists, you may be better off splitting the content up into several lists with headings instead, or even splitting it up into separate pages. CONCLUSION: In this unit, the concepts of designing the body section and the detailed techniques have been explained with suitable examples. REVIEW QUESTIONS: 1. How do you align headings? What are the four types of alignments? Give examples. 2. Explain about horizontal rule. 3. What are the physical style tags? Tabulate them. 4. What are the logical Style Tag? Tabulate them. 5. Explain in detail about font tag. 6. List out the special characters which can be included in the web page. 7. Discuss about the concept of picture alignments. 8. How do you have border for an image. Explain with example. 9. What is List? What are the types? 10. How do you have heading in the List? 11. Specify about type attribute. Give a detailed account of nested lists. 12. Develop an HTML document to print the following
  • 51.
    51 SPECIAL FEATURES OFSOLAR HEATER SCHEME • System guaranteed for 2 years. • 100% depreciation allowed for tax payers. • Capital investment paid back within 3-4 years with cumulative energy savings. • Negligible maintenance requirement. • Soft loan facilities available from IREDA, IDBI and from nationalized banks. • Long life of the system (15-20 years) results in enormous life-time energy savings. • Non-polluting and non-depletable energy sources. 13. Write an HTML document to print the following. The family has the following facilities. 1. Own house  2400 square feet living area  Separate bungalow  Car shed available 2. Car  Maruti Omni van  Registration number TN 728195  1994 model 3. Farm  Coconut groves  35 acres  Mango groves 15.Write an HTML document to print the following. The library has the following cassettes. 1.Cinema • Bombay • I love you • Crazy Crazy • The Sun 2. Educational • Mathematics 1) Part I. Analytical Geometry 2) Part II. Calculus 3) Part III. Trigonometry 3. Cultural • Classical Music 1) M.S. Subalakshmi 2) Sreenivasa Iyengar 3) Yesudas 4) Thiagaraja Bhagavathar • Classical Dances 1) Bharata Natyam 2) Kuchupudi 3) Bhangra
  • 52.
    52 UNIT-IV TABLES AND FORMS OBJECTIVE: Thisunit introduces concepts of forms which provide the means to collect information from web clients. It also deals with frames which provide a way to divide the browser window in to smaller rectangles each of which can display a different document. The last section in this unit discusses about forms. TABLES Tables are common fixtures in printed documents, books, and, of course, Web documents. Tables provide a highly effective way of presenting many kinds of information. Table is an excellent way of presenting information, especially when a company wants to cite various prices for its services or products. For instance, some websites require users to sign up different levels of membership in order to access certain exclusive contents. They can present to users the distinct features that each level has to offer in a table-like format. Depending on the content, tables can be good for arranging many other kinds of data for deeper clarity other than pricing. Creating a table is easy, but organizing data in an easy-to-understand tabular format together with an appealing layout is often challenging. Most of us have came across numerous tables on the net, and some of these can be rather plain-looking ones with no or minimal design whatever. A table is a matrix of cells. The cells in the top row often contain column labels, those in the leftmost column often contain row labels, and most of the rest of the cells contain the data of the table. The content of a cell can be almost any document element, including text, a heading, a horizontal rule, an image, and a nested table. Components of Table:  Table caption  Table heading row  Rows and columns Example:
  • 53.
    53 Basic Table Tags Atable is specified as the content of the block tag <table> There are two kinds of lines in tables: the line around the outside of the whole table is called the border; the lines that separate the cells from each other are called ruler. A table that does not include the border attribute will be a matrix of cells with neither a border nor rules. The browser has default widths for table borders and rules, which are used if the border attribute is assigned the value "border". Otherwise, a number can be given as border’s value, which specifies the border width in pixels. For example, border = "3" specifies a border 3 pixels wide. A border value of "0" specifies no border and no rules. The rules are set at 1 pixel when any nonzero border value is specified. All table borders are beveled to give a three-dimensional appearance, although this is ineffective when narrow border widths are used. The border attribute is the most common attribute for the <table> tag. In most cases, a displayed table is preceded by a title, given as the content of a <caption> tag, which can immediately follow the opening <table>tag. The cells of a table are specified one row at a time. Each row of a table is specified with a row tag,<tr> . Within each row, the row label is specified by the table heading tag<th>. Although the <th>tag has heading in its name, we call these tags labels to avoid confusion with headings created with the <hx>tags. Each data cell of a row is specified with a table data tag,<td>. The first row of a table usually has the table’s column labels. For example, if a table has three data columns and their column labels are, respectively, Apple, Orange, and Screwdriver, the first row can be specified by the following: <tr> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr> Each data row of a table is specified with a heading tag and one data tag for each data column. For example, the first data row for our work-in-progress table might be as follows: <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> <td> 0 </td> </tr> In tables that have both row and column labels, the upper-left corner cell is often empty. This empty cell is specified with a table header tag that includes no content (either <th></th> or just <th />). The following document describes the whole table:
  • 54.
    54 Output The rowspan andcolspan Attributes In many cases, tables have multiple levels of row or column labels in which one label covers two or more secondary labels. For example, consider the display of a partial table shown in below Figure. In this table, the upper-level label Fruit Juice Drinks spans the three lower-level label cells. Multiple-level labels can be specified with the rowspan and colspan attributes. Two levels of column labels The colspan attribute specification in a table header or table data tag tells the browser to make the cell as wide as the specified number of rows below it in the table. For the previous example, the following markup could be used: <tr> <th colspan = "3"> Fruit Juice Drinks </th> </tr> <tr> <th> Apple </th> <th> Orange </th> <th> Screwdriver </th> </tr>
  • 55.
    55 If there arefewer cells in the rows above or below the spanning cell than the colspan attribute specifies, the browser stretches the spanning cell over the number of cells that populate the column in the table. The rowspan attribute of the table heading and table data tags does for rows what colspan does for columns. A table that has two levels of column labels and also has row labels must have an empty upper-left corner cell that spans both the multiple rows of column labels and the multiple columns. Such a cell is specified by including both rowspan and colspan attributes. Consider the following table specification, which is a minor modification of the previous table: The above Figure shows a browser display of cell_span.html. The above Figure Display of cell_span.html: multiple-labeled columns and labeled rows. The align and valign Attributes The placement of the content within a table cell can be specified with the align and valign attributes in the <tr>, <th>, and <td> tags. The align attribute has the possible values left, right, and center, with the obvious meanings for horizontal placement of the content within a cell. The default alignment for th cells is center; for td cells, it is left. If align is specified in a <tr> tag, it applies to all of the cells in the row. If it is included in a <th> or <td> tag, it applies only to that cell. The valign attribute of the <th> and <td> tags has the possible values top and bottom. The default vertical alignment for both headings and data is center. Because valign applies only to a single cell, there is never any point in specifying center. The following example illustrates the align and valign attributes: The above figure shows a browser display of cell_align.html. The above figure shows Display of cell_align.html: the align and valign attributes.
  • 56.
    56 The Cell paddingand Cell spacing Attributes The table tag has two attributes that can respectively be used to specify the spacing between the content of a table cell and the cell’s edge and the spacing between adjacent cells. The cellpadding attribute is used to specify the spacing between the content of a cell and the inner walls of the cell—often, to prevent text in a cell from being too close to the edge of the cell. The cellspacing attribute is used to specify the distance between cells in a table. The following document, space_pad.html, illustrates the cellpadding and cellspacing attributes: The above figure shows a browser display of space_pad.html. The above figure shows Display of space_ pad. html Table Sections Tables naturally occur in two and sometimes three parts: header, body, and footer. (Not all tables have a natural footer.) These three parts can be respectively denoted in XHTML with the thead, tbody, and tfoot elements. The header includes the column labels, regardless of the number of levels in those labels. The body includes the data of the table, including the row labels. The footer, when it appears, sometimes has the column labels repeated after the body. In some tables, the footer contains totals for the columns of data above. A table can have multiple
  • 57.
    57 body sections, inwhich case the browser may delimit them with horizontal lines that are thicker than the rule lines within a body section. Colouring Cells Each cell can be assigned a background color using the bgcolor attribute. For example if we want a particular cell to have a red background color, the <td> tag must be given as follows. <td bgcolor= “#ff0000”> Consider the table shown in the below. It has three columns. If we want the first column to be red in color, the second in green and the third in blue, we must type the HTML document as follows. <table border=5 width=80%> <caption> Admission 1997-98</caption> <tr> <th bgcolor=#ff0000 align=center> Community <th bgcolor=#00ff00 align=right> Male <th bgcolor=#00ff00 align=right> Female <tr><td bgcolor=#ff0000 align=center> OC <td bgcolor=#00ff00 align= center >35 <td bgcolor=#0000ff align= center >15 <tr><td bgcolor=#ff0000 align=center> BC <td bgcolor=#00ff00 align= center >50 <td bgcolor=#0000ff align= center >45 <tr><td bgcolor=#ff0000 align=center> SC/ST <td bgcolor=#00ff00 align= center >65 <td bgcolor=#0000ff align= center >12 </table> FORMS The most common way for a user to communicate information from a Web browser to the server is through a form. Modeled on the paper forms that people frequently are required to fill out, forms can be described in XHTML and displayed by the browser. XHTML provides tags to generate the commonly used objects on a screen form. These objects are called controls or widgets. There are controls for single-line and multiple-line text collection, checkboxes, radio buttons, and menus, among others. All control tags are inline tags. Most controls are used to gather information from the user in the form of either text or button selections. Each control can have a value, usually given through user input. Together, the values of all of the controls (that have values) in a form are called the form data.
  • 58.
    58 The <form> Tag Allof the controls of a form appear in the content of a <form> tag. A block tag, <form>, can have several different attributes, only one of which, action, is required. The action attribute specifies the URL of the application on the Web server that is to be called when the user clicks the Submit button. The method attribute of <form> specifies one of the two techniques, get or post, used to pass the form data to the server. The default is get, so if no method attribute is given in the <form> tag, get will be used. The alternative technique is post. In both techniques, the form data is coded into a text string when the user clicks the Submit button. When the get method is used, the browser attaches the query string to the URL of the HTTP request, so the form data is transmitted to the server together with the URL. The browser inserts a question mark at the end of the actual URL just before the first character of the query string so that the server can easily find the beginning of the query string. The get method can also be used to pass parameters to the server when forms are not involved. (This cannot be done with post.) One disadvantage of the get method is that some servers place a limit on the length of the URL string and truncate any characters past the limit. So, if the form has more than a few controls, get is not a good choice. When the post method is used, the query string is passed by some other method to the form-processing program. There is no length limitation for the query string with the post method, so, obviously, it is the better choice when there are more than a few controls in the form. There are also some security concerns with get that are not a problem with post. The <input> Tag Many of the commonly used controls are specified with the inline tag <input>, including those for text, passwords, checkboxes, radio buttons, and the action buttons Reset, Submit, and plain. The one attribute of <input> that is required for all of the controls discussed in this section is type, which specifies the particular kind of control. The control’s kind is its type name, such as checkbox. All of the previously listed controls except Reset and Submit also require a name attribute, which becomes the name of the value of the control within the form data. The controls for checkboxes and radio buttons require a value attribute, which initializes the value of the control. The values of these controls are placed in the form data that is sent to the server when the Submit button is clicked. A text control, which we usually refer to as a text box, creates a horizontal box into which the user can type text. Text boxes are often used to gather information from the user, such as the user’s name and address. The default size of a text box is often 20 characters. Because the default size can vary among browsers, it is a good idea to include a size on each text box. This is done with the size attribute of <input>. If the user types more characters than will fit in the box, the box is scrolled. If you do not want the box to be scrolled, you can include the maxlength attribute to specify the maximum number of characters that the browser will accept in the box. Any additional characters are ignored. As an example of a text box, consider the following: <form action = ""> <p> <input type = "text" name = "Name" size = "25" /> </p> </form> Suppose the user typed the following line:
  • 59.
    59 Alfred Paul vonFrickenburger The text box would collect the whole string, but the string would be scrolled to the right, leaving the following shown in the box: ed Paul von Frickenburger The left end of the line would be part of the value of Name, even though it does not appear in the box. The ends of the line can be viewed in the box by moving the cursor off the ends of the box. Notice that controls cannot appear directly in the form content—they must be placed in some block container, such as a paragraph. This is because <input> is an inline tag. Now consider a similar text box that includes a maxlength attribute: <form action = ""> <p> <input type = "text" name = "Name" size = "25" maxlength = "25" /> </p> </form> If the user typed the same name as in the previous example, the resulting value of the Name text box would be as follows: Alfred Paul von Frickenbu No matter what was typed after the u in that person’s last name, the value of Name would be as shown. If the contents of a text box should not be displayed when they are entered by the user, a password control can be used as follows: <input type = "password" name = "myPassword" size = "10" maxlength = "10" /> In this case, regardless of what characters are typed into the password control, only bullets or asterisks are displayed by the browser. There are no restrictions on the characters that can be typed into a text box. So, the string "?!34,:" could be entered into a text box meant for names. Therefore, the entered contents of text boxes nearly always must be validated, either on the browser or on the server to which the form data is passed for processing, or on both. Text boxes, as well as most other control elements, should be labeled. Labeling could be done simply by inserting text into the appropriate places in the form: Phone: <input type = "text" name = "phone" /> This markup effectively labels the text box, but there are several ways the labeling could be better. For one thing, there is no connection between the label and the control. Therefore, they could become separated in maintenance changes to the document. A control and its label can be connected by putting the control and its label in the content of a label element, as in the following element: <label> Phone: <input type = "text" name = "phone" /> </label> Now the text box and its label are encapsulated together. There are several other benefits of this approach to labeling controls. First, browsers often render the text content of a label element differently to make it stand out. Second, if the text content of a label element is selected, the cursor is implicitly moved to the control in the content of the label. This feature is an aid to new Web users.
  • 60.
    60 Third, the textcontent of a label element can be rendered by a speech synthesizer on the client machine when the content of the label element is selected. This feature can be a great aid to a user with a visual disability. FRAMES Frameset Definition A set of frames in defined using the <frameset> tag which ends with the </frameset> tag. The <frameset> tag has two attributes.  Row or column frame  Size of each frame We must use the cols attribute. We must use the rows attribute. The sizes of the frames are mentioned in any one of the following units:  Pixel  Percentage  Fraction Pixel unit The pixel unit simply represents the number of pixels in each frame. Commas must separate the numbers. for example, consider the following: <frameset cols=”150,70,70”> ………… ………… </frameset> This definition creates three column-wise frames, with the first frame of 150 pixels width, the second of 70 pixels width. Percentage unit The percentage unit divides the window according to the specified percentages. For example, consider the frameset definition: <frameset rows=”70%,30%”> ………… </frameset> In the above definition,two row-wise frames are defined in the container.The first frame has 70 per cent of the container and the second one has 30 per cent of the container. If the total percentages is greater than 100,all percentages are scaled down. If the sum of the percentages is less than 100, the extra spaces are left out. Fraction unit Instead of using pixel of percentage units, we can use fraction units to represent the relative sizes of the frames. suppose we give the following. <frameset cols=”4*,4*,*,*”>
  • 61.
    61 ………… </frameset> Frame Definition The definitionof the frame is given using the<frame>tag.The<frame> tag may have any of the following attributes:  Source HTML address(SRC)  Name of the frame(NAME)  Margin width(MARGINWIDTH)  Scrolling button(SCROLLING)  Whether it can be resized Source HTML Address(SRC) The SRC attributes specifies the URL of the HTML document to be displayed in this frame. The URL is given in double quotes. Name of the frame (NAME) A frame is given a name to identify it when specifying the target of html documents.The name of the frame begins with an alphabetic letter.NAME=”contents” defines the name of this frame. Margin The MARGINWIDTH and MARGINHIGHT attributes specify the left,right,top and bottom margins to be maintained in the frame. The margins are maintained in number of pixels. Scrolling The scrolling attribute is used to describe whether the frame should base a scroll bar or not. If we specify SCROLLING=”YES”, a scrollbar is shown in the frame. If we specify SCROLLING + “NO”, the sroll bar does not appear in the frame. If we specify SCROLLING=”AUTO”, the browser decides whether a scroll bar is needed. If the content is more than the frame size, a scroll bar appears. No resize The NORESIZE attributes has no value to assign. If this is given, the frames is not resizable by the user. Example Suppose we want to define a frame with the following attributes values. <frame src=”contents.html” name = “frameone” marginwidth = 40 marginheight = 60 scrolling = “yes” noresize> Here the name of the frame is frameone.This frame will shoe the content of the HTML document “contents.html”.The left and right margins are defined as 40 pixels.The top and bottom margins are defined as 60 pixels. The frame will have a scroll bar. The user cannot resize the frame.
  • 62.
    62 Nested Framesets Suppose wewant to divide the window column-wise into three frames .The following frameset tags can do the division of the three frames column-wise <frameset cols=”20%,40%,40%”> ………… ………… </frameset> We want to divide the middle frame into two row-wise subframes of equal size . This can be done by another <frameset> tag as follow <frameset cols=”50%,50%”> ………… ………… </frameset> The overall frameset tag is nested with another frameset tag as follows. <frameset col= “25%,50%,25%”> <frame name=”leftframe” scrolling=”yes”> <frameset rows=”50%,50%”> <frame name=”topframe” scrolling=”yes”> <frame name=”bottomframe” scrolling=”yes”> </frameset> <frame name=”leftframe” scrolling=”yes”> </frameset> Suppose each frame is assigned an HTML source as follows. Frame Source Leftframe birds.html Rightframe contents.html Topframe animals.html Bottomframe fruits.html The complete HTML document is shown as follows. <frameset col= “20%,40%,40%”> <frame name=”leftframe” src=” birds.html”> <frameset rows=”50%,50%”> <frame name=”topframe” src=” animals.html”> <frame name=”bottomframe” src=” fruits.html”> </frameset> <frame name=”rtframe” src=” contents.html”> </frameset>
  • 63.
    63 CONCLUSION: This unit comprisesof the concepts of table handling, frames and forms. All the features in tables, frames and forms have been well illustrated with all related techniques. REVIEW QUESTIONS: 1. What are tables? Give example. 2. How do you create table in html? 3. What are the components of table? Give example. 4. Why do you need table tags? Explain. 5. Distinguish between rowspan and colspan Attributes. 6. Discuss about align and valign Attributes. 7. How do you create table in HTML? Explain with example. 8. Specify about Cell padding and Cell spacing Attributes. 9. Explain the concept of Colouring Cells. 10. Discuss about forms in detail. 11. What are frames? 12. Write a short note on Nested Framesets. 13. Write an HTML program to print your bio data in the following format. 14. Write an HTML program to print the following table
  • 64.
    64 15. Write aHTML program to print the following table. 16. Write an HTML Program to print the following table 17. Write an HTML Program to print the following table
  • 65.
    65 UNIT V DYNAMIC HTML OBJECTIVE: ThisUnit deals with the concepts of DHTML, Cascading Style Sheets, Defining Style Sheet etc. The method of linking a style sheet to an HTML document is also explained. Different types of style sheets namely internal style sheets, External Style Sheets and Multiple Style Sheets are also explained. DHTML Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997. DHTML allows scripting languages to change variables in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load. DHTML allows authors to add effects to their pages that are otherwise difficult to achieve. In short words: scripting language is changing the DOM and page style. DHTML is the combination of HTML, CSS and JavaScript. Dynamic HTML has the following features.  Style sheets  Absolute positioning  Multimedia effects  Database access facility  Dynamic fonts  Scripting Cascading Style Sheets Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. The language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications. What is CSS?  CSS stands for Cascading Style Sheets  CSS defines how HTML elements are to be displayed
  • 66.
    66  Styles wereadded to HTML 4.0 to solve a problem  CSS saves a lot of work  External Style Sheets are stored in CSS files Cascading Style Sheets, a new feature added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page. The term Cascading derives from the fact that multiple style sheets can be applied to the same Web page. HTML is used to structure content. CSS is used for formatting structured content. CSS was a revolution in the world of web design. The concrete benefits of CSS include:  control layout of many documents from one single style sheet;  more precise control of layout;  apply different layout to different media-types (screen, print, etc.);  numerous advanced and sophisticated techniques DEFINING STYLES A statement of the following format defines a style. Item (property: value) For example, consider the following H1 (font: “Times Roman”Bold 24pt; color: red) This statement tells us that all the H1 type headings must appear in Times Roman font, 24 point size, bold and in red color. Consider the following. A (color: red; text-decoration: blinking) This informs the browser that all the hypertexts with anchors must appear in red color and they must also be blinking. Suppose we want any paragraph text to appear in Arial font, in 12-point size with a text indent of 0.5 inches, we can give the following statement in the style sheet. P (font: 12pt “Arial”; text-indent: 0.5in) Suppose we want to have a 1.5-inch left margin and a 1.5-inch right margin in the whole body of the page, we can specify this as follows in the style sheet. Body (marginleft:1.5in;marginright:1.5in) Further, if we want to define that the background color be while and the text color red, we write the following statement in the style sheet. Body(background:white;color:black; margin-left:1.5in; margin-right:1.5in) One or more statements defining the styles form a style sheet. For example, the following is a style sheet. body(font:14pt “Arial”; color:black; background:white) H1(font;24pt “Times Roman”, bold)
  • 67.
    67 P(font:12pt “Times Roman”) H4(font:20pt‘Times Roman”bold”) A(text-decorator: blinking;color:green) Elements of Styles Style usually define the following  Font name, size and style  Text indent  Margins (left and right)  Background and text color  Text alignment Font Assignments Whenever a font is to be assigned we define it as shown in the following example. Font: “Times Roman”4pt bold; We can also define it as follows. Font-size:14pt;font-name:”Times Roman”;font-weight:bold The point size is defined as an integer followed by “pt”. instead of defining the absolute font size, we can also define it in a relative manner. For example, we can define font-size=+2pt. This tells us that the style assigned is 2 pts more than the normal font size. If the normal font size is 12pts, then this will be assigned 14pts. Similarly, if we define font-size=-3pt, this will reduce the normal font size by 3pts.It is also possible to define the font size using the key words shown in Table. Key words for font sizes For example, consider the following fontsize: xx-large; This defines the font size to be very large. The browser takes care of the actual font size to be assigned.
  • 68.
    68 The font stylecan be defined as follows. font-style:italic; font-style:bold; font-style:normal; The weight of the font can be defined as follows. font-weight:bold; font-weight:bolder; We can use any of the following key words to define the font-weight. Normal Bold Bolder lighter MARGIN AND SPACE SETTINGS The margins, text indent and other space settings are defined in any of the following units shown in the following table. Size units We can set the margins, indent and line height using the following attributes. The following are some examples. Margin-left: 0.5 in; Margin-right: 9 mm; Text-indent: 1.5cm; Key words for margins, indents and line height
  • 69.
    69 When the lineheight is more, we will get more line spacing. The following are some examples. line-height:3em; line-height:2I; line-height:1.5cm; Color It is possible to define two colors, one for the text and one for the background. The key word background is used to set the background color, and color is used to set the text color. Consider the following style definition. Body (background: white: color: blue) This style defines that the background be white in color and the text in blue. The popular colors white, red, orange , pink, yellow, etc, are all accepted key words to represent the respective colors. Text Alignment The text alignment can be defined using the text-align attribute. The values may be left, right, and center or justified. The following are some examples. text-align: left; text-align: right; text-align: center; text-align: justify; Having seen the elements of style sheets, let us now see how a style sheet with HTML documents. Linking a Style Sheet to an HTML Document There are three methods of defining and linking styles to an HTML, document. They are as follows.  In-line style  External style sheet  Internal style sheet In the case of in-line style, the style attribute defines a style within any of the tags such as <h1>tag, <p>tag, etc. This is not very useful, because the style applies only to the defined location. Internal and external style sheets are used widely in web page design. In-Line Styles In the in-line style, the type style is defined within the body of the HTML document itself. For example, in the paragraph tag <p> we can specify the style as follows. <p style = “font: “Arial” 18pt”> The Society of Jesus (the Jesuits) is a worldwide organization of religious men, numbering about 22 500 spread all over the world, of whom over 3000 are working in 14 <a href = provinces.html>prov-inces </a> of india
  • 70.
    70 </p> <p style= “font: “Times roman” 13pt”>In <ahref = tamilnadu.html> Tamilnadu</a>alone there are around 500 Jesuits working in schools and colleges, youth services and social work centers, in parishes and in mission out-reach programs and in almost any and every form of service and ministry of the church. </p> The complete document is as follows. <html> <head> <title> In-line style illustration </title> </head> <body> <h1 style =”font: 24pt “ Arial” BOLD”> <hr> <p style = “font : Arial” 18pt”> The Society of jesus (the Jesuits) is a worldwide organization of religious men, numbering about 22 500 spread all over the world, of whom over 3000 are working in 14 <a href = provinces.html> provinces </a> of india. </p> <p style = “font : “Times Roman” 13pt”> In <a href = tamilnadu.html> Tamilnadu </a> alone there are around 500 jesuits working in schools and colleges, youth services and social work centers, in parishes and in mission out- reach programs and in almost any and every form of service and ministry of the church. </p> The complete document is as follows. <html> <head> <title> In-line style illustration </title> </head> <body> <h1 style = “font: 24pt “Arial” BOLD”> <hr> <p style = “font: “Arial” 18pt”>
  • 71.
    71 The society ofjesus(the Jesuits) is a worldwide organization of religious men, numbering about 22500 spread all over the world, of whom over 3000 are working in 14 <a href = provinces.html> provinces</a> of india </p> <p style = “font: “Times new roman” 13pt”> In <a href=tamilnadu.html> tamilnadu</a> alone there are around 500 jesuits working in schools and colleges, youth services and social work centers, in parishes and in mission out-reach programs and in almost any and every form of services and ministry of the church. </p> </body> <html> In the preceding example, the style is defined within a tag, For example,styles can be defined within the <p> tag, <h1> tag, <h2> tag, any heading tag, <hr> tag, <a> tag, etc. It is also possible to design a single style for a portion of the HTML document. For example, suppose we want to define a style for three paragraphs. Then we can define a style and make it span three paragraphs as follows. <span style = “text-indent: 4em; margin-left:10%; margin-right:15%> <h5> Department of Computer Science</h5> <p> the department of computer science is offering various courses such as B.Sc., PGDCA., M.Sc., and M.C.A., A well equipped laboratory and good library are there for the use of the students. </p> <h5> Department of Mathematics</h5> The department of mathematics is a very old department of this college. The department has undergraduate and post-graduate courses.</p> <h5> Department of Folklore</h5> <p> The folklore department is offering an M.A. degree course in Folklore. The Folklore Research and Resources Centre (FRRC) is an international research and resource centre attached to the folklore department</p> </span> External Style Sheets In case of an external style sheet, it is stored in a separate file. This style sheet can be linked to any number of HTML documents.
  • 72.
    72 HTML Document Consider thestyle sheet “exstyle.css”, which is shown below. Body{font:14pt “Arial”; color: black; background:orange} H1{font:12pt “Times Roman” bold} P{font:12pt “Times Roman”} H4{font 26pt “Times Roman” italics} A{text-decorator:blinking; color: green} The above style sheet has already been typed and stored in the file “exstyle.css”. This style sheet can be linked by the <LINK> tag of the header section as follows. <LINK REL=stylesheet href=”exstyle.css” type = “text/css”> The attribute rel=stylesheet inform us that this <LINK> tag is for linking a style sheet to the document. The href=”exstyle.css” informs that “exstyle.css” is the file name of the style sheet. Type=”text/css” informs us that the style sheet type is text/css. A complete HTML document “Jesuit. Html”, which uses this style sheet, is shown as follows. <html> <head> <title> The society of Jesus </title> <LINK REL = “stylesheet” href = “exstyle.css type = “text/css”> </head> <body> <h1> The Jesuits </h1> <p> The society of jesus (the Jesuits) is a worldwide organization of religious men, numbering about 22500 spread all over the world, of whom over 3000 are working in 14<a href=provinces.html> provinces </a> of india. In <a href = tamilnadu.html> Tamilnadu </a> alone there are around 500 jesuits working in schools and colleges, youth services and social work centers, in parishes and in mission out-reach programs and in almost any and every form of service and ministry of the church.</p> <h4>Jesuit education</h4> <p> Jesuit education in the Madurai province today draws its inspiration from two epoch-making statements, namely the vision statement and preamble to Jesuit higher education, that originated in the Madurai province meet of 1985. </p> </body> </html>
  • 73.
    73 Internal Style Sheets Inthe above example, we defined a style sheet file “exstyle.css” and three HTML documents, “Jesuits.html”, “provinces.html” and “tamilnadu.html”. they are linked as shown in figure. Notice that “tamilnadu.html” does not use the style sheet “exstyle.css”. Linking Style Sheets A style sheet can be defined fully in the header section with the <style> and </style tags> as illustrated in the figure. This way of defining style sheets is called an internal style sheet Internal style sheet In our example in the previous section, the same styles are to be followed for the file “provinces.html” also. So all the style sheet entries must be given in the “provinces.html” file too. Using the internal style sheet method, the files “Jesuits.html” and “provinces.html” are shown as follows. “Jesuits.html” <html> <head> <title> Society of Jesus </title> <style type=”text/css”> Body {font:14pt “Arial”;color:black;background:orange} h1{font:12pt “Times new roman” bold} P{font:12pt “Times new roman”} h1{font:26pt “Times new roman” italics} Exstyle. css Tamilnad u.html Jesuits.h tml Provinces. html Style sheet Head Body
  • 74.
    74 A{text-decorator:blinking;color:green} <style> <body> <p> The societyof Jesus (the Jesuits) is a worldwide organization of religious men, numbering about 22500 spread all over the world, of whom over 3000 are working in 14 <a href=provinces.html>provinces</a> of India. In <a href=tamilnadu.html> Tamilnadu</a> alone there are around 500 Jesuits working in schools and colleges, youth services and social work centers, in parishes and in mission out-reach programs and in almost any and every form of services and ministry of the Church. </p> </body> </html> “provinces.html” <head> <title> “Provinces.html” <head> </title> <style type=”textcss”> Body{font:14pt “Arial”;color:black;background:orange} H1{font:12pt “Times new roman” bold} P{font:12pt “Times new roman”} H4{font:26pt “Times new roman” italics} A{text-decorator:blinking;color:green} <style> <body> <h1> Jesuit Provinces<h1> <p> The Jesuit Community divides the Jesuit institutions into several provinces. For example, Madurai province includes all the institutions in Tamilnadu. The following colleges come under the Madurai Province: <h4> Madurai Province Colleges</h4> <UL> <LI> Loyola College, Chennai <LI> St Joseph’s College, Trichy <LI> St Xavier’s College, Tirunelveli
  • 75.
    75 <LI> St Xavier’sCollege of Education, Tirunelveli <LI> Arul Anandar College, Karmathur </UL> </body> </html> Multiple Style Sheet It is possible to define several styles for a tag. For example, consider the <H1> tag and the following statement. H1{font :24pt “Arial” bold} This defines that all the <H1> tags in the document cause printing in Arial 24 pt bold. However, it is possible to define two or more types of <H1> styles. Suppose that we want to define three types of <H1> styles with the names chapter, section and sub section. Suppose we want the following styles to be defined. Type of <H1>font style size Chapter Arial bold 24 Section Times bold 20 Subsection Times Italics 18 The style sheet entries will be as follows H1.chapter{font:24pt “Arial” bold} H1.section{font:20pt “times new roman” bold} H1.Subsection{font:18pt “Times Roman” italics} When we we use a particular type of style in the <h1> tag, we mention the type using the class attribute. For example, suppose we give the following statements in an HTML document. <h1 class=”chapter”> chapter2 java fundamentals</h1><br> <h1 class=”Section”> section 2.1 java operators</h1><br> <h1 class=”Subsection”> section 2.1.1 Binary operators</h1> <br> <h1 class=”subsection”> section 2.1.2 unary operators</h1><br> <h1 class=”subsection” > section 2.1.3 relational operators </h1><br.<h1 class =”section”> section 2.2 control structures</h1><br><h1 class =”subsection”> section 2.2.1 IF structure </h1> <br> <h1 class=”subsection”> section 2.2.2 Break statement</h1><br> <h1 class=”chapter”>chapter 3 loop structures </h1><br> In the above example, the following will appear as per the style defined in “H1.chapter”. That is, they appear in Arial 24 points bold as shown below. chapter2 java fundamentals chapter3 Loop Structures
  • 76.
    76 The following willappear as per the style defined in H1.section. Section 2.1 Java Operators Section 2.2 Control Structures That is, they appear in Times New Roman 20 points bold size. The following will appear as the style defined in “h1.subsection”. section 2.1.1 Binary operators section 2.1.2 unary operators section 2.1.3 relational operators section 2.2.1 IF structure section 2.2.2 Break statement That is, they appear in Times new roman 18 points italics. CONCLUSION With the use of the concepts mentioned in this chapter, one is able to design different style sheets. REVIEW QUESTIONS: 1. Explain how you will design a style. 2. Define a paragraph style with the font Helvetica, 14 points 3. Explain the elements of styles in detail. 4. Explain the relative definition of font sizes. 5. Explain the various units of measurement used to specify margins. 6. What are the three types of style sheets linking to HTML documents? 7. Illustrate the in-line style with a suitable example. 8. Illustrate the internal style sheet with a suitable example. 9. Illustrate external style sheet with a suitable example. 10. What are multiple styles? Illustrate with suitable examples.