e-learning modules notes

ContentsContents0HTML9Introduction to HTML9HTML Structures and Elements15Creating a Web Page29Hyperlinks, Tables, and Forms35Image Maps and Style Sheets54Enhancing Web Pages64Client-side and Server-side Scripts74Advanced Markup Languages81Managing and Connecting to Databases89Understanding Advanced Web Techniques96

EXCEL101Opening an Excel 2010 Workbook101Introducing the Excel 2010 Interface109Creating a New Excel 2010 Workbook and Entering Data122Opening Workbooks and Entering Data in Excel 2010134Formatting Text and Cells in Excel 2010137Aligning data in Excel 2010148Formatting Numbers in Excel 2010154Formatting Data in Excel 2010167Introducing Formulas and References in Excel 2010170Inserting Formulas in Excel 2010179Editing and Correcting Common Formula Errors192Entering a Formula and Using References in Excel 2010202Using Tables and Applying Table Styles in Excel 2010205Applying Conditional Formats in Excel 2010217Using Sparklines in Excel 2010226Using Tables, Conditional Formatting, and Sparklines239

Operating Systems242UNIX Philosophy and History242UNIX Portability and Standards248UNIX Distributions255Choosing a UNIX Distribution261UNIX Implementations266The Basics of Using UNIX273Getting Started with a UNIX System284Understanding UNIX Shell Scripts288Choosing UNIX Shells302Creating and Running an Executable File in UNIX308Choosing UNIX Shells and Running Scripts320UNIX Command Execution326Redirection in UNIX334Substitution and Patterns in UNIX345Using UNIX Commands in a Script353UNIX Files and Directories359The UNIX File System366File Creation, Deletion, and Permissions in UNIX383Using the UNIX File System393Searching UNIX Files with Patterns398Working with UNIX directories417Searching and Organizing a UNIX File System433Introduction to Windows 7443The Windows 7 Desktop451The Windows 7 Start Menu and Taskbar458Getting Around the Windows 7 Interface469Using Windows Explorer471Searching for Files and Folders485Navigating Windows and Searching for Files491Installing and Removing Programs494Installing and Using Printers501Working with Programs, Printers, and the Control Panel513System Maintenance516Windows 7 Security530Backing up and Restoring Folders and Files540Performing Maintenance and Security Tasks554Customizing the Windows 7 Desktop558Customizing the Start Menu568Customizing the Taskbar576Customizing the Windows 7 Interface584DBMS587Overview of Databases and DBMSs587The Database Architectures and Models597Identifying Database Systems612Relational Database Concepts620The Relational Database Schema630Database Normalization639Identifying the Relational Database Concepts and Schema646Designing a relational database652The database design life cycle659Database design requirements analysis665Interviewing for business requirements gathering669Developing the conceptual database design679Creating a conceptual database design686Database design using Entity-Relationship modeling691Designing a database using Entity-Relationship modeling701Normalizing the database design707Modeling complex relationships in the database design714A database design Entity-Relationship model721Completing the logical database design723Implementing the database design732Creating a physical database design741Databases v. Database Management Systems747Database requirements755A sample database system757Database models760Database architectures769Designing a database architecture779OLTP databases v. data warehousing781Oracle RDBMS and ORDBMS783The Oracle9i database server786Relational Database Concepts796Relational database characteristics803The relational database schema806Relational database integrity813Operations in a relational database815Formulating algebraic operations in a database824Using SQL in a relational database829Writing basic SQL statements840Manipulating data in Oracle9i databases844Using DML statements in an Oracle9i database855Database transactions and concurrency problems861Resolving concurrency problems in a database867Database security874Oracle9i database users880Privileges in an Oracle9i database885Programming languages889The Evolution of Computers and Software Programming889Software Development Life Cycle900Programming Basics908Program Development Tools914Understanding Programming Basics921Algorithms Explained929Creating an Algorithm946Structuring an Algorithm952IF Statements963CASE Statements976Solving a Problem using Branching Statements986Completing Selection Statements1001FOR Loops1007WHILE Loops1016Solving a Repetition Problem1028Using Loops1044The history of computers1050Programming princples1059Software life cycle phases1070Program development1075Defining algorithms1083Construction an algorithm1093Creating an algorithm1102Variables, constants, and data types1107Expressions and statements1114Building expressions1122Variables, Constants, and Data Types1131Expressions and Statements1140Building Expressions1153Arrays1159Procedures and Functions1170Using Arrays and Procedures1186Software Engineering concepts1193Analyzing Requirements Using Models SkillBriefs1193SkillBrief1194Use Case Modeling1194Usage Modeling Techniques1199Usage Modeling Techniques1203Data and Behavior Modeling Techniques1207Class Diagrams1210Solution Development Methodologies1212Business Rules1215Data Flow Diagrams1218Data Flow Diagrams1221Activity Diagrams1225Refining and Documenting Requirements SkillBriefs1228Functional Requirements1229Quality of Service Requirements1231Decomposing Requirements1233Constraints and Assumptions1235Requirements Attributes1237Types of Requirements Documents1239Validating and Verifying Requirements1241Software testing1244The Necessity of Software Testing1244What is Software Testing?1251Meeting Software Test Objectives1255General Software Testing Principles1261Applied Software Testing Principles1265The Importance of Software Testing and Mitigating Harm1272The Fundamental Software Test Process1278Exit Criteria and Test Closure Activities1286The Psychology of Software Testing1291Contrasting Software Testers and Developers1298Organizing Testers and the Software Test Process1302Software Development Models1307Component and Integration Testing1314System and Acceptance Testing1320Testing to Reveal Defects1328Functional and Non-functional Software Testing1333Structural and Changed-based Software Testing1341Maintenance Software Testing1350Models of Software Testing and Development1356ENGLISH1360SkillBrief1361End Punctuation Marks1361Using the Comma Correctly1363Using Connectors and Separators1364Using Other Punctuation Marks1366Business Grammar: Sentence Construction SkillBriefs1369Sentence Parts, Phrases, and Clauses1369The Rules of Subject-Verb Agreement1371Rules of Agreement for Pronouns and Antecedents1373Sentence Fragments, Comma Splices, and Modifiers1375Business Grammar: Common Usage Errors SkillBriefs1378Recognizing Commonly Confused Word Pairs1378Using Prepositions Idiomatically1380Recognizing Commonly Misused Verbs and Other Words1382Business Grammar: Parts of Speech SkillBriefs1384Recognizing the Eight Parts of Speech1384Using Verbs Correctly1386Using Adverbs and Adjectives1388Using Nouns Correctly1390Rules for Constructing Prefixes and Suffixes1393Rules for Forming Plurals1395Rules for Forming Possessives1396Basic Spelling Rules1398Business Grammar: The Mechanics of Writing SkillBriefs1400The Correct Use of Abbreviations1400The Correct Methods of Capitalization1402Writing Numbers1405Interpersonal Communication: Communicating with Confidence SkillBriefs1408The Essential Elements of Confident Communication1408The Use and Impact of Confident Communication Behaviors1410Trust, Credibility, Rapport, and Confidence1412Business Writing: How to Write Clearly and Concisely SkillBriefs1415Techniques for Writing Clearly1415Applying the Techniques of Concise Writing1417Organizing Content to Increase Understanding1420Developing an Effective VOICE1436Methods for Improving Your Voice1438The Benefits of a Well-placed Pause1440Understanding the Seven Levels of Listening1441The Most Common Obstacles to Listening1444Overcoming Self-made Barriers to Listening1445Recognizing Non-verbal Messages1447Interpreting Four Modes of Non-verbal Expression1448Responding Appropriately to Body Language1450Workplace Communication Skills SkillBriefs1452Three Interpersonal Communication Styles1453Four Types of Assertive Responses1455Assertive Interpersonal Negotiation Techniques1456Using Constructive Criticism and Feedback1457Criteria for Giving Constructive Criticism1458Accepting Criticism in a Positive Manner1460Using Open and Closed Questions1461How to Use Exploratory Questions1462Using Leading Questions to Persuade1463Listening Basics SkillBriefs1465The Seven Components of Communication1466The Seven Components of Communication1467How People Communicate Simultaneously1467How You Receive Information1469Three Types of Attention Problems1470Common Causes of Misinterpreted Messages1471Strategies for Improving Your Listening Skills1472Factors That Influence Your Listening Attitudes1473

HTML

Introduction to HTML Learning Objectives After completing this topic, you should be able to identify the current HTML standards recognize what HTML is identify common HTML editing applications and their functions1. Introduction to HTMLHypertext Markup Language, or HTML for short, is the authoring language used to create web documents. It was developed from Standard Generalized Markup Language, or SGML which is a more complicated markup language.

HTML has evolved since its beginnings in 1989. The current release of HTML is HTML 4.01, which has been available since late 1999. A working draft of the HTML 5.0 specification is available since 2008 but has not yet been finalized. Hypertext is a method of preparing and publishing text that enables you to link documents to each other.

HTML consists of descriptive symbols and codes, called markup, which tell a browser how to display a web page's content for a user. Each piece of markup code is referred to as an element. Markup languages aren't the same as programming languages. Programming languages, such as Java, are used to generate tasks for the computer to complete. Markup languages, such as HTML, simply describe how a browser should display information. HTML code can be written using a text editor, such as Notepad, or more sophisticated applications, such as Microsoft Expression Web and Adobe Dreamweaver. Expression Web and Dreamweaver are called WYSIWYG editors. WYSIWYG is short for what you see is what you get. These editors display the web page as it will look in the browser.

All HTML web pages are saved with the .htm or .html file extension.

QuestionIdentify the characteristics of HTML. Options:1. It's a markup language2. It's an SGML3. It can be written using a text editor4. It's a programming language5. It can be written using a WYSIWYG editorAnswerOption 1: Correct. HTML uses descriptive elements to tell a browser how to display the content contained in the web page.Option 2: Incorrect. HTML is a simplified version of SGML.Option 3: Correct. HTML can be generated using a simple text editor, such as Notepad. It can also be generated in a WYSIWYG editor.Option 4: Incorrect. HTML can't be used to ask the computer to perform tasks, as programming languages do. It simply describes how content will appear in a browser.Option 5: Correct. HTML can be written in WYSIWYG editors and text editors. WYSIWYG editors display the web page as it would appear in a web browser.Correct answer(s):1. It's a markup language3. It can be written using a text editor5. It can be written using a WYSIWYG editor2. HTML standardsThe World Wide Web Consortium, or W3C, is the international organization responsible for setting the standards for HTML and other web development languages. It was established in 1994. HTML 2.0, developed in 1995, was the basis for the core HTML features that are used today. In 1996, the W3C approved HTML version 3.2, which added support for tables and text flow around images. Version 3.2 was backward compatible with version 2.0.

HTML 4.0 was released in 1998. It added support for new scripting languages, multimedia options, style sheets, and improved printing. HTML 4.01 was released in 1999 to repair some bugs that were present in version 4.0. There are three varieties of HTML 4.01. HTML 4.01 Strict HTML 4.01 Strict is a trimmed-down version of HTML 4.01 that emphasizes structure over presentation. You can use Cascading Style Sheets, or CSS, with HTML 4.01 Strict. It enables you to achieve accessible, structurally rich documents that easily adapt to style sheets and different browsing situations. Some older browsers may not be able to support HTML Strict.

You shouldn't use deprecated tags those that will become obsolete in a later version of HTML in HTML Strict documents. HTML 4.01 Transitional

HTML 4.01 Frameset Web pages that contain frames must use HTML 4.01 Frameset, which is a variation of HTML 4.01 Transitional. HTML 4.01 Frameset can contain deprecated tags and is supported by more browsers than HTML 4.01 Strict. XHTML was released in 2001. It combines the strengths of HTML and Extensible Markup Language, or XML, by defining HTML as an XML application.

Their release creates a language compatible with a wide range of browsers. They're also simpler, and therefore easier to use. NoteThe current release of XHTML is 1.1.There is a working draft for the XTML 2.0 standard but it has not been finalized as a standard.XHTML is far more precise than previous versions of HTML. XHTML, for instance, is case sensitive, so all its elements must be written in lower case. HTML on the other hand is far less strict. Its elements can be written in upper case, lower case, or a mixture of the two. To create a well formatted and executed document, XHTML requires that tags and attributes follow one of three XML document type definitions: XHTML Strict XHTML Strict is used when you want to create clean, clear markup. Unlike XHTML Transitional and Frameset, XHTML Strict is restrictive. It doesn't support the use of any deprecated elements or attributes. Deprecated elements and attributes are HTML tags that have been replaced by newer, more functional adaptations. It also doesn't support the use of frames. XHTML Transitional, and XHTML Transitional is compatible with a wide range of browsers, as it supports the use of presentational features and deprecating elements and attributes. XHTML Frameset Although modern browsers all support XHTML to a certain extent, HTML 2.0 is still the most widely supported version it's supported by almost every browser today. QuestionWhich XHTML document type definition enables you to use deprecated elements and attributes? Options:1. XHTML Transitional2. XHTML Frameset3. XHTML StrictAnswerOption 1: Correct. XHTML Transitional is compatible with most browsers. It supports the use of deprecated elements and attributes.Option 2: Incorrect. XHTML Frameset is specifically designed for use on web pages that use frames.Option 3: Incorrect. XHTML Strict doesn't support the use deprecated elements and attributes. It also doesn't support the use of framesets.Correct answer(s):1. XHTML Transitional3. HTML editorsThere are two types of HTML editors: GUI editors and Graphical User Interface, or GUI, editors are used to create web pages without having to write HTML code. By using various menu and toolbar commands, you design your web page while the program automatically enters the appropriate HTML code. For this reason, GUI editors are often referred to as WYSIWYG editors. This helps you to determine how your page will be displayed and formatted as you create it. As a result, they can greatly speed up the process of web page creation. text editors If you use a text editor to create your web page, you must enter all the code manually. Text editors give you complete control over the content and the "look and feel" of your web page.

Using a text editor is more time consuming than using a GUI editor. Common text editors include Notepad and SimpleText. Microsoft Word can also be used to create HTML files but isn't recommended, as it creates a lot of unnecessary HTML code. GUI editors enable you to manually edit the HTML code. Examples of common GUI editors are Microsoft Expression Web and Adobe Dreamweaver.

GUI editors also include some advanced functions, such as enabling you to see what your web page will look like in different browsers, File Transfer Protocol, or FTP, access, link checking, and code validation. Being able to perform all these tasks in one application greatly speeds up the production process. QuestionIdentify the applications that can be used as WYSIWYG HTML editors. Options:1. Adobe Dreamweaver2. Microsoft Expression Web3. Notepad4. Microsoft WordAnswerOption 1: Correct. Adobe Dreamweaver enables you to create your web pages without having to type any HTML code. It also enables you to edit the HTML code manually.Option 2: Correct. Microsoft Expression Web is a WYSIWYG editor, which uses a GUI interface to enable you to create web pages by using various menu and toolbar commands. The HTML code is automatically generated.Option 3: Incorrect. Notepad is a text editor. It has no GUI interface so all HTML code has to be manually entered.Option 4: Incorrect. Microsoft Word can be used as a text editor, but it has no GUI interface, so it isn't a WYSIWYG editor. As a text editor, Word creates unnecessary HTML code, so it isn't recommended.Correct answer(s):1. Adobe Dreamweaver2. Microsoft Expression WebSummaryHTML is the authoring language used to create web documents. It was first developed in 1989, and it evolved from SGML. Hypertext refers to HTML's ability to navigate between linked documents. Markup consists of descriptive elements, which tell a browser how to display a web page's content to a user.

The W3C is the international organization responsible for setting the standards for HTML. It was formed in 1994 and since then it has overseen the development of HTML from version 2.0 to the current version XHTML 1.0 and HTML 4.02. Varieties of XHTML are XHTML Strict, XHTML Transitional, and XHTML Frameset.

There are two types of HTML editors text and GUI. With a text editor, you enter the HTML code manually. This allows a great degree of control over the web page structure. GUI HTML editors use menus and toolbar options to build the web page. The HTML code is generated automatically. GUI editors also provide extra functionality, such as browser previews, FTP access, link checking, and code validation.

HTML Structures and Elements Learning Objectives After completing this topic, you should be able to recognize the tags that define the structure in an HTML document recognize the basic elements of an HTML document1. HTML tag componentsHTML documents consist of text and tags. Tags, also known as elements, are used to tell the browser how to display the text and any other content you want to include in your web page.

Tags consist of a text command inside angle brackets, known as wickets. GraphicAn example of a tag is .Code

EarthFarm

Welcome to the EarthFarm web site

There are two types of tags: Code

EarthFarm

Welcome to the EarthFarm web site

container tags and Container tags enclose the text inside an opening and a closing tag. The opening tag starts the instruction, and the closing tag ends it. Only the text within the tags will be displayed on the web page.

The closing tag is always the same as the opening tag. The only difference is that the closing tag has a forward slash after the first angle bracket and before the start of the name of the tag. An example is the paragraph tag, which has as the opening tag and as the closing tag. empty tags Empty tags are opening tags that don't have a closing tag. Some examples include the list , horizontal line , and the line break
tags. If you need to make HTML code XHTML-compliant, you should include a forward slash in empty HTML tags. For example
should be written as . Common formatting techniques can be performed in html documents by enclosing the text inside some simple tags.

To format the text in bold, you place the tag before and the tag after the text you want formatted. Placing on either side of some text will underline the enclosed text. The tags will italicize the enclosed text. Code

EarthFarm

Welcome to the EarthFarm web site

Tags can also be nested or contained inside other tags. The tags enclose all the content visible in the document window of the browser. This content is enclosed by many other tags to format the content for display. Code

EarthFarm

Welcome to the EarthFarm web site

Tags often include attributes. An attribute identifies a specific characteristic relating to the tag, and a value defines this characteristic. The structure of the tag, attribute, and value is displayed. The order is the tag name first and then the attribute name, followed by an equals sign and the value included in quotation marks.

In the code, font is a tag, face is the attribute, and Arial is the value. Code

EarthFarm

Welcome to the EarthFarm web siteSyntaxQuestionYou want to format the text "Welcome to the EarthFarm web site" in italics.Enter the necessary tags and text. Code EarthFarmspace for missing codeINSERT THE MISSING CODEspace for missing code endsAnswerTo format "Welcome to EarthFarm web site" in italics you type Welcome to the EarthFarm web site.Correct answer(s):1. Welcome to the EarthFarm web site QuestionIn the HTML code , match each individual component with the correct description. Options:A. 2B. fontC. sizeTargets:1. Attribute2. Tag3. ValueAnswerThe size attribute tells the browser to display the text enclosed within the tags at a specified size.The tags tell the browser to format the enclosed text in a particular way.The value of 2, combined with the tags and the attribute, size, tells the browser that this portion of the text should be displayed at size 2.Correct answer(s):Target 1 = Option CTarget 2 = Option BTarget 3 = Option A2. Structural HTML tagsEvery HTML page has common structural tags that are needed to build the page. CodeThere are several common structural tags needed in each HTML page: Code The tags define your document as an HTML page for the browser. It encloses all the other tags and the content in your HTML document. The opening tag can have attributes such as lang, which is used to specify the language that the HTML document is written in. For example, you can specify English as the language: , and The tags are used to provide information about the page. The tags contain other tag elements such as the tags and tags.The text you enter in the tags is displayed in the Title bar of your browser.Meta tags are used to provide information about your web site. The content placed inside the meta tag varies widely depending upon the value that is set within the name and content attributes of the tag. Common values for the name attribute include keywords which is used to associate keywords with the site and description. These keywords provide a description of the site for display in search engine results: The tags enclose all the information that will be visible to the users on your web pages.The opening tag can have several attributes. For example, if you want to specify the background color for your web page, you add the bgcolor attribute and specify a hexadecimal color value. For example, you can change the background color of your web page to red: The Document Type Definition, or DTD, describes the markup language used to create the document. It states whether the page was created using HTML 4.01 Strict, HTML 4.01 Transitional, or HTML 4.01 Frameset. The example shows that this web page was created using HTML 4.01 Transitional.The absence of this tag may restrict the use of advanced browser features. GraphicThe DTD is .CodeQuestionYou are starting to build your first web page, and you have entered the structural tags that are needed for the basic structure of the page. You now want to add the title "EarthFarm" to your web page.Enter the title with the appropriate tags. Code space for missing codeINSERT THE MISSING CODEspace for missing code ends AnswerTo give your web page the title "EarthFarm" you enter EarthFarm inside the tags.Correct answer(s):1. EarthFarm 2. EarthFarm 3. EarthFarm4. EarthFarm QuestionWhich set of tags can be used, with the relevant attributes, to relay keywords associated with the site to search engines? Options:1. 2. 3. 4. AnswerOption 1: Incorrect. The tags enclose all the information that the user views onscreen.Option 2: Incorrect. The tags define your document as an HTML page for the browser. They enclose all the other tags and the content in the HTML document.Option 3: Correct. You use tags, along with the name attribute set to keywords and the content attribute containing the relevant keywords, to enable search engines to index your web site correctly.Option 4: Incorrect. The tags are used to display the title of your web page in the browser Title bar.Correct answer(s):3. 3. Elements of an HTML documentThe tags contain all the contents of the document, such as the text and images, that will be visible in the document window of the browser. Different tags are used to format the text and display the images. CodeEarthFarmWelcome to EarthFarmHere at EarthFarm, we base our farming techniques on thedevelopment of biological diversity and the maintenance and replenishment of soil fertility.
We grow vegetables, crops, flowers, and herbs in a completelyorganic environment.We specialise in:Organic foodOrganic vegetablesOrganic fruitOrganic meatFlowers and herbsThe most common tags used in the body of the HTML document are CodeEarthFarmWelcome to EarthFarmHere at EarthFarm, we base our farming techniques on thedevelopment of biological diversity and the maintenance and replenishment of soil fertility.
We grow vegetables, crops, flowers, and herbs in a completelyorganic environment.We specialise in:Organic foodOrganic vegetablesOrganic fruitOrganic meatFlowers and herbs The tags are heading tags. In HTML you can have up to six different heading sizes. The tag defines the largest header and defines the smallest header. Paragraph breaks occur automatically at the end of each heading element. The tags are used to format text in paragraphs. In HTML documents you can't separate blocks of text into paragraphs by pressing the Enter key because white space is not recognized. You have to enclose the text inside the tags.
The
tag creates a single line break in text wherever it is inserted. The
tag has no closing tag. The tag creates a horizontal rule. This is a straight line which extends across a page. This can be used to divide the content into sections. The tag has no closing tag. , and The tag defines an image and attaches it to your web page. This tag requires the src attribute for a graphic to load correctly. The src attribute specifies the name of the graphic file and the location of the file on the computer:Different types of graphic files can be displayed such as JPEG, gif, and PNG files. Other attributes such as the height and width of the image can be specified. The tag has no closing tag. The tags are used to format text. The face attribute enables you to set the font type: TextThe size attribute specifies the size of the text and the color attribute enables you to set the color. You may want to display some content in bulleted or numbered lists. There are different tags used for each of these lists.For a bulleted list, the tags are used. The tag stands for unordered list, which is a bulleted list. It doesn't display the list items numerically or alphabetically.To create an ordered, numerical list, you use the tags.In both types of list, the list items must be preceded by the list item tag. There is no closing tag. CodeEarthFarmWelcome to EarthFarmHere at Earthfarm, we base our farming techniques on the development of biological diversity and the maintenance and replenishment of soil fertility.
We grow vegetables, crops, flowers, and herbs in a completely organic environment. Our livestock are fed a carefully prepared organic diet and are allowed to roam free across our parkland.We specialise in:Organic foodOrganic vegetablesOrganic fruitOrganic meatFlowers and herbsQuestionYou want to format the text "Welcome to EarthFarm" in Arial font face.Without adding unnecessary spaces to the code, enter the appropriate tags and text. Code EarthFarmspace for missing codeINSERT THE MISSING CODEspace for missing code ends AnswerTo display the text "Welcome to EarthFarm" in Arial, you type Welcome to EarthFarm.Correct answer(s):1. Welcome to EarthFarm QuestionMatch the tags with their descriptions. Options:A. B. C. D. Targets:1. Embeds a graphic in a web page2. Creates a straight line which extends across the page3. Formats text size and type4. Groups text into paragraphsAnswerThe tag uses the src attribute to specify the graphic file to embed and the location of the file.The tag creates a horizontal rule, which can be used to divide content into sections.The tags enable you to specify the font face and size by using the face and size attributes.The tags organize blocks of text into paragraphs.Correct answer(s):Target 1 = Option ATarget 2 = Option BTarget 3 = Option CTarget 4 = Option DSummaryHTML tags, also referred to as elements, tell the browser how to display content. Tags consist of a text command inside angled brackets. There are two types of tags container tags and empty tags. Container tags have opening and closing tags and empty tags only have opening tags. Tags have attributes and values.There are several key structural tags that are common to every HTML page. These include the tag, which defines the document as an HTML page, the tag, which contains information about the page, and the tag, which contains the information that will be visible to the user. The DTD describes the markup language used to create the document.Because the body of the HTML document contains the visible content, the tag contains many other nested tags. Some of the most common ones are those for attaching an image , creating a paragraph , creating a horizontal rule , and formatting text . Creating a Web Page Learning Objective After completing this topic, you should be able to create a basic web pageExercise overviewIn this exercise, you're required to create a basic web page displaying product information.This involves creating a web page. You work for a company called EarthFarm, which sells organic foodstuffs and herbs. You want to create a web page containing some basic information about the company products. Task 1: Creating a web pageYou are starting to build the Produce page of the site. So far, you've entered the structural tags. You now want to build up the rest of the page. CodeQuestionYou have given the title "EarthFarm Produce" to your web page.Add the closing tag for the title of your web page. Code EarthFarm Producespace for missing codeINSERT THE MISSING CODEspace for missing code ends AnswerThe closing tag has the same name tag as the opening tag. It also has a forward slash (/) after the first angle bracket and before the start of the name tag. To close the title tag, you add the closing tag.Correct answer(s):1. QuestionYou want to change the background color of your web page from the default white color to a yellow color.Enter the attribute to change the background color to a shade of yellow. The hexadecimal color value is #FFFFCC. Code EarthFarm Produce AnswerTo change the color of your web page to a shade of yellow, you enter the body tag attribute bgcolor="#FFFFCC".Correct answer(s):1. bgcolor="#FFFFCC" QuestionYou want the main heading on the page to be "About our produce".Enter the code to create the main heading. Code EarthFarm Producespace for missing codeINSERT THE MISSING CODEspace for missing code ends AnswerThe tags are heading tags. To display "About our produce" as the main heading, you type About our produce. The tag defines the largest header.Correct answer(s):1. About our produce QuestionYou have entered the text for your first paragraph and now you want to add an extra line break after the word "wreaths".Enter the tag to do this. Code EarthFarm ProduceAbout our produceHere at EarthFarm, we grow a wide variety of vegetables, crops, and fruit, including tomatoes, pumpkins, wheat, asparagus, peppers, squash, apples, and strawberries. We also rear cattle, sheep, goats, and chickens, and we produce organic honey from our beehive. We also grow flowers and herbs, which we sell to order or in ready-tied bouquets and wreaths.space for missing codeINSERT THE MISSING CODEspace for missing code ends AnswerThe
tag creates a single line break in text wherever it is inserted. The
tag has no closing tag.Correct answer(s):1.
QuestionYou have created the structure of an unordered list and now you need to enter the list items.Add the text "Pumpkins" as your first list item. Code EarthFarm ProduceAbout our produceHere at EarthFarm, we grow a wide variety of vegetables, crops, and fruit, including tomatoes, pumpkins, wheat, asparagus, peppers, squash, apples, and strawberries. We also rear cattle, sheep, goats, and chickens, and we produce organic honey from our beehive. We also grow flowers and herbs, which we sell to order or in ready-tied bouquets and wreaths.
Organic Vegetablesspace for missing codeINSERT THE MISSING CODEspace for missing code ends AnswerList items must be preceded by the list item tag. There is no closing tag. To create a list item called "Pumpkins", you type Pumpkins.Correct answer(s):1. Pumpkins QuestionAfter you complete the bulleted list, you want to add the text "We sell only organic produce." and format it in Arial font face.Add the appropriate code to your HTML file. Code Here at EarthFarm, we grow a wide variety of vegetables, crops, and fruit, including tomatoes, pumpkins, wheat, asparagus, peppers, squash, apples, and strawberries. We also rear cattle, sheep, goats, and chickens, and we produce organic honey from our beehive. We also grow flowers and herbs, which we sell to order or in ready-tied bouquets and wreaths.
Organic VegetablesPumpkinsTomatoesPotatoesCeleryBeansPeppersOnionsGarlicspace for missing codeINSERT THE MISSING CODEspace for missing code ends AnswerThe tags are used to format text. You can also add an attribute, such as a font face or size. To display the text "We sell only organic produce." in Arial, you enter We sell only organic produce..Correct answer(s):1. We sell only organic produce. Finally, you preview the web page in your browser. Hyperlinks, Tables, and Forms Learning Objectives After completing this topic, you should be able to insert hyperlinks into a web page recognize tags used to create a table in HTML recognize the tags that are used to create forms in HTML1. HyperlinksHyperlinks provide a clickable link between web pages on the Internet.You can create a hyperlink that's linked to another page within the same site, to a page on another site, or to a section of the current page.A hyperlink can be represented by text or an image. GraphicThe product.htm web page contains the following text: "At EarthFarm we sell only organic produce in our farm shop. You can see our complete product list here." The word "here" is a hyperlink.An external hyperlink links two web pages. Try ItYou want to view the HTML for the external hyperlink.To complete the task1. Select View - SourceUsing keyboard: The keyboard alternative is Alt+V, C. The HTML for the external hyperlink displays.The HTML for the link is displayed. You scroll through it to view the link at the bottom of the page. GraphicThis code is highlighted: hereCodeapproach to farming means that in addition to making vegetables, fruit, meat, and honey available to you, we can offer dairy products including goats cheese and yogurt and also preserves and relishes made in our farm kitchen.At EarthFarm we sell only organic produce in our farm shop. You can see our complete produce list here. In HTML, you should have the following elements within an external link: Codehereanchor tags The anchor tags surround the text or image that represents the link on the web page. hypertext reference attribute The hypertext reference attribute, or href attribute, identifies the file or Uniform Resource Locator, also known as URL, that the anchor text or image links to.You place the href attribute within the first anchor tag followed by the equals sign and the page that you want to link to. file or URL, and You can link to a file, a fully qualified URL, or a partial URL. You can also link to another anchor on the current page. In this case, you link to a page in the same folder as the page with the anchor called "produce_list.htm". text for the link The text for this link is the word "here." On the EarthFarm web page, it's underlined and in a different color to the rest of the text. When you move your mouse over it, the pointer changes to a hand so you know it can be clicked. You can also create hyperlinks using an image as the clickable anchor.The file that the image links to is homepage.htm. The image is held in the assets folder of the web site and is called "ef_workers.jpg". GraphicThe sample image-based hyperlink is CodeVisit our recipes page Details about our FarmYou select File - Exit to close the Notepad file that shows the HTML. Try ItYou want to view the hyperlink's target page.To complete the task1. Click the here hyperlink The hyperlink's target page downloads.The produce_list.htm page contains a number of internal links. You use internal links to jump to other parts of the same document without having to scroll. GraphicThere are a number of headings at the top of the page that are also hyperlinks. They are "Organic Food", "Organic Vegetables", "Organic Fruit", "Organic Meat", and "Flowers and Herbs".Try ItYou want to move to other parts of the HTML document without having to scroll.To complete the task1. Click the Organic Vegetables link The Organic Vegetables section of the page displays.You select View - Source to view the HTML code for the produce_list.htm page. Keyboard SequenceThe keyboard alternative is Alt+V, C.You scroll through the source and locate the link for Organic Vegetables in the HTML. CodeOrganic FoodOrganic VegetablesOrganic FruitOrganic MeatFlowers and HerbsIn this case, you first create a named anchor for the Organic Vegetables area. CodeOrganic VegetablesThen you create the link used to jump to the anchor you just created. Within the link's code, the first instance of the words represents the newly-created anchor name, and the second instance represents the link text used to access the target. CodeOrganic FoodOrganic VegetablesOrganic FruitOrganic MeatFlowers and HerbsThe value for the href attribute includes the hash (#) symbol before the target text. The hash symbol tells the browser to search for the text within the page. If you omit the symbol, the link doesn't work. CodeOrganic FoodOrganic VegetablesOrganic FruitOrganic MeatFlowers and HerbsQuestionType the opening anchor tag and attributes for the link to a page called frameset.htm. Code space for missing codeINSERT THE MISSING CODEspace for missing code endsAnswerYou type to create the opening tag and attributes.Correct answer(s):1. 2. TablesTables have a number of functions. They can display tabular data and you can use them to align text and images on a web page. GraphicThe table lists a number of foodstuffs and their prices at given quantities. The table does not display any borders.To view the HTML code for the Organic Food table, you select View - Source. Keyboard SequenceThe keyboard alternative is Alt+V, C.Some of the HTML tags used to create a table are CodeOrganic Food FoodQuantityPriceFlour2 lbs$3Soft Cheese1 lb$3Sugar1 lb$8 The container tags are the main tags for a table, and all other tags are contained within them. These tags are required elements. The tags are used to signify the start and end of a table row. , and Table data tags define the beginning and end of each cell in a row. The tags define the table heading and mark the beginning and the end of the heading text. Heading text is usually placed in the top row or the first column as it defines the data that comes after it. This tag is not mandatory because not all tables require heading text. QuestionWhich table elements define the beginning and end of each row in a table? Options:1. 2. 3. AnswerOption 1: Incorrect. The tags mark the beginning and end of the entire table.Option 2: Incorrect. The tags mark the beginning and end of each cell within a row.Option 3: Correct. The tags are used to define the beginning and end of each row in a table.Correct answer(s):3. Your web browser doesn't show table borders unless specified in the HTML. It makes decisions on how to show other table elements such as text alignment and table width.You can also specify how your table looks in a browser by manipulating the HTML. GraphicThe table lists a number of foodstuffs and their prices at given quantities. The table includes a border.NoteTables with the same settings may not look identical in different browsers.You view the HTML code for the Organic Food table with borders. GraphicThe View menu is open, with Source selected.The HTML code of the Organic Food table with borders is displayed. Code Organic Vegetables FoodQuantity Price Honey1 jar$8 Eggs6$2 Flour2 lbsYou can change the appearance of rows, columns, or the entire table using the following basic attributes: Code Organic Vegetables FoodQuantity Price Honey1 jar$8 Eggs6$2 Flour2 lbswidth The width attribute describes the intended table width, either in pixels, or as a percentage of screen width. For example, you use this code to specify that the table takes up 80% of the screen. Specifying the table width in pixels may result in the table being wider than the screen. This attribute can also be applied to cells in a table. border Table borders are not displayed in browser windows unless specified. To show borders around all cells within tables, you use the border attribute. To draw a border of 5 pixels around all the cells in the table, you use this code. bgcolor You use the bgcolor attribute to specify the background color for the table. The attribute goes in the tag, in the tag, in the tag, or in the tag depending on the table element you wish to color. In this case, the background color is in the tag and specified as white. height The height attribute works in the same way as the width attribute except it is used to specify the height of a table, row, or cell. cellpadding and cellspacing, and You control the white space between the border and the text in the cell using the cellpadding attribute. To prescribe a space of 10 pixels between the cell border and its contents, you use this code.The white space between cells can be controlled using the cellspacing attribute. To ensure there is a one pixel space between cells in a table, you use this code. rowspan and colspan The attributes rowspan and colspan when placed within the or tags enable you to span a heading across the rows or columns of your table respectively. To create the heading "Organic Vegetables" in an Arial font and size 4 spanning across three columns, you use this code. You view the source for a web page on the EarthFarm site. The page comprises a table. Code Visit our recipes page There are a number of alignment attribute options available to you when using tables to display data. align You can place the align attribute within the tags, the tags, the tags, the tags, or the tags to align the table or parts of it to the left, right, or center.For example, horizontally aligns the entire table to the right. valign The valign attribute vertically aligns text within a row or cell. Its values are top, middle, and bottom. The valign attribute is generally used with the , , and tags. halign The halign attribute horizontally aligns text within a row or cell. Its values are left, center, and right. The halign attribute is commonly used with the , , and tags. QuestionInsert the opening tag for a table that's 200 pixels wide. Specify that it's centrally aligned and has a border width of 1. Code space for missing codeINSERT THE MISSING CODEspace for missing code ends AnswerYou type to create a table that is 200 pixels wide and centrally aligned with a border width of 1.Correct answer(s):1. 3. FormsForms are used in HTML pages to collect user input and forward it to a web server.Forms are widely used in online surveys, online banking, online shopping, information requests, and for site registration purposes. You can enter and submit data by using controls such as checkboxes, radio buttons, text fields, and submit buttons.Data is processed using Common Gateway Interface, or CGI, scripts located at the web server or client-side scripts that are run by the client's browser. The tags are used in an HTML document to signify the beginning and end of a form.Various attributes need to be added to the tag to ensure the form works correctly. These include method, action, and enctype. GraphicIn the sample HTML page, the code that defines the beginning of a form is:The code that defines the end of the form is: CodeUntitled DocumentQuick survey:

We are considering adding carrots to our list of organic vegetables.

Do you like carrots?

Yes.
No.
The method attribute specifies which method the browser uses to send form data to a web server. You can use the get or post value with this attribute. GraphicIn the sample HTML page, the code that defines the method, action, and enctype attributes of a form is: CodeQuick survey:

We are considering adding carrots to our list of organic vegetables.

Do you like carrots?

Yes.
No.
The get value specifies that the form data is appended to the URL for use in a query string.The post value specifies that the form data is posted to the URL, which is specified by the action attribute. The action attribute specifies the name and location of the CGI script used to process the form. The enctype attribute sets a MIME type for the data being sent to the web server. In this case, the value for the enctype attribute is "text/plain". When creating a form, you can use a number of tags to create fields. CodeDo you like carrots?

highlighted code begins Yes.
highlighted code endshighlighted code begins No.highlighted code ends

What are your favorite vegetables?

highlighted code beginshighlighted code endshighlighted code beginsBeanshighlighted code endshighlighted code beginsBroccolihighlighted code endshighlighted code beginsCeleryhighlighted code endshighlighted code beginsPeppershighlighted code endshighlighted code beginsPotatoeshighlighted code endshighlighted code beginsTomatoeshighlighted code endshighlighted code beginshighlighted code ends

Do you like any other vegetables? If so, please specify:

highlighted code beginshighlighted code ends

< input name="like_carrots" type="radio" value="Y"> Yes.
< input name="like_carrots" type="radio" value="N"> No. Most controls are added to a form using the tag. The tag is an empty tag. The type of control that is displayed is decided using the type attribute. You can specify various types of control by using this attribute. < select name="favorite_veg" size="6" multiple>BeansBroccoliCeleryPeppersPotatoesTomatoes The tags are used to define the start and end of a select list in a form. Various attributes can be used with the tag. The name attribute is used to name the list. The multiple attribute is used to specify whether multiple options can be selected from the list. The display of each option in the list requires further HTML coding using tags. < textarea name="notes" cols="50" rows="8"> The tags enable the insertion of a multiline text input area into a form. These are commonly used for lengthy user input such as comments in a survey. Various attributes are added to the tag to identify it and control how it is displayed. These attributes include name, rows, and cols. The name attribute gives the data entered into the text area a name, rows is used to specify the height of the text area in rows, and cols is used to specify the character width of the text area. You can preview the form to check that its displaying correctly. Some of the more common type attribute controls include text The text attribute is used to display a text field. Additional attributes such as name and value can be added to a text input to give it a name, recognizable by a CGI script, and a default value.For example, you can create a text field called "identity", with a default value of "Do you like any other vegetables?" checkbox The checkbox attribute will display the input as a small box that can be checked or unchecked. When checked, the value attribute of the checkbox is activated.To ensure that a checkbox is checked by default, you can use the checked attribute.For example, you can create a checkbox called "maillist" with a value of "Yes" that is checked by default. radio Radio buttons are round option buttons in a group of two or more that are mutually exclusive options. Radio buttons are useful for getting a response to a multiple choice question in a form.When creating a group of radio buttons, you must ensure that they have the same value in the name attribute.For example, you can create a radio button group called "survey" that enables a user to either select Yes or No as an option. submit If the type attribute is set to submit, a Submit button is displayed in the form. Submit buttons are used to send the form data to the relevant CGI script on the web server for processing.You set the text that appears on the button by using the value attribute. This element is displayed by default. reset, and If the type attribute is set to reset, a Reset button is displayed in the form. Reset buttons are used to set all of the form inputs to the default or blank values.This is a useful way for the user to clear the form if a mistake is made during data input. hidden Hidden inputs are used to include a value in the form that the user does not need to see. The hidden input is named using the name attribute and has its value added to it by using the value attribute.For example, you can add a hidden input called "action", with a value of delete. Each option in the select list needs to be given a value and text to identify it. This is done by adding the value attribute to the tag.The text used to identify the option in the list is entered between the tags. CodeApplesPearsQuestionYou are creating an HTML form and wish to place a user input on the screen called "comments" that enables the user to enter multiple lines of text.Identify the correct code to enable this. Options:1. 2. 3. AnswerOption 1: Correct. You can also specify the size of the text input area using rows which specifies the height of the text area in rows and cols which specifies the character width of the text area attributes.Option 2: Incorrect. The code creates a text field with only one line.Option 3: Incorrect. The code creates a radio button called comments.Correct answer(s):1. QuestionMatch each tag to its description. Options:A. B. C. Targets:1. An empty tag where the type of control displayed depends on the type attribute specified2. A container tag that creates select lists3. A tag that creates text area spacesAnswerThe tag is used to create text boxes, checkboxes, radio buttons, and the Submit and Reset buttons.The tag also creates multiple select lists.The tag is a container tag.Correct answer(s):Target 1 = Option ATarget 2 = Option BTarget 3 = Option CQuestionYou want to create a form that is used by web site visitors to submit data to a CGI script called "sendmail.php".Modify the opening tag by adding the attribute and value that specifies this. Code