1
Contents
Contents
... 0
HTML
... 9
Introduction to HTML ... 9
HTML Structures and Elements ... 15
Creating a Web Page
... 29
Hyperlinks, Tables, and Forms
... 35
Image Maps and Style Sheets ... 54
Enhancing Web Pages ... 64
Client-side and Server-side Scripts
... 74
Advanced Markup Languages
... 81
Managing and Connecting to Databases ... 89
Understanding Advanced Web Techniques ... 96
EXCEL ... 101
Opening an Excel 2010 Workbook
... 101
Introducing the Excel 2010 Interface
... 109
Creating a New Excel 2010 Workbook and Entering Data
... 122
Opening Workbooks and Entering Data in Excel 2010 ... 134
Formatting Text and Cells in Excel 2010 ... 137
Aligning data in Excel 2010
... 148
Formatting Numbers in Excel 2010 ... 154
Formatting Data in Excel 2010 ... 167
Introducing Formulas and References in Excel 2010 ... 170
Inserting Formulas in Excel 2010
... 179
Editing and Correcting Common Formula Errors ... 192
Entering a Formula and Using References in Excel 2010 ... 202
Using Tables and Applying Table Styles in Excel 2010
... 205
Applying Conditional Formats in Excel 2010
... 217
Using Sparklines in Excel 2010
... 226
Using Tables, Conditional Formatting, and Sparklines ... 239
2
UNIX Philosophy and History ... 242
UNIX Portability and Standards ... 248
UNIX Distributions
... 255
Choosing a UNIX Distribution
... 261
UNIX Implementations ... 266
The Basics of Using UNIX ... 273
Getting Started with a UNIX System
... 284
Understanding UNIX Shell Scripts
... 288
Choosing UNIX Shells
... 302
Creating and Running an Executable File in UNIX ... 308
Choosing UNIX Shells and Running Scripts ... 320
UNIX Command Execution
... 326
Redirection in UNIX
... 334
Substitution and Patterns in UNIX ... 345
Using UNIX Commands in a Script ... 353
UNIX Files and Directories
... 359
The UNIX File System
... 366
File Creation, Deletion, and Permissions in UNIX ... 383
Using the UNIX File System ... 393
Searching UNIX Files with Patterns
... 398
Working with UNIX directories
... 417
Searching and Organizing a UNIX File System ... 433
Introduction to Windows 7 ... 443
The Windows 7 Desktop
... 451
The Windows 7 Start Menu and Taskbar
... 458
Getting Around the Windows 7 Interface ... 469
Using Windows Explorer ... 471
Searching for Files and Folders
... 485
Navigating Windows and Searching for Files
... 491
Installing and Removing Programs... 494
Installing and Using Printers ... 501
Working with Programs, Printers, and the Control Panel
... 513
3
Windows 7 Security ... 530
Backing up and Restoring Folders and Files ... 540
Performing Maintenance and Security Tasks
... 554
Customizing the Windows 7 Desktop
... 558
Customizing the Start Menu ... 568
Customizing the Taskbar ... 576
Customizing the Windows 7 Interface
... 584
DBMS
... 587
Overview of Databases and DBMSs
... 587
The Database Architectures and Models ... 597
Identifying Database Systems ... 612
Relational Database Concepts
... 620
The Relational Database Schema
... 630
Database Normalization ... 639
Identifying the Relational Database Concepts and Schema ... 646
Designing a relational database
... 652
The database design life cycle
... 659
Database design requirements analysis ... 665
Interviewing for business requirements gathering ... 669
Developing the conceptual database design
... 679
Creating a conceptual database design
... 686
Database design using Entity-Relationship modeling ... 691
Designing a database using Entity-Relationship modeling ... 701
Normalizing the database design
... 707
Modeling complex relationships in the database design
... 714
A database design Entity-Relationship model ... 721
Completing the logical database design ... 723
Implementing the database design
... 732
Creating a physical database design
... 741
Databases v. Database Management Systems ... 747
Database requirements ... 755
A sample database system
... 757
4
Database architectures ... 769
Designing a database architecture ... 779
OLTP databases v. data warehousing
... 781
Oracle RDBMS and ORDBMS
... 783
The Oracle9i database server ... 786
Relational Database Concepts ... 796
Relational database characteristics
... 803
The relational database schema
... 806
Relational database integrity
... 813
Operations in a relational database ... 815
Formulating algebraic operations in a database ... 824
Using SQL in a relational database
... 829
Writing basic SQL statements
... 840
Manipulating data in Oracle9i databases ... 844
Using DML statements in an Oracle9i database ... 855
Database transactions and concurrency problems
... 861
Resolving concurrency problems in a database
... 867
Database security... 874
Oracle9i database users ... 880
Privileges in an Oracle9i database
... 885
Programming languages
... 889
The Evolution of Computers and Software Programming ... 889
Software Development Life Cycle ... 900
Programming Basics
... 908
Program Development Tools
... 914
Understanding Programming Basics ... 921
Algorithms Explained ... 929
Creating an Algorithm
... 946
Structuring an Algorithm
... 952
IF Statements ... 963
CASE Statements ... 976
Solving a Problem using Branching Statements
... 986
5
FOR Loops ... 1007
WHILE Loops ... 1016
Solving a Repetition Problem
... 1028
Using Loops
... 1044
The history of computers ... 1050
Programming princples ... 1059
Software life cycle phases
... 1070
Program development
... 1075
Defining algorithms
... 1083
Construction an algorithm ... 1093
Creating an algorithm ... 1102
Variables, constants, and data types
... 1107
Expressions and statements
... 1114
Building expressions ... 1122
Variables, Constants, and Data Types ... 1131
Expressions and Statements
... 1140
Building Expressions
... 1153
Arrays ... 1159
Procedures and Functions ... 1170
Using Arrays and Procedures
... 1186
Software Engineering concepts
... 1193
Analyzing Requirements Using Models SkillBriefs ... 1193
SkillBrief ... 1194
Use Case Modeling
... 1194
Usage Modeling Techniques
... 1199
Usage Modeling Techniques ... 1203
Data and Behavior Modeling Techniques ... 1207
Class Diagrams
... 1210
Solution Development Methodologies
... 1212
Business Rules ... 1215
Data Flow Diagrams ... 1218
Data Flow Diagrams
... 1221
6
Refining and Documenting Requirements SkillBriefs ... 1228
Functional Requirements ... 1229
Quality of Service Requirements
... 1231
Decomposing Requirements
... 1233
Constraints and Assumptions ... 1235
Requirements Attributes ... 1237
Types of Requirements Documents
... 1239
Validating and Verifying Requirements
... 1241
Software testing
... 1244
The Necessity of Software Testing ... 1244
What is Software Testing? ... 1251
Meeting Software Test Objectives
... 1255
General Software Testing Principles
... 1261
Applied Software Testing Principles ... 1265
The Importance of Software Testing and Mitigating Harm ... 1272
The Fundamental Software Test Process
... 1278
Exit Criteria and Test Closure Activities
... 1286
The Psychology of Software Testing ... 1291
Contrasting Software Testers and Developers ... 1298
Organizing Testers and the Software Test Process
... 1302
Software Development Models
... 1307
Component and Integration Testing ... 1314
System and Acceptance Testing ... 1320
Testing to Reveal Defects
... 1328
Functional and Non-functional Software Testing
... 1333
Structural and Changed-based Software Testing ... 1341
Maintenance Software Testing ... 1350
Models of Software Testing and Development
... 1356
ENGLISH
... 1360
SkillBrief ... 1361
End Punctuation Marks ... 1361
Using the Comma Correctly
... 1363
7
Using Other Punctuation Marks ... 1366
Business Grammar: Sentence Construction SkillBriefs ... 1369
Sentence Parts, Phrases, and Clauses
... 1369
The Rules of Subject-Verb Agreement
... 1371
Rules of Agreement for Pronouns and Antecedents ... 1373
Sentence Fragments, Comma Splices, and Modifiers ... 1375
Business Grammar: Common Usage Errors SkillBriefs
... 1378
Recognizing Commonly Confused Word Pairs
... 1378
Using Prepositions Idiomatically
... 1380
Recognizing Commonly Misused Verbs and Other Words ... 1382
Business Grammar: Parts of Speech SkillBriefs ... 1384
Recognizing the Eight Parts of Speech
... 1384
Using Verbs Correctly
... 1386
Using Adverbs and Adjectives ... 1388
Using Nouns Correctly ... 1390
Rules for Constructing Prefixes and Suffixes
... 1393
Rules for Forming Plurals
... 1395
Rules for Forming Possessives ... 1396
Basic Spelling Rules ... 1398
Business Grammar: The Mechanics of Writing SkillBriefs
... 1400
The Correct Use of Abbreviations
... 1400
The Correct Methods of Capitalization ... 1402
Writing Numbers ... 1405
Interpersonal Communication: Communicating with Confidence SkillBriefs
... 1408
The Essential Elements of Confident Communication
... 1408
The Use and Impact of Confident Communication Behaviors ... 1410
Trust, Credibility, Rapport, and Confidence ... 1412
Business Writing: How to Write Clearly and Concisely SkillBriefs
... 1415
Techniques for Writing Clearly
... 1415
Applying the Techniques of Concise Writing ... 1417
Organizing Content to Increase Understanding ... 1420
Developing an Effective VOICE
... 1436
8
The Benefits of a Well-placed Pause ... 1440
Understanding the Seven Levels of Listening ... 1441
The Most Common Obstacles to Listening
... 1443
Overcoming Self-made Barriers to Listening
... 1445
Recognizing Non-verbal Messages ... 1446
Interpreting Four Modes of Non-verbal Expression ... 1448
Responding Appropriately to Body Language
... 1450
Workplace Communication Skills SkillBriefs
... 1451
Three Interpersonal Communication Styles
... 1452
Four Types of Assertive Responses ... 1454
Assertive Interpersonal Negotiation Techniques ... 1456
Using Constructive Criticism and Feedback
... 1457
Criteria for Giving Constructive Criticism
... 1458
Accepting Criticism in a Positive Manner ... 1460
Using Open and Closed Questions ... 1461
How to Use Exploratory Questions
... 1462
Using Leading Questions to Persuade
... 1463
Listening Basics SkillBriefs ... 1464
The Seven Components of Communication ... 1465
The Seven Components of Communication
... 1466
How People Communicate Simultaneously
... 1467
How You Receive Information ... 1468
Three Types of Attention Problems ... 1470
Common Causes of Misinterpreted Messages
... 1471
Strategies for Improving Your Listening Skills
... 1472
9
HTML
Introduction to HTML
Learning ObjectivesAfter completing this topic, you should be able to
identify the current HTML standards
recognize what HTML is
identify common HTML editing applications and their functions
1. Introduction to HTML
Hypertext 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.
10
Question
Identify the characteristics of HTML.
Options:
1. It's a markup language 2. It's an SGML
3. It can be written using a text editor 4. It's a programming language
5. It can be written using a WYSIWYG editor
Answer
Option 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 language
3. It can be written using a text editor 5. It can be written using a WYSIWYG editor
2. HTML standards
The 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.
11
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.
Note
The 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
12
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.
Question
Which XHTML document type definition enables you to use deprecated elements and attributes?
Options:
1. XHTML Transitional 2. XHTML Frameset 3. XHTML Strict
Answer
Option 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 Transitional
3. HTML editors
There 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
13
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.
Question
Identify the applications that can be used as WYSIWYG HTML editors.
Options:
1. Adobe Dreamweaver 2. Microsoft Expression Web 3. Notepad
4. Microsoft Word
Answer
Option 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.
14
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 Dreamweaver 2. Microsoft Expression Web
Summary
HTML 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.
15
HTML Structures and Elements
Learning ObjectivesAfter 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 document
1. HTML tag components
HTML 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.
Graphic
An example of a tag is <html>.Code
<html> <head> <title>EarthFarm</title> </head> <body><font face="Arial">Welcome to the EarthFarm web site</font> <hr>
</body> </html>
There are two types of tags:
Code
16
<html> <head> <title>EarthFarm</title> </head> <body><font face="Arial">Welcome to the EarthFarm web site</font> <hr>
</body> </html>
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 <p> as the opening tag and </p> as the closing tag.
empty tags
Empty tags are opening tags that don't have a closing tag. Some examples include the list <li>, horizontal line <hr>, and the line break <br> tags. If you need to make HTML code XHTML-compliant, you should include a forward slash in empty HTML tags. For example <br> should be written as </br>.
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 <b> tag before and the </b> tag after the text you want formatted. Placing <u> </u> on either side of some text will underline the enclosed text. The <i> </i> tags will italicize the enclosed text.
Code
<html> <head>
17
<title>EarthFarm</title></head> <body>
<font face="Arial"><b>Welcome to the EarthFarm web site</b></font> <hr>
</body> </html>
Tags can also be nested or contained inside other tags. The <body> </body> 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
<html> <head> <title>EarthFarm</title> </head> <body><font face="Arial"><b>Welcome to the EarthFarm web site</b></font> <hr>
</body> </html>
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.
18
Code
<html> <head> <title>EarthFarm</title> </head> <body><font face="Arial"><b>Welcome to the EarthFarm web site<b></font> <hr>
</body> </html>
Syntax
<tagname attribute_name = "value">
Question
You want to format the text "Welcome to the EarthFarm web site" in italics. Enter the necessary tags and text.
Code <html> <head> <title>EarthFarm</title> </head> <body>
<font face="Arial">INSERT THE MISSING CODE
Answer
19
To format "Welcome to EarthFarm web site" in italics you type <i>Welcome to the EarthFarm web site</i>.
Correct answer(s):
1. <i>Welcome to the EarthFarm web site</i>
Question
In the HTML code <font size="2">, match each individual component with the correct description. Options: A. 2 B. font C. size Targets: 1. Attribute 2. Tag 3. Value
Answer
The size attribute tells the browser to display the text enclosed within the <font></font> tags at a specified size.
The <font> </font> tags tell the browser to format the enclosed text in a particular way.
The value of 2, combined with the <font> </font> 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 C Target 2 = Option B Target 3 = Option A
20
2. Structural HTML tags
Every HTML page has common structural tags that are needed to build the page.
Code
<html> <head> <title></title> </head> <body> </body> </html>There are several common structural tags needed in each HTML page:
Code
<html> <head> <title></title> </head> <body> </body> </html> <html> </html>21
The <html> </html> 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 <html> 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:
<html lang = "en">
<head> </head>, and
The <head> </head> tags are used to provide information about the page. The <head> </head> tags contain other tag elements such as the <title> </title> tags and <meta> tags.
The text you enter in the <title> </title> 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:
<meta name="keywords"content="organic, fruit, vegetables">
<body> </body>
The <body> </body> tags enclose all the information that will be visible to the users on your web pages.
The opening <body> 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: <body bgcolor ="#ff0000">
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.
Graphic
The DTD is <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">.
22
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd"> <html> <head> <title></title> </head> <body> </body> </html>
Question
You 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
<html> <head>
INSERT THE MISSING CODE </head>
<body>
</body> </html>
Answer
23
To give your web page the title "EarthFarm" you enter <title>EarthFarm</title> inside the <head> </head> tags.
Correct answer(s):
1. <title>EarthFarm</title> 2. <title> EarthFarm </title> 3. <title> EarthFarm</title> 4. <title>EarthFarm </title>
Question
Which set of tags can be used, with the relevant attributes, to relay keywords associated with the site to search engines?
Options: 1. <body> </body> 2. <html> </html> 3. <meta> 4. <title> </title>
Answer
Option 1: Incorrect. The <body> </body> tags enclose all the information that the user views onscreen.
Option 2: Incorrect. The <html> </html> 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 <meta> 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 <title> </title> tags are used to display the title of your web page in the browser Title bar.
Correct answer(s):
24
3. Elements of an HTML document
The <body> </body> 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.
Code
<html>
<head><title>EarthFarm</title></head> <body>
<h1><font face= "Arial">Welcome to EarthFarm</font></h1> <hr>
<p><font face="Arial" size="2">
Here at EarthFarm, we base our farming techniques on the development of biological diversity and the maintenance and replenishment of soil fertility.<br>
We grow vegetables, crops, flowers, and herbs in a completely organic environment.</font></p>
<p><font face="Arial" size="2">We specialise in: <ul>
<li>Organic food
<li>Organic vegetables <li>Organic fruit <li>Organic meat <li>Flowers and herbs </ul></font></p>
<p><img align="center" src="ef_cows.jpg" border="0"></p> </body>
</html>
The most common tags used in the body of the HTML document are
Code
<html>
<head><title>EarthFarm</title></head> <body>
<h1><font face= "Arial">Welcome to EarthFarm</font></h1> <hr>
<p><font face="Arial" size="2">
Here at EarthFarm, we base our farming techniques on the development of biological diversity and the maintenance and replenishment of soil fertility.<br>
25
organic environment.</font></p><p><font face="Arial" size="2">We specialise in: <ul>
<li>Organic food
<li>Organic vegetables <li>Organic fruit <li>Organic meat <li>Flowers and herbs </ul></font></p>
<p> <img align="center" src="ef_cows.jpg" border="0"></p> </body>
</html>
<h1> </h1>
The <h1> </h1> tags are heading tags. In HTML you can have up to six different heading sizes. The tag <h1> defines the largest header and <h6> defines the smallest header. Paragraph breaks occur automatically at the end of each heading element.
<p> </p>
The <p> </p> 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 <p> </p> tags.
<br>
The <br> tag creates a single line break in text wherever it is inserted. The <br> tag has no closing tag.
<hr>
The <hr> 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 <hr> tag has no closing tag.
<img>, and
The <img> 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:
<img src = "image_name.file_extension">
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 <img> tag has no closing tag.
<font> </font>
The <font> </font> tags are used to format text. The face attribute enables you to set the font type:
26
The 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 <ul> </ul> tags are used. The tag <ul> 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 <ol> </ol> tags.
In both types of list, the list items must be preceded by the <li> list item tag. There is no closing tag.
Code
<html>
<head><title>EarthFarm</title></head> <body>
<h1><font face= "Arial">Welcome to EarthFarm</font></h1> <hr>
<p><font face="Arial" size="2">
Here at Earthfarm, we base our farming techniques on the development of biological diversity and the maintenance and replenishment of soil fertility.<br>
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.</font></p>
<p><font face="Arial" size="2">We specialise in: <ul>
<li>Organic food
<li>Organic vegetables <li>Organic fruit <li>Organic meat <li>Flowers and herbs </ul></font></p>
<p><img align="center" src="ef_cows.jpg" border="0"></p> </body>
</html>
Question
27
You 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
<html>
<head><title>EarthFarm</title></head> <body>
<h1>INSERT THE MISSING CODE
Answer
To display the text "Welcome to EarthFarm" in Arial, you type <font face="Arial">Welcome to EarthFarm</font>.
Correct answer(s):
1. <font face="Arial">Welcome to EarthFarm</font>
Question
Match the tags with their descriptions.
Options: A. <img> B. <hr> C. <font> </font> D. <p> </p> Targets:
1. Embeds a graphic in a web page
2. Creates a straight line which extends across the page 3. Formats text size and type
4. Groups text into paragraphs
Answer
The <img> tag uses the src attribute to specify the graphic file to embed and the location of the file. The <hr> tag creates a horizontal rule, which can be used to divide content into sections.
28
The <font> </font> tags enable you to specify the font face and size by using the face and size attributes.
The <p> </p> tags organize blocks of text into paragraphs. Correct answer(s): Target 1 = Option A Target 2 = Option B Target 3 = Option C Target 4 = Option D
Summary
HTML 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 <html> tag, which defines the document as an HTML page, the <head> tag, which contains information about the page, and the <body> 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 <body> tag contains many other nested tags. Some of the most common ones are those for attaching an image <img>, creating a paragraph <p>, creating a horizontal rule <hr>, and formatting text <font> </font>.
29
Creating a Web Page
Learning ObjectiveAfter completing this topic, you should be able to
create a basic web page
Exercise overview
In 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 page
You 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.
Code
<html> <head> </head> <body> </body> </html>Question
You have given the title "EarthFarm Produce" to your web page. Add the closing tag for the title of your web page.
Code
<html> <head>
30
</head> <body> </body> </html>Answer
The 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 </title> tag.
Correct answer(s): 1. </title>
Question
You 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 <html> <head> <title>EarthFarm Produce</title> </head>
<body INSERT THE MISSING CODE>
</body> </html>
Answer
To change the color of your web page to a shade of yellow, you enter the body tag attribute bgcolor="#FFFFCC".
31
1. bgcolor="#FFFFCC"Question
You want the main heading on the page to be "About our produce". Enter the code to create the main heading.
Code <html> <head> <title>EarthFarm Produce</title> </head> <body bgcolor="#FFFFCC"> INSERT THE MISSING CODE
</body> </html>
Answer
The <h1> </h1> tags are heading tags. To display "About our produce" as the main heading, you type <h1>About our produce</h1>. The tag <h1> defines the largest header.
Correct answer(s):
1. <h1>About our produce</h1>
Question
You 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 <html> <head> <title>EarthFarm Produce</title> </head> <body bgcolor="#FFFFCC"> <h1>About our produce</h1> <p>
32
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.
</p>
INSERT THE MISSING CODE
</body> </html>
Answer
The <br> tag creates a single line break in text wherever it is inserted. The <br> tag has no closing tag.
Correct answer(s): 1. <br>
Question
You 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 <html> <head> <title>EarthFarm Produce</title> </head> <body bgcolor="#FFFFCC"> <h1>About our produce</h1> <p>
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.
</p> <br>
33
<h2>Organic Vegetables</h2><ul>
INSERT THE MISSING CODE
</body> </html>
Answer
List items must be preceded by the <li> list item tag. There is no closing tag. To create a list item called "Pumpkins", you type <li>Pumpkins.
Correct answer(s): 1. <li>Pumpkins
Question
After 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
<p>
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. </p> <br> <h2>Organic Vegetables</h2> <ul> <li>Pumpkins <li>Tomatoes <li>Potatoes <li>Celery <li>Beans <li>Peppers <li>Onions <li>Garlic </ul>
34
INSERT THE MISSING CODE</body> </html>
Answer
The <font> </font> 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 <font face = "arial">We sell only organic produce.</font>.
Correct answer(s):
1. <font face = "arial">We sell only organic produce.</font>
35
Hyperlinks, Tables, and Forms
Learning ObjectivesAfter 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 HTML
1. Hyperlinks
Hyperlinks 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.
Graphic
The 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 It
You want to view the HTML for the external hyperlink. To complete the task
1. Select View - Source
Using 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.
Graphic
36
Code
approach 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.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="2">At EarthFarm we sell only organic produce in our farm shop. You can see our complete produce list <a href="produce_list.htm">here</a>.</font></p>
<!-- #EndEditable --></td> </tr>
</table> </td>
<td height="380" width="160" align="left" valign="top"> <!-- #BeginEditable "info1" -->
<table width="160" border="0" height="600" align="right" bordercolor="#000000">
<tr>
<td align="center" valign="top" height="40"> </td> </tr>
<tr>
<td align="center" valign="top" height="196"> <div align="left">
<p align="center"><a href="recipes.htm"><img src="assets/eggplant.jpg" width="133"height="133" border="0"></a>
<p/>
In HTML, you should have the following elements within an external link:
Code
<a href="produce_list.htm">here</a>
anchor tags
The anchor tags <a> </a> 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.
37
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".
Graphic
The sample image-based hyperlink is <a href="homepage.htm"><img src="assets/ef_workers.jpg" width="130" height="130" border="0"></a></p>
Code
<p align="center"><font size="2" face="Arial, Helvetica, sans-serif"> <a href="recipes.htm">Visit
our recipes page </a></font></p> </div> </td> </tr> <tr> <td align="left" valign="top"> <p align="center"><a href="homepage.htm"> <img src="assets/ef_workers.jpg"
width="130" height="130" border="0"></a></p> <p align="center"><font size="2" face="Arial, Helvetica, sans-serif">
<a href="homepage.htm">Details
38
</td>You select File - Exit to close the Notepad file that shows the HTML.
Try It
You want to view the hyperlink's target page. To complete the task
1. 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.
Graphic
There 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 It
You want to move to other parts of the HTML document without having to scroll. To complete the task
1. 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 Sequence
The keyboard alternative is Alt+V, C.
You scroll through the source and locate the link for Organic Vegetables in the HTML.
Code
39
<td height="36" colspan="3"><font face="Arial, Helvetica, sans-serif" size="2"> <b>
<a href="#OrganicFood">Organic Food</a> <a href="#OrganicVegetables">Organic
Vegetables</a>
<a href="#OrganicFruit">Organic Fruit</a> <a href="#OrganicMeat">Organic Meat</a> <a href="#FlowersandHerbs">Flowers and Herbs</a> </b>
</font> </td>
In this case, you first create a named anchor for the Organic Vegetables area.
Code
<a name="OrganicVegetables">Organic Vegetables</a>
Then 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.
Code
<td height="36" colspan="3">
<font face="Arial, Helvetica, sans-serif" size="2"> <b>
<a href="#OrganicFood">Organic Food</a> <a href="#OrganicVegetables">Organic
Vegetables</a>
<a href="#OrganicFruit">Organic Fruit</a> <a href="#OrganicMeat">Organic Meat</a> <a href="#FlowersandHerbs">Flowers and Herbs</a> </b>
</font> </td>
The 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.
40
<td height="36" colspan="3"><font face="Arial, Helvetica, sans-serif" size="2"> <b>
<a href="#OrganicFood">Organic Food</a> <a href="#OrganicVegetables">Organic
Vegetables</a>
<a href="#OrganicFruit">Organic Fruit</a> <a href="#OrganicMeat">Organic Meat</a> <a href="#FlowersandHerbs">Flowers and Herbs</a> </b>
</font> </td>
Question
Type the opening anchor tag and attributes for the link to a page called frameset.htm.
Code
<head>
<title> </title> </head>
<body>
INSERT THE MISSING CODE
Answer
You type <a href="frameset.htm"> to create the opening tag and attributes. Correct answer(s):
1. <a href="frameset.htm">
2. Tables
Tables have a number of functions. They can display tabular data and you can use them to align text and images on a web page.
Graphic
The 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 Sequence
41
The keyboard alternative is Alt+V, C.
Some of the HTML tags used to create a table are
Code
<table> <caption> Organic Food </caption> <tr> <th>Food</th> <th>Quantity</th> <th>Price</th> </tr> <tr> <td>Flour</td> <td>2 lbs</td> <td>$3</td> </tr> <tr> <td>Soft Cheese</td> <td>1 lb</td> <td>$3</td> </tr> <tr> <td>Sugar</td> <td>1 lb</td> <td>$8</td> </tr> </table> <table> </table>The <table> </table> container tags are the main tags for a table, and all other tags are contained within them. These tags are required elements.
<caption> </caption> <tr> </tr>
The <tr> </tr> tags are used to signify the start and end of a table row.
<td> </td>, and
Table data <td> </td> tags define the beginning and end of each cell in a row.
42
The <th> </th> 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.
Question
Which table elements define the beginning and end of each row in a table?
Options:
1. <table> </table> 2. <td> </td> 3. <tr> </tr>
Answer
Option 1: Incorrect. The <table> </table> tags mark the beginning and end of the entire table. Option 2: Incorrect. The <td> </td> tags mark the beginning and end of each cell within a row. Option 3: Correct. The <tr> </tr> tags are used to define the beginning and end of each row in a table.
Correct answer(s):
3. <tr> </tr>
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.
Graphic
The table lists a number of foodstuffs and their prices at given quantities. The table includes a border.
Note
Tables with the same settings may not look identical in different browsers.
43
Graphic
The View menu is open, with Source selected.
The HTML code of the Organic Food table with borders is displayed.
Code
<body>
<table width="80%" border="5" bgcolor="white" height="600" cellspacing="1" cellpadding="10" align="center" bordercolor="#000000">
<tr>
<th colspan="3">
<font face ="Arial" size="4">Organic Vegetables </font> </th> </tr> <tr> <th>Food</th> <th>Quantity </th> <th>Price </th> </tr> <tr> <td>Honey</td> <td>1 jar</td> <td>$8</td> </tr> <tr> <td>Eggs</td> <td>6</td> <td>$2</td> </tr> <tr> <td>Flour</td> <td>2 lbs</td>
You can change the appearance of rows, columns, or the entire table using the following basic attributes:
Code
<body>
<table width="80%" border="5" bgcolor="white" height="600" cellspacing="1" cellpadding="10" align="center" bordercolor="#000000">
44
<tr><th colspan="3">
<font face ="Arial" size="4">Organic Vegetables </font> </th> </tr> <tr> <th>Food</th> <th>Quantity </th> <th>Price </th> </tr> <tr> <td>Honey</td> <td>1 jar</td> <td>$8</td> </tr> <tr> <td>Eggs</td> <td>6</td> <td>$2</td> </tr> <tr> <td>Flour</td> <td>2 lbs</td> width
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 <table> tag, in the <tr> tag, in the <td> tag, or in the <th> tag depending on the table element you wish to color. In this case, the background color is in the <table> 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.
45
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 <th> or <td> 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
<table width="160" border="0"
height="600" align="right" bordercolor="#000000"> <tr> <td align="center" valign="top" height="40"> </td> </tr> <tr> <td align="center" valign="top" height="196"> <div align="left"> <p align="center"><a href="recipes.htm"> <img src="assets/eggplant.jpg" width="133"
height="133" border="0"></a> </p>
<p align="center"><font size="2" face="Arial, Helvetica, sans-serif">
<a href="recipes.htm">Visit
our recipes page</a> </font></p>
</div> </td> </tr> <tr>
There are a number of alignment attribute options available to you when using tables to display data.
46
align
You can place the align attribute within the <table> tags, the <caption> tags, the <tr> tags, the <td> tags, or the <th> tags to align the table or parts of it to the left, right, or center.
For example, <table align="right"> 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 <tr>, <td>, and <th> 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 <tr>, <td>, and <th> tags.
Question
Insert 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 <head> <title> </title> </head> <body>
INSERT THE MISSING CODE
Answer
You type <table width="200" align="center" border="1"> to create a table that is 200 pixels wide and centrally aligned with a border width of 1.
Correct answer(s):
1. <table width="200" align="center" border="1">
3. Forms
Forms 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.