Silesian University in Opava School of Business Administration in Karviné PORTAL AND ITS MANAGEMENT Klepněte sem a zadejte text. For the full-time study form Petr Suchánek Jan Górecki Karviná 2014 OP VK No. CZ.1.07/2.2.00/28.0017 Project „Innovation of study programes at Silesian university in Opava, School of Business Administration in Karvina“ Subject: Computer science. Annotation: Currently, web portals can be considered as a key interface in the Internet. Web portals can be used as the mere presentation of content, as well as for business purposes such as online shops, access to corporate information systems, management of branch offices, communication and management support content within the intranet, etc. This study textbook is focused on the presentation of web portals development using technologies such as HTML, PHP, MySQL and Apache local server. The primary objective is to familiarize students with the creation of dynamic web sites, methods of work with scripts and linking dynamic websites with databases. After studying study textbook, students will be able to create simple portal solutions that will function both, with using the local server, and within the web hosting. Key words: Web portal, script, database, web forms, data transmission. © Doplní oddělení vědy a výzkumu. Author: Doc. Mgr. Petr Suchánek, Ph.D. Ing. Jan Górecki Recenzenti: Doc. RNDr. Petr Šaloun, Ph.D. RNDr. Ing. Roman Šperka, Ph.D. ISBN Doplní oddělení vědy a výzkumu. - 3 - CONTENT INTRODUCTION.................................................................................................................... 7 1 WEB & INTERNET PORTAL ..................................................................................... 8 1.1 DEFINITION OF WEB PORTAL AND RELATED TERMS................................................................. 8 1.2 TYPES OF WEB PORTALS.......................................................................................................... 9 1.2.1 HORIZONTAL WEB PORTALS........................................................................................ 9 1.2.2 VERTICAL WEB PORTALS............................................................................................. 9 1.2.3 COMBINATION OF A HORIZONTAL AND VERTICAL WEB PORTAL.................................. 10 1.3 WEB PORTAL DEVELOPMENT ................................................................................................. 10 1.4 TOOLS AND TECHNOLOGIES FOR A WEB PORTAL DEVELOPMENT .......................................... 12 1.5 PSPAD ................................................................................................................................... 13 2 HTML ............................................................................................................................ 15 2.1 CHARACTERISTICS OF HTML ................................................................................................ 15 2.2 CHARACTERISTICS OF XHTML ............................................................................................. 15 2.3 FUNDAMENTAL DIFFERENCES BETWEEN HTML AND XHTML ............................................ 15 2.4 HTML TAGS AND ELEMENTS ................................................................................................. 15 2.5 HTML DOCUMENT................................................................................................................. 16 2.6 HTML ELEMENT SYNTAX ..................................................................................................... 17 2.7 HTML PARAGRAPHS AND LINE BREAKS................................................................................ 17 2.8 HTML HEADINGS .................................................................................................................. 18 2.9 HTML FONT .......................................................................................................................... 18 2.10 HTML LISTS........................................................................................................................... 20 2.11 HTML IMAGES....................................................................................................................... 22 2.12 HTML TABLES ....................................................................................................................... 23 2.13 HTML LINKS.......................................................................................................................... 27 2.14 FRAMES .................................................................................................................................. 29 2.14.1 CREATING FRAMES................................................................................................... 29 2.14.2 THE ELEMENT ATTRIBUTES................................................................ 30 2.14.3 LOADING CONTENT.................................................................................................. 31 2.14.4 THE ELEMENT ATTRIBUTES ..................................................................... 31 2.14.5 FRAME'S NAME AND TARGET ATTRIBUTES ................................................................. 31 2.15 FORMS.................................................................................................................................... 32 2.15.1 TEXT INPUT CONTROLS............................................................................................ 33 2.15.2 SINGLE-LINE TEXT INPUT CONTROLS ........................................................................ 33 2.15.3 PASSWORD INPUT CONTROLS.................................................................................... 34 2.15.4 MULTIPLE-LINE TEXT INPUT CONTROLS .................................................................. 34 2.15.5 CREATING BUTTON .................................................................................................. 35 2.15.6 CHECKBOXES CONTROL........................................................................................... 35 2.15.7 RADIO BOX CONTROL............................................................................................... 36 2.15.8 SELECT BOX CONTROL ............................................................................................. 36 2.15.9 FILE SELECT BOXES................................................................................................. 37 2.15.10 HIDDEN CONTROLS.................................................................................................. 37 2.15.11 SUBMIT AND RESET BUTTON .................................................................................... 37 3 CSS (CASCADING STYLE SHEETS)....................................................................... 39 3.1 CSS SYNTAX.......................................................................................................................... 39 3.2 CSS SELECTORS..................................................................................................................... 39 3.2.1 THE ELEMENT SELECTOR ......................................................................................... 39 3.2.2 THE ID SELECTOR .................................................................................................... 39 - 4 - 3.2.3 THE CLASS SELECTOR .............................................................................................. 40 3.2.4 GROUPING SELECTORS ............................................................................................ 40 3.3 WAYS TO INSERT CSS............................................................................................................ 41 3.3.1 EXTERNAL STYLE SHEET........................................................................................... 41 3.3.2 INTERNAL STYLE SHEET............................................................................................ 42 3.3.3 INLINE STYLES.......................................................................................................... 42 3.3.4 MULTIPLE STYLE SHEETS ......................................................................................... 42 3.4 CSS BACKGROUND ................................................................................................................ 43 3.4.1 BACKGROUND COLOR.............................................................................................. 43 3.4.2 BACKGROUND IMAGE .............................................................................................. 44 3.5 CSS TEXT............................................................................................................................... 45 3.5.1 TEXT COLOR ............................................................................................................ 45 3.5.2 TEXT ALIGNMENT..................................................................................................... 45 3.5.3 TEXT DECORATION .................................................................................................. 46 3.5.4 TEXT TRANSFORMATION........................................................................................... 46 3.5.5 TEXT INDENTATION.................................................................................................. 47 3.6 CSS FONT............................................................................................................................... 47 3.6.1 FONT FAMILY........................................................................................................... 47 3.6.2 FONT STYLE ............................................................................................................. 47 3.6.3 FONT SIZE................................................................................................................ 48 3.7 CSS LINKS ............................................................................................................................. 49 3.8 CSS LISTS .............................................................................................................................. 49 3.8.1 DIFFERENT LIST ITEM MARKERS.............................................................................. 49 3.8.2 AN IMAGE AS THE LIST ITEM MARKER...................................................................... 50 3.8.3 CROSSBROWSER SOLUTION ...................................................................................... 50 3.8.4 LIST - SHORTHAND PROPERTY .................................................................................. 51 3.9 CSS TABLES........................................................................................................................... 51 3.9.1 COLLAPSE BORDERS ................................................................................................ 51 3.9.2 TABLE WIDTH AND HEIGHT...................................................................................... 52 3.9.3 TABLE TEXT ALIGNMENT.......................................................................................... 52 3.9.4 TABLE PADDING ...................................................................................................... 52 3.9.5 TABLE COLOR.......................................................................................................... 53 4 PHP ................................................................................................................................ 54 4.1 INSTALLATION OF A LOCAL SERVER....................................................................................... 54 4.2 YOUR FIRST PHP PAGE........................................................................................................... 55 4.3 PHP BASICS ........................................................................................................................... 56 4.4 VARIABLES............................................................................................................................. 58 4.5 CONDITIONAL STATEMENTS .................................................................................................. 59 4.5.1 IF............................................................................................................................. 59 4.5.2 IF… ELSE................................................................................................................. 59 4.5.3 IF...ELSEIF....ELSE .................................................................................................... 60 4.5.4 SWITCH STATEMENT................................................................................................. 61 4.6 LOOPS..................................................................................................................................... 62 4.6.1 THE WHILE LOOP..................................................................................................... 62 4.6.2 THE DO...WHILE STATEMENT.................................................................................... 63 4.6.3 THE FOR LOOP......................................................................................................... 64 4.6.4 THE FOREACH LOOP ................................................................................................ 65 - 5 - 4.7 PHP FUNCTIONS..................................................................................................................... 66 4.7.1 PHP FUNCTIONS ..................................................................................................... 66 4.7.2 CREATE A PHP FUNCTION....................................................................................... 66 4.7.3 PHP FU NCTIONS – ADDING PARAMETERS ............................................................... 67 4.7.4 PHP FUNCTIONS - RETURN VALUES......................................................................... 68 4.8 ARRAYS.................................................................................................................................. 68 4.8.1 INDEXED ARRAYS ..................................................................................................... 69 4.8.2 GET THE LENGTH OF AN ARRAY - THE COUNT() FUNCTION...................................... 70 4.8.3 LOOP THROUGH AN INDEXED ARRAY ....................................................................... 70 4.8.4 ASSOCIATIVE ARRAYS ............................................................................................... 70 4.8.5 LOOP THROUGH AN ASSOCIATIVE ARRAY ................................................................. 71 4.9 PHP INCLUDE FILES............................................................................................................... 71 4.9.1 PHP INCLUDE AND REQUIRE STATEMENT................................................................. 72 5 FORM HANDLING USING PHP............................................................................... 74 5.1 PHP $_GET VARIABLE.......................................................................................................... 74 5.2 PHP $_POST FUNCTION ....................................................................................................... 75 5.3 PHP $_REQUEST FUNCTION ............................................................................................ 76 6 MYSQL.......................................................................................................................... 77 6.1 CREATE DATABASE................................................................................................................ 77 6.1.1 INTEGER VALUES ..................................................................................................... 79 6.1.2 TEXT TYPES.............................................................................................................. 80 6.1.3 CHAR...................................................................................................................... 80 6.2 CONNECT TO THEMYSQL SERVER ........................................................................................ 82 6.2.1 OPEN A CONNECTION TO THE MYSQL SERVER......................................................... 82 6.2.2 CLOSE A CONNECTION............................................................................................. 83 6.3 CREATE DATABASE AND TABLES .......................................................................................... 83 6.3.1 CREATE A DATABASE................................................................................................ 83 6.3.2 CREATE A TABLE...................................................................................................... 84 6.3.3 PRIMARY KEYS AND AUTO INCREMENT FIELDS......................................................... 85 6.4 INSERT INTO........................................................................................................................... 85 6.4.1 INSERT DATA INTO A DATABASE TABLE .................................................................... 85 6.4.2 INSERT DATA FROM A FORMINTO A DATABASE......................................................... 86 6.5 SELECT ................................................................................................................................... 87 6.5.1 SELECT DATA FROM A DATABASE TABLE.................................................................. 87 6.5.2 DISPLAY THE RESULT IN AN HTML TABLE................................................................ 88 6.6 THE WHERE CLAUSE ............................................................................................................. 89 6.7 ORDER BY KEYWORD ............................................................................................................ 90 6.8 THE UPDATE STATEMENT ...................................................................................................... 91 6.9 THE DELETE STATEMENT....................................................................................................... 92 7 USER REGISTRATION AND AUTHENTICATION.............................................. 94 7.1 USER REGISTRATION .............................................................................................................. 94 7.1.1 HTML – REGISTRATION FORM.................................................................................. 94 7.1.2 PHP SCRIPT FOR THE USER’S INFORMATION PROCESSING ........................................ 96 7.1.3 STORING THE INFORMATION INTO DATABASE............................................................ 97 - 6 - 7.1.4 PASSWORD ENCRYPTION........................................................................................... 98 7.2 USER AUTHENTICATION ......................................................................................................... 98 7.2.1 LOGIN FORM............................................................................................................ 98 7.2.2 AUTHENTICATION SCRIPT IN PHP ............................................................................ 99 SUMMARY........................................................................................................................... 105 THE LIST OF LITERATURE ........................................................................................... 106 - 7 - INTRODUCTION One of the subjects that is taught in the field of "Managerial Informatics", program of study "System Engineering and Informatics" at the Silesian University in Opava, School of Business Administration in Karviná is the subject of "Portal and its management A". This course as a free elective can be chosen by students of other fields of study. By monitoring of long-term interest, it is a popular subject for anyone interested in the issue of web pages respectively dynamic web pages and better web portals, which are now the primary communication interface in the Internet. Current tools and technologies are increasingly closer to users and even people with non-informatics education are able to create a quality website that can be used for personal or professional purposes. And this is one of the primary objectives of the course "Portal and its management”, in which students of field of study "Managerial Informatics" deepen your knowledge of dynamic websites and portals development and students of other disciplines, in our case related to economics, marketing, etc., penetrate into this issue and will get at least the basic knowledge and skills that they can, according to their own interests and needs, develop in the future. In terms of content, subject is focused on promoting practical activities. From this perspective, main goal of this study textbook is presentation of web portal development using HTML (HyperText Markup Language (or XHTML (eXtensible HyperText Markup Language)), and CSS (Cascading Style Sheets), development of web forms, insertion of dynamic elements in the form of PHP (Hypertext Preprocessor) scripts, creation a database in MySQL, and basic methods of communication of web portals with databases MySQL (transmission of values between databases and web forms). 1Web & internet portal - 8 - 1 WEB & INTERNET PORTAL If we start from the most general point of view, the term "portal" comes from the Latin porta (gate) and has a large number of meanings. Term “portal” can be used for example to describe architectural or other artistic features an ornate frame the entrance to major, usually public buildings such as the cathedral, exposed framing theatrical stage, which is suspended from a theater curtain, the entrance to a cave or other objects. In connection with the teaching of the subject “Portal and its management” we will discuss different meaning of this term in this text. We will address the issue called a web or internet portal. In this publication authors will, for reasons of uniformity and consistency of the text, use the term Web portal. 1.1 DEFINITION OF WEB PORTAL AND RELATED TERMS The web portal can be defined from different perspectives based mainly on technologies, areas of application, target groups and functions (Definitions 1 – 3) DEFINITION 1 As a portal in connection to information technology (IT) we consider web application that provides the user uniform and centralized information from various sources that the user is interested in or information relating to the user. Another definition says that: DEFINITION 2 Technically, the web portal is internet application connected to different data sources and working with him through an Internet browser. In terms of functionality, usability and target groups may be further web portal defined as a: DEFINITION 3 The web portal provides a secure and single point of interaction with diverse information, business processes and people adapted to the individual needs of particular users. To further refine the definition of 1-3, it is necessary to define the term web applications (Definition 4) and following this definition even the concept of a Web server (Definition 5). DEFINITION 4 In software engineering, web application is an application delivered to users from a web server over a computer network Internet, or its equivalent in-house (intranet). DEFINITION 5 5 a) The web server is a computer that is responsible for handling HTTP requests from clients - program called a web browser. Petr Suchánek, Jan Górecki; Portal and its Management - 9 - 5 b) The web server is a computer program that performs the activities described in the preceding paragraph (a demon). Web portals are primarily based on client-server communication (Definition 6). DEFINITION 6 The client-server is a network architecture, which separates the client (often an application with a graphical user interface), and a server who communicate over a computer network. Client-server describes the relationship between two computer programs in which the first program, the client requests the services of another program called the server. An example is a Web browser, ie the client program on the user's computer that can access information at any web server in the world (the Internet) (of course with regard to authorize access). 1.2 TYPES OF WEB PORTALS Web portals offer a wide range of services and information with possibilities of their customization according to personal needs and interests (personalization). In terms of services and focus on the target group, web portals are divided into three types, which are horizontal, vertical and combined. 1.2.1 HORIZONTAL WEB PORTALS Horizontal web portals contain broad thematic focus and are oriented to the widest possible audience. This category includes traditional web search engines, for example:  www.seznam.cz;  www.google.com;  www.centrum.cz;  www.atlas.cz;  www.volny.cz;  www.yahoo.com;  www.msn.com;  www.aol.com;  www.altavista.com;  www.go.com;  www.dogpile.com;  and other. 1.2.2 VERTICAL WEB PORTALS This type of web portals is aimed at a particular group of users (eg the community portals serve users in a particular region) or is oriented to a specific theme, again with the interests of certain groups of users. In terms of terminology this type of web portals is referred to as branch portals (vortals). As examples can be mentioned:  www.diit.cz;  www.statnisprava.cz;  www.itnews.sk;  management.blog.cz;  www.microsoft.com;  www.cd.cz;  www.vodafone.cz;  www.opf.slu.cz;  www.idos.cz;  and other. Vertical web portals can be also specifically divided into the following types: 1Web & internet portal - 10  Personal portals offering the option of personalizing the presentation and selection of information for its users (such as social networks, etc.);  Regional portals;  News portals;  Government portals;  Commercial and business portals;  Enterprise portals (often used as an intranet); 1.2.3 COMBINATION OF A HORIZONTAL AND VERTICAL WEB PORTAL As a special case of combined web portal we can present online stores that are oriented to different target groups (either a broad target group, or a narrow) and offer either specific products or a very wide range of products. For vertical portals is to be noted that the study text will not focus on the issue of enterprise portals, but only those which are created for the purpose of providing and sharing information on the Internet. Just for clarification we state that enterprise portals are viewed as a web page (usually dynamic web pages) that is used to improve the publishing and sharing of information within the company. Basically, the terms enterprise, business, or internal portal is used to describe an application called intranet or extranet. Corporate portals are typically built on content management systems of type ECM (Enterprise Content Management) that can aggregate data from multiple data sources. 1.3 WEB PORTAL DEVELOPMENT As result from the preceding text, web portals are in their concept of "dynamic web pages" presenting the user interface provides the user not only static content, but also a wide range of services, such as mail box, search, news in the mail, weather reports, discussion , chat, events calendar, catalogue and other sources. If we want to create a portal on their own or with help of an external supply, it is always necessary to conduct a detailed needs analysis based on a clear vision and strategy. Assumptions of the success of the project creating a web portal are:  Identifying the needs of potential portal users;  Specification of usability and user-friendliness;  Technological options;  Security;  Stability;  Reduction of technologies necessary for the functioning of the web portal;  Maximizing flexibility portal for the needs of ongoing changes, improvements and additions;  Timetable of portal development;  Financial budget;  The possibilities of web portal personalization;  The testing of usability and user-friendliness. In terms of development must be taken into account:  Usability - a visitor has to easily find the information for which the web has come. Particularly the contacts, the demand or ordering goods must be after hands;  Easy web site navigation - based on the above site usability. In particular the logical structure design and intuitive navigation for visitor; Petr Suchánek, Jan Górecki; Portal and its Management - 11  Web accessibility – it includes (not only) the technical requirements of such a significant and logical menu control of sites, alternative descriptions of images, font size, color references, etc.  Valid code - search engines are now very sophisticated indexing algorithms that can cope with inappropriate code, but not the only reason to complicate them the work. The basis is an orientation to the web site users. In seminars students will be create various projects in the form of web portals, respectively dynamic web pages. When you will create or manage web portal creation now or at any time later in practice, you should always follow some important principles that have become or are becoming standard and their applications in your semester projects can help you to try it in practice. In particular, the following list of basic principles relates to the above four areas:  Website content is accessible and readable: o Each non-text element carrying information has a text alternative; o Information provided via scripts, objects, applets, cascading style sheets, images and other accessories to the user are available without any of these accessories; o Information provided by colors are also available without color resolution; o Foreground and background colors are sufficient contrast. The background is not a sample which reduces the readability; o Regulations specifying the font size do not use absolute units; o Determining the type of font contain general font family.  Work with the website is managed by the user: o The web page content changes only when the user activates some elements; o Website without direct user command not manipulate the user interface; o New windows open only in justified cases and the user is warned in advance; o On the website, no blinking faster than once per second; o Website does not prevents the user from scrolling of frames; o Content or code of web pages does not even require a specific method of use or specific output or control devices.  Information is clear and understandable: o Website information are presented using simple language and understandable form; o Home website clearly describes the meaning and purpose of the site. Name of the website or its operator is clear; o Website and individual elements of the text content present the key message at the beginning; o Extensive content blocks are divided into smaller, aptly titled units; o Information disclosed under the Act are available as text content of a webpage; o A separate web page includes contact to technical support and a statement clearly defining the accessibility level of the site and its parts. Each page of the site refers to this website;  Website navigation is clear and understandable: o Each website has a meaningful name reflects its content; o Navigation and content information on the website are clearly separated; o Navigation is clear and consistent on all websites; o Each web page (except the homepage website) contains a link to a higher level in the hierarchy of the site and link to the homepage; o All websites contain extensive site links to a clear site map; o Content or code of web pages does not imply that the user has already visited another page; 1Web & internet portal - 12 o Each form element has a descriptive label assigned; o Each frame has a suitable name or description which expresses its meaning and function.  Links are clear and provide guidance: o The labeling of each link clearly describes its target without the surrounding context; o Just tagged links have the same goal; o Links are distinguished from other text, not only in color; o Side image maps are used only in the event that it was not possible with the available geometric shape defined areas in the image map. In other cases, image maps are used on the client side. An image map on the server side is always accompanied by alternative text links; o The user is clearly informed in advance when a link leads to a content type other than the website. Such a link is complemented by an information on the type and size of the target file;  The code is technically competent and structured: o Web page code corresponds to published final specifications of HTML and XHTML. It does not contain syntax errors, which is the webmaster can remove; o In the meta tags is specified used character set of document; o The elements making headlines and lists are correctly marked in the source code; Elements which do not headings or lists, while in the source code are not marked; o For a description of the appearance of the website are the preferred style sheets; o If a table is used for layout of the web site does not contain header of rows or columns. All tables displaying tabular data however the header rows and / or columns contain; o All tables make sense when read line by line from left to right. 1.4 TOOLS AND TECHNOLOGIES FOR A WEB PORTAL DEVELOPMENT For the development of a web portal it is possible to use a variety of technologies and tools we can use to creation of web pages with dynamic content. In terms of languages and scripting languages we can use HTML (HyperText Markup Language), XHTML (Extensible HyperText Markup Language), CSS (Cascading Style Sheets), Java Script, AJAX (Asynchronous JavaScript and XML (Extensible Markup Language)) PHP (Hypertext Preprocessor), JSP (JavaServer Pages), Java, Ruby, Python, Perl, ASP.NET, etc. They are now common languages that are mostly used in the latest versions, but in some cases the transition to a newer version usually does not cause any major problems. In this textbook we will use:  HTML or XHTML (the text using HTML with the fact that almost all codes correspond to the standard XHTML);  Local server Apache;  PHP;  MySQL. In terms of software support all the demos and examples will be implemented using PSPad and EasyPHP. In order to have right from the start interpreting test individual examples, in the preceding sentence above software PSPad will be first described. There is possible in this software without any supplements and other software, try the codes presented in Chapters HTML and CSS. Petr Suchánek, Jan Górecki; Portal and its Management - 13 - 1.5 PSPAD PSPad is a comprehensive text and code editor that provides not only advanced text editing functions, but also many tools addressed to developers, regardless of the programming language they use. The application has been specifically designed to serve a double purpose. It can easily replace the popular Wordpad and Notepad tools included in Windows and, in the same time, PSPad will prove its worth when dealing with complicated code syntax. The ace up its sleeve is actually a mix between the excellent bundle of features and its quite easy to use and friendly interface. Since it was designed to help all types of users, PSPad comes with an impressive list of templates that includes PHP, Python, HTML, C++, Foxpro, XHTML and many others. Here are some key features of "PSPad":  work with projects;  work on several documents at the same time (MDI);  Save desktop session to later reopen all open files;  FTP client - you can edit files directly from the web;  macro recorder to record, save and load macros;  search and replace in files;  text difference with color-coded differences highlighted;  templates (HTML tags, scripts, code templates...);  installation contains templates for HTML, PHP, Pascal, JScript, VBScript, MySQL, MSDos, Perl,...;  syntax highlighting auto set by file type;  user-defined highlighters for exotic environments;  auto correction;  inteligent internal HTML preview using IE and Mozilla;  full HEX editor;  call external programs, different for each environment;  external compiler with catch command output, log window, log parser for each environment for "IDE" effect;  color syntax highlight printing and print preview;  integrated TiDy library for formatting and checking HTML code, conversion to CSS, XML, XHTML;  integrated free version of top CSS editor TopStyle Lite;  export with highlight to RTF, HTML, TeX format into file or clipboard;  column block select, bookmarks, line numbers, ...;  reformat and compress HTML code, tags char case change;  line sorting with ability to sort on defined column, with option to drop duplicates;  ASCII chart with HTML entities;  Code explorer for Pascal, INI, HTML, XML, PHP, and more in future;  spell checker;  internal web browser with APACHE support;  matching bracket highlighting. There is no complex installation process. PSPad is ready to work immediately without requiring customization. PSPad Software can be downloaded from a number of links. The basic link is http://www.pspad.com/cz/, but we can use, for example, http://download.famouswhy.com/pspad/. Installation steps are: 1) Download and run the .exe file from your computer. 2) Press "Next". 1Web & internet portal - 14 - 3) Read the license agreement and select "I accept the agreement". Press next to continue. 4) Select the installation folder and press "Next". 5) Select "Full installation" and press "Next". 6) Press "Install". 7) After the installation is complete, press "Finish" to exit setup. Petr Suchánek, Jan Górecki; Portal and its Management - 15 - 2 HTML 2.1 CHARACTERISTICS OF HTML Short for HyperText Markup Language, the authoring language used to create documents on the World Wide Web. HTML is similar to SGML (Standard Generalized Markup Language), although it is not a strict subset. Development of HTML was influenced by web browsers, which in turn back influenced the definition of the language. 2.2 CHARACTERISTICS OF XHTML XHTML is almost identical to HTML 4.01 with only few differences. This is a cleaner and more strict version of HTML 4.01. If you already know HTML then you need to give littel attention to learn this latest variant of HTML. XHTML stands for EXtensible HyperText Markup Language and is the next step in the evolution of the Internet. The XHTML 1.0 is the first document type in the XHTML family. XHTML was developed by the W3C to help web developers make the transition from HTML to XML. By migrating to XHTML today, web developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content's backward and future compatibility. Developers who migrate their content to XHTML 1.0 will realize the following benefits:  XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with standard XML tools.  XHTML documents can be written to operate better than they did before in existing browsers as well as in new browsers.  XHTML documents can utilize applications like scripts and applets that rely upon either the HTML Document Object Model or the XML Document Object Model. 2.3 FUNDAMENTAL DIFFERENCES BETWEEN HTML AND XHTML XML syntax rules are far more rigorous than HTML. As a result, XHTML makes authors work more precisely, having to address issues such as:  all elements and attribute names must appear in lower case;  all attribute values must be quoted;  non-Empty Elements require a closing tag;  empty elements are terminated using a space and a trailing slash;  no attribute minimization is allowed;  in strict XHTML, all inline elements must be contained in a block element. In HTML, case, quotes, termination of many elements and uncontained elements are allowed and commonplace. The margin for errors in HTML is much broader than in XHTML, where the rules are very clear. As a result, XHTML is easier to author and to maintain, since the structure is more apparent and problem syntax is easier to spot. 2.4 HTML TAGS AND ELEMENTS Every tag consists of a tag name, sometimes followed by an optional list of tag attributes, all placed between opening and closing brackets (< and >). The simplest tag is nothing more than a name appropriately enclosed in brackets, such as and . 2HTML - 16 More complicated tags contain one or more attributes, which specify or modify the behavior of the tag. EXAMPLE 1 General notation: content Specific example:

This is a paragraph.

According to the HTML standard, tag and attribute names are not case-sensitive. There's no difference in effect between , , , or even ; they are all equivalent. But with XHTML, case is important: all current standard tag and attribute names are in lowercase. The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. "HTML tags" and "HTML elements" are often used to describe the same thing. But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags. A very good quality associated with all the browsers is that they would not give any error if you have not put any HTML tag or attribute properly. They will just ignore that tag or attribute and will apply only correct tags and attributes before displaying the result. 2.5 HTML DOCUMENT To begin coding HTML you need only two things: a simple editor (we will use PsPad) and a web browser. The DOCTYPE declaration defines the document type. The first line on the top, , is a document type declaration and it lets the browser know which flavor of HTML we are using. is the opening tag that kicks things off and tells the browser that everything between that and the closing tag is an HTML document. The stuff between and is the main content of the document that will appear in the browser window. The and put a close to their respective elements. EXAMPLE 2

My First Heading

My first paragraph.

Petr Suchánek, Jan Górecki; Portal and its Management - 17 The declaration must be the very first thing in your HTML document, before the tag. The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML 4.01, the declaration refers to a DTD, because HTML 4.01 was based on SGML (Standard Generalized Markup Language). The DTD specifies the rules for the markup language, so that the browsers render the content correctly. HTML5 is not based on SGML, and therefore does not require a reference to a DTD. 2.6 HTML ELEMENT SYNTAX  An HTML element starts with a start tag / opening tag.  An HTML element ends with an end tag / closing tag.  The element content is everything between the start and the end tag.  Some HTML elements have empty content.  Empty elements are closed in the start tag.  Most HTML elements can have attributes. Not all tags have closing tags like this () some tags, which do not wrap around content will close themselves. The line-break tag for example, looks like this:
- a line break doesn’t hold any content so the tag merrily sits by its lonely self. In Example 2 there are two basic tags. The elements h1, h2, h3, h4, h5 and h6 is used to make headings (h stands for "heading"), where h1 is the first level and normally the largest text, h2 is the second level and normally slightly smaller text, and h6 is the sixth and last in the hierarchy of headings and normally the smallest text. The p in

is short for "paragraph" which is exactly what it is - a text paragraph. 2.7 HTML PARAGRAPHS AND LINE BREAKS Paragraphs are defined with the

tag. EXAMPLE 3

This is a paragraph

This is another paragraph

2HTML - 18 Note that browsers automatically add an empty line before and after a paragraph. Most browsers will display HTML correctly even if you forget the end tag: EXAMPLE 4

This is a paragraph

This is another paragraph The example 4 will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors. Future version of HTML will not allow you to skip end tags. If you want a line break (a new line) without starting a new paragraph, use the
tag. The
element is an empty HTML element. It has no end tag. EXAMPLE 5

This is
a para
graph with line breaks

Just as
we can use tag
. The
tag creates a horizontal line in an HTML page. EXAMPLE 6

This is a paragraph.


This is a paragraph.


This is a paragraph.

2.8 HTML HEADINGS As was already indicated in Example 2Headings are defined with the

to

tags.

defines the most important heading.

defines the least important heading. EXAMPLE 7

This is a heading

This is a heading

This is a heading

Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search engines use your headings to index the structure and content of your web pages. Since users may skim your pages by its headings, it is important to use headings to show the document structure. H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on. 2.9 HTML FONT The tag provides no real functionality by itself, but with the help of a few attributes, this tag is used to change the style, size, and color of HTML text elements. The Petr Suchánek, Jan Górecki; Portal and its Management - 19 size, color, and face attributes can be used all at once or individually, providing users with the ability to create dynamic font styles for any HTML element. You can set the size of your font with size. The range of accepted values goes from 1 -- the smallest, to 7 -- the largest. The default size of a font is 3. EXAMPLE 8

Here is a size 5 font

Color of your font can be set with color. EXAMPLE 9 This text is hex color #990000
This text is red Basic color codes can be found in Table 1. Much more may be found, for example, in:  http://www.computerhope.com/htmcolor.htm;  http://www.december.com/html/spec/colorcodes.html;  http://www.htmlgoodies.com/tutorials/colors/article.php/3478961. Table 1: Basic colors codes A different font face can be chosen by specifying any font you have installed. Font face is synonymous with font type. As a web designer, be aware that if you specify a custom font type and users viewing the page don't have the exact same font installed, they will not be able to see it. Instead the chosen font will default to Times New Roman. To reduce the risk of running into this situation, you may provide a list of several fonts with the face attribute, such as outlined below. EXAMPLE 10

This paragraph has had its font...

2HTML - 20 In general, the and tags are deprecated and should not be used for published work. Instead, use CSS (Cascading style sheets) styles to manipulate your font. CSS will be described in the next section. 2.10 HTML LISTS HTML lists appear in web browsers as bulleted lines of text. There are actually three different types of HTML lists, including unordered lists (bullets), ordered lists (numbers), and definition lists (think: dictionaries). Each list type utilizes its own unique list tag. EXAMPLE 11
  • I am a list item!>
  • I am a list item too!>
  • I am a list item also!>
The actual list tags themselves, such as
    , are nothing but container elements for list items (
  • ). They work behind the scenes to identify the beginning and ending of an HTML list element. An unordered list (
      ) signifies to a web browser that all list items contained inside the
        tag should be rendered with a bullet preceding the text. The default bullet type for most web browsers is a full disc (black circle), but this can be adjusted using an HTML attribute called type. EXAMPLE 12

        Shopping List

        • Milk
        • Toilet Paper
        • Cereal
        • Bread
        To render a list with a different bullet type, add a type attribute to the unordered list element. Using the same code in the example above, replace the
          line from the previous example with any of the lines listed below to change the bullet from disc shape to another shape. EXAMPLE 13
              Petr Suchánek, Jan Górecki; Portal and its Management - 21
                An ordered list is defined using the
                  tag, and list items placed inside of an ordered list are preceded with numbers instead of bullets. EXAMPLE 14

                  Goals

                  1. Find a Job
                  2. Get Money
                  3. Move Out
                  The numbering of an HTML list can be changed to letters or Roman Numerals by once again adjusting the type attribute. EXAMPLE 15
                          The start attribute allows you to further customize an HTML ordered list by setting a new starting digit for the ordered list element. EXAMPLE 16

                          Goals

                          1. Buy Food
                          2. Enroll in College
                          3. Get a Degree
                          HTML definition lists (
                          ) are list elements that have a unique array of tags and elements; the resulting listings are similar to those you'd see in a dictionary. 
                          - opening clause that defines the start of the list; 
                          - list item that defines the definition term; 
                          - definition of the list item. These lists displace the word term (
                          ) in such a way that it rests just above the definition element (
                          ) to offer a very unique look. For best, results we suggest bolding the definition terms with the bold tag . EXAMPLE 17
                          2HTML - 22 -
                          Fromage
                          French word for cheese.
                          Voiture
                          French word for car.
                          2.11 HTML IMAGES In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. EXAMPLE 18 some_text The URL points to the location where the image is stored. For example, an image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. The browser displays the image where the tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text: EXAMPLE 19 Smiley face The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default: EXAMPLE 20 Smiley face It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load). Above, we've used hard-coded pixel values for the height and width of the sunset image to ensure that this image will always render 42 pixels high by 42 pixels wide. By hardcoding these values, we are ensuring that the image will only display 42 pixels high by 42 pixels wide, even if the picture file itself happens to be much larger. If the dimensions of the Petr Suchánek, Jan Górecki; Portal and its Management - 23 picture are much larger, then we risk some severe skewing as the browser tries to shrink our image into our small box. Height and width values can also be a percentage. Percentage values are relative to the parent HTML element (usually the body), which means if you have a parent element like a element that is the whole screen (1024x768), then an image with a height and width of 100% will take up that entire body element (1024x768). In our example below, we have placed the image in a table element that is about 400 pixels wide by 200 pixels tall. Images can be aligned horizontally to the right or to the left of other elements using the align attribute. Image elements are aligned to the left by default. EXAMPLE 21 As you can see, the image's right edge has now been aligned with the right edge of the display box. Since the display box is the parent element, this is the desired behavior for the align attribute. If we take this example a step further, you can achieve some really great designs by embedding aligned images inside of paragraph

                          elements. EXAMPLE 22

                          This is paragraph 1, yes it is...

                          The image will appear along the...isn't it?

                          This is the third paragraph that appears...

                          2.12 HTML TABLES Tables are defined with the tag. A table is divided into rows with the tag (tr stands for table row). A row is divided into data cells with the ). Table columns are also considered child elements of HTML tables, and like table rows, an HTML table may contain an infinite number of table data cells (). Table rows and columns are container elements that house other HTML elements such as text links, images, and lists, as we've seen in previous examples. Below, we've applied a background color to the table example in order to help distinguish the different table elements. EXAMPLE 27
                          tag (td stands for table data). A row can also be divided into headings with the tag (th stands for table heading). The elements are the data containers in the table. The elements can contain all sorts of HTML elements like text, images, lists, other tables, etc. EXAMPLE 23
                          Row 1 Cell 1 Row 1 Cell 2
                          Row 2 Cell 1 Row 2 Cell 2
                          2HTML - 24 If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute: EXAMPLE 24
                          Jill Smith 50
                          Eve Jackson 94
                          Table headings are defined with the
                          tag. By default, all major browsers display table headings as bold and centered: EXAMPLE 25
                          Firstname Lastname Points
                          Eve Jackson 94
                          Content elements like HTML lists, images, and even other table elements can be placed inside each table cell. Doing so aligns the elements in a tabular fashion and provides structure. EXAMPLE 26
                          • List Item 1
                          • List Item 2
                          • List Item 3
                            Petr Suchánek, Jan Górecki; Portal and its Management - 25
                          • List Item 4
                          • List Item 5
                          • List Item 6

                          Avoid losing floppy disks with important school...

                          HTML tables allow the web designer to align page content in a tabular fashion while spanning elements horizontally across the web page, rather than stacking them up one on top of another. A table can contain an infinite number of table rows. Each table row is essentially a table element itself, with an opening and closing tag (
                          Row 1 Cell 1 Row 1 Cell 2
                          Row 2 Cell 1 Row 2 Cell 2
                          You can use rowspan to span multiple rows merging together table rows and colspan to span across multiple columns. EXAMPLE 28 2HTML - 26 -
                          Column 1 Column 2 Column 3
                          Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
                          Row 2 Cell 2 Row 2 Cell 3
                          Row 3 Cell 1
                          With the cellpadding and cellspacing attributes, you will be able to adjust the spacing between table cells. Setting the cellpadding attribute determines how much space will exist between a table cell border and the elements contained within it, whereas cellspacing determines how much space will exist between each table cell. Color has been added to the table below to emphasize these attributes. EXAMPLE 29
                          Column 1 Column 2
                          Row 1 Cell 1 Row 1 Cell 2
                          Row 2 Cell 1 Row 2 Cell 2
                          And now we will change the cellpadding of the table and remove the cellspacing from the previous example. This should clearly demonstrate the difference between cellpadding and cellspacing. EXAMPLE 30 Petr Suchánek, Jan Górecki; Portal and its Management - 27
                          Column 1Column 2
                          Row 1 Cell 1 Row 1 Cell 2
                          Row 2 Cell 1 Row 2 Cell 2
                          2.13 HTML LINKS The HTML tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the element is the href attribute, which indicates the link's destination. By default, links will appear as follows in all browsers:  An unvisited link is underlined and blue;  A visited link is underlined and purple;  An active link is underlined and red. EXAMPLE 31 Link text The href attribute specifies the destination of a link. EXAMPLE 32 Visit W3Schools The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab: EXAMPLE 33 Visit W3Schools! The id attribute can be used to create a bookmark inside an HTML document. An anchor with an id inside an HTML document: EXAMPLE 34 Useful Tips Section Create a link to the "Useful Tips Section" inside the same document: 2HTML - 28 EXAMPLE 35 Visit the Useful Tips Section Or, create a link to the "Useful Tips Section" from another page: EXAMPLE 36 Visit the Useful Tips Section Placing files available for download is done in exactly the same fashion as placing text links. However, things become complicated if we want to place image links for download. EXAMPLE 37 Text Document We can also use image links. Image links are constructed as you might expect, by embedding an tag inside of an anchor element . Like HTML text links, image links require opening and closing anchor tags, but instead of placing text between these opening and closing tags, the developer needs to place an image tag -- with a valid source attribute value of course. EXAMPLE 38 By default, many browsers add a small border around image links. This default behavior is intended to give web viewers the ability to quickly decipher the difference between ordinary images and image links. Since this default is different from web browser to web browser, it may be best to squelch this ambiguity and set the border attribute of the image tag to 0 or 1. EXAMPLE 39 Thumbnails are by far the most common type of image link seen in today's world. To create a thumbnail, one must save a low-quality version of a picture with smaller dimensions. Then, one should link this low-quality picture to its higher-quality counterpart. Thumbnails are intended to give your audience quick previews of images without them having to wait for the larger, higher-quality image to load. Photo galleries make heavy use of thumbnails, and they will allow you to display multiple pictures on one page with ease. EXAMPLE 40 Petr Suchánek, Jan Górecki; Portal and its Management - 29 Use the tag in the head element to set a default URL for all links on a page to go to. It's always a good i-dea to set a base tag just in case your links become bugged somewhere down the line. Usually, you should set your base to your home page. EXAMPLE 41 2.14 FRAMES Frames divide a browser window into several pieces or panes, each pane containing a separate XHTML/HTML document. One of the key advantages that frames offer is that you can then load and reload single panes without having to reload the entire contents of the browser window. A collection of frames in the browser window is known as a frameset. The window is divided up into frames in a similar pattern to the way tables are organized: into rows and columns. The simplest of framesets might just divide the screen into two rows, while a complex frameset could use several rows and columns. There are few drawbacks also you should be aware of with frames are as follows:  Some browsers do not print well from framesets.  Some smaller devices cannot cope with frames, often because their screen is not big enough to be divided up.  Some time your page will be displayed differently on different computers due to different screen resolution.  The browser's back button might not work as the user hopes.  There are still few browsers who do not support frame technology. To create a frameset document, first you need the element, which is used instead of the element. The frameset defines the rows and columns your page is divided into, which in turn specify where each individual frame will go. Each frame is then represented by a element. You also need to learn the element, which provides a message for users whose browsers do not support frames. 2.14.1 CREATING FRAMES  The <frameset> tag replaces the <body> element in frameset documents.  The <frameset> tag defines how to divide the window into frames.  Each frameset defines a set of rows or columns. If you define frames by using rows then horizontal frames are created. If you define frames by using columns then vertical frames are created.  The values of the rows/columns indicate the amount of screen area each row/column will occupy.  Each frame is indicated by <frame> tag and it defines what HTML document to put into the frame. Following is the example to create three horizontal frames: 2HTML - 30 EXAMPLE 42 <html> <head> <title>Frames example</title> </head> <frameset rows="10%,80%,10%"> <frame src="/html/top_frame.htm" /> <frame src="/html/main_frame.htm" /> <frame src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> 2.14.2 THE ELEMENT ATTRIBUTES Following are important attributes of and should be known to you to use frameset.  cols: specifies how many columns are contained in the frameset and the size of each column. You can specify the width of each column in one of four ways: o Absolute values in pixels. For example to create three vertical frames, use cols="100, 500,100". o A percentage of the browser window. For example to create three vertical frames, use cols="10%, 80%,10%". o Using a wildcard symbol. For example to create three vertical frames, use cols="10%, *,10%". In this case wildcard takes remainder of the window. o As relative widths of the browser window. For example to create three vertical frames, use cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the browser window. Here the window is divided into sixths: the first column takes up half of the window, the second takes one third, and the third takes one sixth.  rows: attribute works just like the cols attribute and can take the same values, but it is used to specify the rows in the frameset. For example to create two horizontal frames, use rows="10%, 90%". You can specify the height of each row in the same way as explained above for columns.  border: attribute specifies the width of the border of each frame in pixels. For example border="5". A value of zero specifies that no border should be there.  frameborder: specifies whether a three-dimensional border should be displayed between frames. This attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0" specifies no border.  framespacing: specifies the amount of space between frames in a frameset. This can take any integer value. For example framespacing="10" means there should be 10 pixels spacing between each frames. Petr Suchánek, Jan Górecki; Portal and its Management - 31 - 2.14.3 LOADING CONTENT The element indicates what goes in each frame of the frameset. The element is always an empty element, and therefore should not have any content, although each element should always carry one attribute, src, to indicate the page that should represent that frame. From the above example, lets take small snippet: EXAMPLE 43 2.14.4 THE ELEMENT ATTRIBUTES Following are important attributes of and should be known to you to use frames.  src: indicates the file that should be used in the frame. Its value can be any URL. For example, src="/html/top_frame.htm" will load an HTML file avaible in html directory.  name: attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into a second frame, in which case the second frame needs a name to identify itself as the target of the link.  frameborder: attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the element if one is given, and the possible values are the same. This can take values either 1 (yes) or 0 (no).  marginwidth: allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example marginwidth="10".  marginheight: allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example marginheight="10".  noresize: By default you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. For example noresize="noresize".  scrolling: controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". For example scrolling="no" means it should not have scroll bars.  longdesc: allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc="framedescription.htm". 2.14.5 FRAME'S NAME AND TARGET ATTRIBUTES One of the most popular uses of frames is to place navigation bars in one frame and then load the pages with the content into a separate frame. As you have already seen, each element can carry the name attribute to give each frame a name. This name is used in the links to indicate which frame the new page 2HTML - 32 should load into. Consider this very simple example, create following content in index.htm file: EXAMPLE 44 There are two columns in this example. The first is 200 pixels wide and will contain the navigation bar. The second column or frame will contain the main part of the page. The links on the left side navigation bar will load pages into the right side main page. Keep some content in main.htm file and the links in the menu.htm file look like this: EXAMPLE 45 Google

                          Microsoft

                          BBC News 2.15 FORMS HTML Forms are required when you want to collect some data from the site visitor. For example registration information: name, email address, credit card, etc. A form will take input from the site visitor and then will post your back-end application such as CGI (Common Gateway Interface), ASP (Active Server Pages) Script or PHP (Hypertext Preprocessor) script etc. Then your back-end application will do required processing on that data in whatever way you like. Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. which are used to take information from the user. A simple syntax of using
                          is as follows: EXAMPLE 46 form elements like input, textarea etc.
                          Most frequently used form attributes are:  name: This is the name of the form.  action: Here you will specify any script URL which will receive uploaded data.  method: Here you will specify method to be used to upload data. It can take various values but most frequently used are GET and POST.  target: It specifies the target page where the result of the script will be displayed. It takes values like _blank, _self, _parent etc. Petr Suchánek, Jan Górecki; Portal and its Management - 33  enctype: You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are like: o application/x-www-form-urlencoded - This is the standard method most forms use. It converts spaces to the plus sign and non-alphanumeric characters into the hexadecimal code for that character in ASCII text. o mutlipart/form-data - This allows the data to be sent in parts, with each consecutive part corresponding the a form control, in the order they appear in the form. Each part can have an optional content-type header of its own indicating the type of data for that form control. There are different types of form controls that you can use to collect data from a visitor to your site.  Text input controls;  Buttons;  Checkboxes and radio buttons;  Select boxes;  File select boxes;  Hidden controls;  Submit and reset button. 2.15.1 TEXT INPUT CONTROLS There are actually three types of text input used on forms:  Single-line text input controls: Used for items that require only one line of user input, such as search boxes or names. They are created using the element.  Password input controls: Single-line text input that mask the characters a user enters.  Multi-line text input controls: Used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created with the Following is the detail of above used attributes for