Cognizant E-learning Modules
-
Upload
latika-parashar -
Category
Documents
-
view
2.916 -
download
6
description
Transcript of Cognizant E-learning Modules
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