EMPOWERMENT TECHNOLOGY
© angelica garcia
THIS REVIEWER IS NOT FOR SALE.
Microsoft Excel
 Microsoft Excel is a spreadsheet program that is designed to record and analyze numbers and
data. It can be used to analyze financial, mathematical and statistical data. Reports can be
drawn using its many features.
Spreadsheet Program
 A spreadsheet program is a computer program used primarily for accounting and financial
purposes. Data are arranged in rows and columns.
 Rows are called Records
 Columns are called Fields
Excel Basics
A. Starting Excel
1. Using the Microsoft Office Shortcut bar
2. From the start button
3. Double-clicking an Excel file
B. Screen Layout and Elements
1. Workbook – a multipage Excel document. Each page in a workbook is called a worksheet
2. Worksheet – a page in an Excel workbook. Each workbook has 1 worksheet by default.
Each worksheet has 16,384 columns and 1,048,576 rows.
3. Cell – a cell is the primary unit of measure in Excel. It is the intersection of a row and a
column. Each cell has its own unique address composed of the row number and the
column letter, e.g. C17, Z8, etc.
C. Viewing your Worksheet
1. Normal View – shows the whole sheet with the page break shown as dashes
2. Page Break View – emphasizes the page breaks and page numbers of the worksheet when
printed
3. Freeze Panes – allows you to browse through your data area of the worksheet while having
the column headings and/or row headings remain stationary.
Working with Worksheets: Moving through Cells
PRESSING
Home
MOVES
To column A in the current row
Ctrl + Home
PgDn
To cell A1
Down one screen
PgUp
Alt + PgDn
Up one screen
Right One screen
Alt + PgUp
Ctrl + 
Left one screen
Right edge of current data region
Ctrl + 
Left edge of current region
Ctrl + 
Top of current region
Ctrl + 
Ctrl + PgDn
Bottom of current region
Next Worksheet
Ctrl + PgUp
Previous worksheet
Selecting Cells
POINTER
CLICK TO
CLICK AND DRAG TO
Select Cells
Select multiple cells
Select Rows
Select multiple rows
Select Columns
Select multiple columns
Moving and Copying Cells
1. Click-Drag-Drop
Move the contents of selected cells
2. Place mouse pointer at the lower-right corner of selected cell | Drag
Copy Cell Entries
Resizing Rows and Columns
1. Hover mouse pointer along column border of the rows or columns | Click | Drag to desired
size
Adjust column width
Adjust row height
2. Select row or column to resize | Format | Row or Column | Height or Width | Specify numeric
value | Ok
3. Select row or column to resize | Format | Row or Column | Autofit
4. Double Click the column border to AutoFit
Adding Worksheets, Rows, and Columns
 To add rows: select the row (or any cell within the row) below the insertion point | Insert |
Rows
 To add columns:
select the column (or any cell within the column) to the right of the
insertion point | Insert | Columns
 To add worksheets: Click on the plus sign icon right beside the last sheet
Entering Text and Numbers
 To enter data into a cell, first activate the cell by clicking it then begin typing. As soon as you
begin typing an insertion point appears in the cell, the text you are entering is shown in the cell
itself and the formula bar. If you make a mistake while entering, press the Esc key then retype.
Click Enter to finish the entry.
 Numbers – Values you may want to use in calculations, including dates. Formulas are also
a type of numeric entry
 Text – Any entry that isn’t a number
Using Auto Complete
 Excel has an AutoComplete feature, which keeps track of the text entered in a column and
offers to complete an entry for you if you have entered it already. If the AutoComplete entry
suggested is not correct just continue typing. This resets each time you leave a blank cell in a
column.
Copying Cell Content
 To input entry by copying an existing entry:
a. Transferring content: Point mouse along the border of the selected cell | Left-Click and
Drag
b. Copying content: Right-click on the selected cell and drag | Select mode
Using Singular Auto-Fill
 Excel also has a feature that is useful when you are making repetitive entries in a column or
row. This is called AutoFill and is done by clicking and dragging on the dot (Fill handle) at the
lower-right corner of the selected cell. This is a form of copying.
Using Series Auto-Fill
 Using Built-in Series
 Linear Numeric Series
 Days, Weekday, Months or Years
 Making a custom list
 Enter list in a desired order | Select all Filled-in Cells | File
General | Edit Custom List
| Options | Advanced |
Formatting
 Excel allows you to present numbers in a variety of formats. Formatting identifies numbers as
percentages or currency and makes numbers easy to read by aligning decimal points. By
default text are left aligned, numbers are right-aligned.
Number Formats
 Select the cells | click on the desired button
BUTTON
STYLE
EFFECT
Currency
Displays and lines up currency signs, comma separators,
and decimal points
Percent
Comma
Increase decimal
General Option Dropdown Box
Displays number as a percentage
Same as currency but without currency signs
Add or remove a decimal place
Displays common number formats
Aligning Text
 Default settings are as follows:
 Text entries are left aligned
 Number entries are right aligned
 Use the alignment buttons in the toolbar to adjust alignments:
 Left align | Center align | Right align
 Merge and Center – merges selected cells into one cell and center the content across the
new merged cell.
Rotating Text
 Select Cells  Click on this icon (see picture to the right)
 This rotation tool is used to orient text vertically, horizontally or at specific angles
Merge and Center
 Merges the selected cells and center aligns the text content
Wrap Text
 Wrapped text automatically moves to a new line within the cell if it exceeds the cell
boundaries
Applying Borders and Colors
 Borders: Select Cells, Rows, Columns | Borders icon
 Fills: Select cells, Rows or columns | Fill Color Icon
 Text Colors: Select Cells, rows or columns | Text Color
Formulas and Functions
A. Traditional Typing Techniques
1. Select Cell where you want the result to appear
2. Type an equal sign (=)
3. Type in the formula (cell addresses and operators):
=C2+C3
4. Press Enter
B. Complex Formulas
 involves more than one operation
 Same as #1 but use parenthesis to tell Excel the sequence of the operation otherwise it will
follow the usual MDAS
 =(C2+C3)*(A1-A4)
C. Using the Auto-Sum Button
 SUM: Returns the total of all values in selected cells
 AVERAGE: Returns the arithmetic mean for the selected cells
 COUNT: Returns the number of cells that contain numbers
 MAX: Returns the highest value from the selected cells
 MIN: returns the lowest value from the range of cells
 Follow these steps to create a formula using the AutoSum button:
1. Select Cell where you want the result to appear
2. Click the drop-down arrow on the AutoSum Button
3. Choose the type of summary formula
4. Excel selects the nearby range of numbers to summarize. If incorrect, select the desired
numbers
5. Press Enter
D. Relative and Absolute Cell Addressing
 Relative Cell Addressing – When a formula is copied from one cell to another, Excel
automatically adjusts each cell reference in the formula based on its destination cell.
Useful when you have a series of entries that are calculated the same way like Student
Grades
 Absolute Cell Addressing – You can instruct Excel not change the reference by making it
an absolute cell reference. This is done by using the Dollar ($) sign before the column letter
and the row number in the cell address. Example: $C$5. The dollar sign locks the cell
reference so Excel doesn’t change the operands in the formula. Useful in calculations
involving interest rates, profit margins, etc.
 Mixed Cell Addressing – Mixed Cell addressing uses both relative and absolute references.
$C5 tells Excel not to change the column but allows it to change the row number.
Using Functions
 Functions are formulas. These are built-in structured programs that calculate a specific result:
a total, an average, etc. Requires specific syntax or specified order for it work properly. Excel
still has a lot of functions that may be applicable to everyday tasks. These are just the most
common. These can be accessed using the AutoSum button or the Insert Function (fx) button.
CATEGORY
EXAMPLES
Financial
Calculates interest rates, loan payments, depreciation amounts, etc.
Date and Time
Returns the current hour, day of week or year, time or date
Math & Trig
Calculates absolute values, cosines, logarithms, and so on
Statistical
Lookup & Reference
Includes common functions used for totals, averages, and high and low
numbers in a range; advanced functions for t-tests, Chi-tests, and deviation
Searches for and returns values from a range; creates hyperlinks to
network or Internet documents
Database
Calculates values in an Excel database
Text
Converts text to uppercase or lowercase, trims characters from the left or
right end of a text string, concatenates or joins text strings
Logical
Evaluates an expression and returns a value of TRUE or FALSE, used to
trigger other actions or formatting
Other Categories
Engineering, Web, etc.
To use a Function
1. Click the cell where the result should appear
2. Type an = sign. Choose a function from the recently used functions list. If the function does not
appear on the list, click on More Functions. Or Click the Insert Function button or choose More
Functions from the AutoSum drop-down menu
3. Choose a category. Click OK.
4. Enter the arguments in the Function Argument dialog box.
5. Click OK
Required Argument
Optional Argument
Function Description
Argument Description
Formula Result
Types of Charts
 Pie Charts – Pie charts are used to show relationships between pieces of an entity. It shows the
relationship of a certain category to a whole. Shows percentages.
 Series Charts – Series charts that allows you to compare data points.
 Line, Ribbon and Area Charts – used to show one or more variables (sales, income, or price)
changing over time with time on the x-axis
 Column and Bar Charts – Uses bars and columns to represent the data points. The bars are
bulkier than line charts thus adding more substance to the chart
Creating a Chart
1. Select the ranges to be included in the chart
2. Click Insert | Choose Chart or Recommended Chart
3. Set options
Working with Charts
 Moving Charts: Click on any white area of the chart and drag to desired location
 Resizing Charts: Click on the chart area | Click on any of the handles | Drag to desired size
 Adding a Data Series: Select data series to be added | Drag into the chart
 Deleting a Data Series: Select data series to be deleted | Press Del Key
 Formatting Individual Objects – Double-Click a Chart Item to Format
Formatting Individual Objects
 Double-click a chart item to format.
- Patterns: Applies a selected color and pattern for each series
- Axis: Adds a second vertical axis at the right end of the chart area scaled to the selected
series. The chart must contain 2 or more series.
- Y Error Bars: Adds a graphic display of sampling errors
- Data Labels: Adds a descriptive label or the numeric value for each data point
- Series Order: reorders the series in a chart
- Options: Settings for the bar or column overlap, gap and color variation
Formatting the Chart using the Chart Toolbar
BUTTON
BUTTON NAME
FUNCTION
Chart Objects
Selects the object chosen form the list
Format Object
Opens the Format dialog box for the selected object
Chart Type
Opens a menu of chart types
Legend
Displays or hides the legend
Data Table
Displays or hides the data table
By Rows
Uses the selected worksheet rows as a data series
By Columns
Uses the selected worksheet columns as a data series
Angle Clockwise
Angles selected text downward
Angle
Counterclockwise
Angles selected text upward
Simple Database: Entering and Editing Data
 Direct Typing
 Type in the Labels or headings for the list
 Enter all the data one by one per cell
Working with your Database
 Sorting – Sorts data from A to Z or Z to A
 Place cursor in any cell within the column to be sorted | Click on Sort Ascending or Sort
Descending icon
 Filtering – Categorizes entries per column based on the data entered
 Place cursor in any cell within the list | Data | Filter | AutoFilter | Click on the tiny triangle
to select a category
 Subtotals – Totals entries according to the desired function and category
 Place cursor in any cell within the list | Data | Subtotals | Select desired function and
categories
Printing: Page Setup
 File | Page Setup
 Page – Orientation, Scaling, Paper Size, Print Quality, Print Preview, Options
 Margins – Used to adjust margins and centering
 Header/Footer – Used to place or input built-in or custom header/footer
 Sheet – miscellaneous printing options
 Preview
 allows you to view your document exactly as it will be printed out. Advisable before
printing anything to make sure all of contents/components are visible and legible. File |
Print Preview
 Printing
 File | Print
Powerpoint Basics: Steps to Follow
1. Open PowerPoint
 Start  Programs  Microsoft Office  PowerPoint
2. Type in your Title on the Title Slide
3. Press CTRL+M to add a new slide
4. Type in your Titles and Text Content
5. Select Theme
 Design Point Mouse to Preview  Click to Apply to all Slides
6. Add Slide Transitions
 Transitions  Click to Apply to all slides  Effect Options
7. Customize Animation
8. Insert Objects (when needed)
 Pictures – Insert  Picture
 Videos – Insert  Movie  Movie from File
 Sound/Music – Insert  Sound  Sound from File
9. Modify Theme or Design
 Design  Background Styles  Click to apply
 Design  Colors Click to apply
10. Save Your Work
 PowerPoint Presentation (.pptx)
 PowerPoint Show (.ppsx)
 PowerPoint 97-2003 Presentation
 PDF (.pdf)
(.ppt)
 Windows Media Video (.wmv)
11. Deliver your Presentation
 During Presentation:
 Press F5 to begin presentation from the 1st slide
 Press Shift+F5 to begin presentation from the active/current slide
 Use the laser pointer during presentation by pressing Ctrl+left click
 Use the highlighter to emphasize phrases: Right Click  Pointer Options  Highlighter
 Use the pen to annotate: Right Click  Pointer Options  Pen
 Use Erase to remove any annotations
Slide Master
1. Open Slide Master: View  Slide Master
2. Click the 1st slide (Content Slide Master)
3. Click the 2nd slide (Title Layout )
4. Click on the Title Text Box  Add Effect  Click to Apply
5. Click on Close Slide Master to go back to presentation
Principles of Graphic and Design (Imaging and Design for Online Environment)
1. Balance – A distribution of visual weight on either side of the vertical axis.
Symmetrical balance uses the same characteristics. Asymmetrical uses different
but equally weighted features.
 ICORA is a perfect example of how symmetry contributes to the vertical flow of a website.
o Instead of throwing a bunch of stuff on the page and letting the user choose where to
go, the designer encourages the user to scroll through the content.
o The designer takes you on a set journey in what is essentially a carefully planned sales
pitch.
2. Contrast – The arrangement of opposite elements (light vs. dark, rough
vs. smooth, small vs. large, etc…) in a composition so as to create visual
interest.
 LUSH is a good place to start because white space is the hero here.
o It's the delicious coloring of the toiletries, contrasted with large black and white
typography and a black header that makes this such an enjoyable site to browse.
3. Emphasis – Used to make certain parts of an Artwork stand out. It
creates the centre of interest or focal point. It is the place in which an
Artist draws your eyes first.
 CINCO uses beautiful images to create a sense of proportion that
first drives us to the main image and later to the rest of the content.
o With these images they made pretty clear what they want to show first.
4. Visual Movement – How the eye moves through the composition; leading the
attention of the viewer from one aspect of the work to another. Can create
the illusion of action.
 MOET - Scarlett is turned to the right, both arms are pointing to the right,
the wine bottle and its spray are pointed to the right so something
important must be happening over on the right side of the page.
 NEW DEAL FESTIVAL - a bright yellow stripe that moves you from the upper
left to the lower right where the navigation and sponsors are located.
o This is a good example of simple and bold movement
5. Pattern – The repetition of specific visual elements such as a unit
of shape or form. A method to organize surfaces in a consistent
regular manner.
 STEPHEN CAVER - This site uses shape, type and cold contrast
to guide you where you need to go.
o Your eye naturally splits this site into three areas because
the top layer has very low contrast, the middle layer builds a deeper contrast with type,
and the third layer uses dark boxes for an attention grabbing contrast.
o You eye can’t help move directly south to the navigation once this page loads.
6. Rhythm – Regular repetition of/or alternation in elements to
create cohesiveness and interest.
 HUGS FOR MONSTERS - The grid of portfolio images
creates a clear and regular rhythm.
o The pattern of colors at both the top and bottom of
the page form another.
o These color patterns are both located on a dark background that also occurs in the
middle of the page as a horizontal line.
o Taken together they create a rhythm down the page.
7. Proportion – Visual elements create a sense of unity
where they relate well with one another.
 404 BLOG – The design itself is visually appealing,
provides calm and supporting color scheme and
has a nice composition.
o The reason why the layout looks almost perfect
although it doesn’t stick to the Divine proportion is the simple fact that it is balanced —
both the layout blocks and the content blocks have the same proportion.
o
Hence the design provides some sense of closure and structural harmony.
8. Variety – This uses several design elements to draw a
viewer’s attention.
 Sample websites with Variety: Polygon, The Verge,
Blik, USA Today, The New Yorker
Online Platform for Web Development
Content Management System
 A content management system (CMS) is a software application or set of related programs that
are used to create and manage digital content.
 These are web-based applications that are designed for the creation and updating of
websites.
 They may have themes or plugins to extend functionality, and make the management of a
website simple.
Web Content Management System
 A web content management system (WCMS), a utilization of a content management system
(CMS), is a set of tools that provides an organization with a way to manage digital information
on a website through creating and maintaining content without prior knowledge of web
programming or markup languages.
 A WCM facilitates collaborative authoring for websites.
3 Key Features of WCMS
1. The ability to design, create and maintain personalized content for a website.
2. The ability for editors to review and approve content prior to publication.
3. An automated publishing process.
Additional WCMS Features
1. Automated, standard templates;
2. Controlled access to the page;
3. Scalable expansion to allow for growth;
4. Tools that allow for easy editing;
5. Easily installed plug-ins to extend existing functionality;
6. Regular software updates;
7. Workflow management;
8. Collaboration tools allowing for multiple users to modify content;
9. Document management;
10. Content distribution and content update emails to users;
11. Ability to display content in various languages; and
12. Allowing editors to retrieve previous versions of content.
Best Free WCMS
1. Django
 Django is a free content management system that is meant to be ―ridiculously” fast.
 This CMS open source platform was first established in 2005, and is named after guitarist
Django Reinhardt.
 Django is an open source CMS that was designed for speed. It’s engineered to take web
applications from concept to launch in just a matter of hours.
 Django has a community of about 11,011 people in 158 countries, contributing 3,381
packages and projects to make this open source CMS platform better.
2. Drupal
 Drupal™ have been around since 2001, and since then have grown from having a single
server to multiple server racks at a datacenter and cloud computing resources around the
world.
 This is one of the free CMS softwares that has a community that includes 106,090 users that
are actively contributing content to the community at large.
 Drupal™ is a registered trademark of Dries Buytaert.
 Drupal™ has worked with dozens of security experts from around the world to validate,
respond, and fix any security issues reported with their free CMS software.
 The Drupal™ open source content management system makes it easy to ingest third-party
content into a site from aggregators and syndicators to help keep fresh content flowing
easily.
3. GRAV
 GRAV is designed to be a faster and simpler flat-file open source content management
program.
 The flat-file system means that a computer reads it as an ordinary unstructured file with no
indexing or structural relationships with other files.
 Some advantages of a flat-file free CMS system are:
 Records are stored in one place
 Easy to understand
 Sorting and filtering is simple
 You can store the database in a standard spreadsheet
 GRAV received the 2016 CMS Critic Award for Best Open Source CMS, which illustrates the
explosive growth they’ve seen in the past year.
 GRAV is the easiest to learn and use CMS open source system because of its flat file
system.
 GRAV supports 5 different caching types in their open source content management system
which means that their sites are made to load really fast.
4. Joomla!
 The Joomla! Project Team was first established in 2005, and as of November 2016, this free
CMS has been downloaded over 78 million times.
 This free content management system has several important core features, including an
easy to use media manager tool, website banner management, and a smart search tool.
 Joomla! is considered one of the best open source CMS platforms. According to their site,
there are more than 3 percent of websites that use Joomla! as their CMS free system, and
they have a free CMS market share of more than 9 percent.
 Joomla! has an excellent video training section where you can learn all the basics of
starting and using their CMS open source platform.
 Their videos cover everything from a ―Beginners Guide‖ to how to build multilingual sites
using the Joomla! open source content management system.
 Joomla! includes multiple help resources in their open source CMS to create and manage
web banner advertising.
5. SilverStripe
 SilverStripe may not be as well-known as some of the other free CMS softwares on our list,
but they have a loyal following. The company was founded by three passionate guys in
New Zealand, and they now have offices in Australia and the UK too.
 They believe in the power of an open source CMS community, which basically means that
free CMS technology is shared at no cost and everyone can contribute ideas to make it
better.
 SilverStripe has been around for ages in ―Internet age.‖ They were first founded in 2000 and
worked to make their open source content management platform usable on Linux,
Windows, and Apple environments.
 They began working with local clients, and then gained traction as the platform of choice
for the US Democratic National Convention website that supported Barack Obama’s 2008
presidential campaign.
 SilverStripe has an impressive list of awards for their open source content management
system. Some of the highlights include:
a. Best Technology Solution for the Public Sector—2016 Hi-tech Awards
b. Best All Round Exhibitor—2015 ALGIM Conference
c. Winner, Open Source use in Government—2014 New Zealand Open Source Awards
d. Positive Societal Impact Award—2009 Internet Industry Awards
 They have a specialized open source CMS specifically for government and public sector
sites that help them manage the look and feel of the site as well as give them control over
the specific type of content publishing they need.
 SilverStripe is under contract to the Department of Internal Affairs in New Zealand for their
open source content management system.
6. WordPress
 The last site on our list of the best open source CMS solutions is actually the biggest of them
all: WordPress.
 According to BuiltWith®, 31 percent of all websites using free CMS technologies are
designed with WordPress.
 This open source content management system was first introduced in 2003 and since then
has grown to be the largest self-hosted blogging tool in the world. But they’ve moved way
beyond blogging to also be one of the largest and best open source CMS programs.
 WordPress is used by 27 percent of all websites. That’s a huge accomplishment for a free
content management system. More than 60 million people have chosen this CMS open
source platform to power their websites.
 Plugins are important when you’re working with the best open source CMS software
because they enable things like shopping carts, shipping calculations, and Google
Adwords tracking.
 WordPress offers more than 45,000 plugins that work with your free CMS.
 Another area where WordPress shines is in the extensive support for their open source
content management system. Besides their own support and documentation, they have
support forums where you can find just about every answer to a technical question you
may have.
 This is another benefit of being the biggest and best open source CMS, is that there are a
plethora of other users to offer help and advice.
Advantages of Using Free CWMS
1. Responsive Websites
 Websites that respond to the size of computer screens and mobile device screens, and
look good on all of them are vital these days.
 The open source CMS platform is designed to do this automatically.
2. Database-Driven
 Open source CMS uses a database to store and retrieve information, making it easy to
access and input content on any part of your site.
 So there is only one place to update that content, no matter how many pages it appears
on.
3. Multi-User
 The free CMS platforms are designed to accommodate several users adding content at the
same time.
 You can set permissions as to levels, and utilize “draft” and “approval” settings to make it
easy for one person to write a new blog, while another may be updating a contact form.
4. Accessible from Anywhere
 You don’t have to send an HTML file back and forth between computers to make edits with
an open source content management system.
 The software sits on your web server so you can access it online to make updates from
anywhere.
5. You Don’t Have to Be a Designer
 Another big benefit of the best open source CMS programs is that they are made to be
easy to use without formal web design training.
 Some can be more complicated to use than others, depending upon the template you
choose, but only minimal computer skills are needed.
Collaboration
 Collaboration is a recursive process where two or more people work together toward an
intersection of common goals for example, an intellectual endeavor that is creative in nature
by sharing knowledge, learning and building consensus.
 Collaboration is NOT inviting a bunch of different people to a meeting at the beginning of a
project.
 Collaboration is NOT working separately on the same project.
 Collaboration is no longer an alternative to competition. It is fast becoming a fundamental
strategy through which organizations can achieve competitive advantage
Collaborative Development of Web Content
 The actual application of the word ―collaboration‖ implemented in the field of web-based
information, after existence of Web 2.0.
 Web 2.0 is phrase coined by O’Reilly Media in 2004, refers second generation of internetbased services, such as social networking sites, wikis, communication tools, and folksonomies
that emphasize online collaboration and sharing among users.
Benefits of Collaborative Web Design
1. Shared Experiences
2. Cutting Project Timelines
3. Mix-and-Match Styles
4. Always Keep Learning
5. Ideas Come to Life
Useful Tools for Collaborative Online Work
1. Large Audience Webminars
2. Tasks Lists
3. Project Management
4. Event Scheduling
5. Whiteboard
6. Collaborative Development
7. Document Publishing
8. Instant Messaging & VoIP Audio Conferencing
9. Web Presentings
10. File Sharing
11. Collaborative Suites
Multimedia Content
 It is a combination of text, graphic, sound, animation, and video that is delivered interactively
to the user by electronic or digitally manipulated means.
Understanding Web users
 TV is a passive medium
 Users want to be entertained, relaxation
mode & vegging out
 Little to no user initiative
 Viewing TV can be a social environment




Web is an active medium
Users are engaged, want to go places,
want to get things done
Allows for interaction, user initiative &
empowerment
Viewing web is solitary environment
1. Implications for the F-Pattern
 Users won’t read your text thoroughly
 Reading from computer screens 25% slower than from paper
 79% of users scan the page instead of reading word-for-word
 Web content should be 50% the word count of paper equivalent
 The first two paragraphs must state the most important information
 Start subheads, paragraphs and bullet points with information carrying words
2. Writing for the Web: Content
 Write for a single reader rather than an audience
 Provide as much context as possible
 Anticipate and answer your reader’s questions
 Take your reader on an interesting and well-considered journey
 Avoid jargon & marketese (i.e. sually serves as criticism against the promotional wording,
and often implies that a technical or objective wording would be more appropriate.)
3. Strive for Usable Content
 Clear and easy to understand
 Meaningful
 Makes the reader feel smart
 Fresh, light, and lively
 Organized in such a way that users can get their mind around it
 Encourages feedback and engineered for conversation
Presenting Your Story using Multimedia Content
 Multimedia is media that utilizes a combination of different content forms:
a. Text
d. Animation
b. Audio
e. Video
c. Still images
 Interactivity (Hypermedia – combination)
 Can be linear (e.g. video) or non-linear (e.g. clickable diagram)
Text


A broad term for something that contains words to express something.
Text is the most basic element of multimedia.


A good choice of words could help convey the intended message to the users (keywords).
Used in contents, menus, navigational buttons
Text vs Multimedia
 Text version better for recalling information about:
 Names & places
 Specific factual information
 Multimedia version better for recalling and learning information about a process or procedure
that was unfamiliar
Presenting Your Story using Text
 Text is used to supply basic content, as well as to add text-based menus and hyperlinks
 Serif typefaces: more readable, used for large bodies of text
 Sans serif typefaces: used for titles, headings, Web page banners
 Different typefaces can convey widely different feelings and impressions
 Important to select the appropriate font size
 When a consistent text appearance is required—such as a logo—a graphical image is used
instead
Presenting your Story using Multimedia
 What multimedia you can use to help tell your story:
a. Photographs
d. Audio Slideshows
b. Illustrations
e. Audio files
c. Flash interactives
f. Videos files
 You can present your story by:
a. Using a combination of text and photos
b. Using a combination of text, photos, and illustrations
c. Using an audio slideshow
d. Using a combination of text and videos/animations
e. Using a combination of all of the above
 Photographs:
 Some photography tips
o Move! Take many shots of your subject from different angles
o Use a plain background for stills, or move in close to remove it
o Take wide, middle, and close up shots. Variety gives you choices.
o The subject does not always have to be in the middle
o Use flash outdoors
o Be aware of the light, bright sun casts long shadows on faces
o Be aware of color
o Be a director, move your subjects if you need to
Choosing Graphic Formats
 GIF – typically used for line art (clip art, logos, etc.)
 JPEG – typically used for photographs
 PNG – designed specifically for use with Web page images
Presenting your Story using Illustrations
 When to use them
a. There’s no way to take a photo of the subject
(at the bottom of the ocean for example)
b. To explain complex processes or cycles
c. Text alone couldn’t possibly explain it
d. To show intricate details otherwise unseen
e. Conceptual ideas
Flash Interactives
 Some interactive tips:
a. When an illustration is too busy, make the text clickable
b. If you want an object to move and describe at the same time
c. Illustrate a comparison
Audio Slideshow
 Shoot photos like a video sequence. Take wide, medium, and tight shots.
 Open the show with natural sound to ramp up your story
 Never have dead air sound gaps (cross fade or use room tone)
 Make sure your audio edit is smooth
 Pace the show. Too fast, the viewer gets mad, too slow and they’re bored
 Weave natural sounds and narrative. Don’t have your subject drone on and on for three
minutes without stopping.
 Some audio tips:
a. Use a quality microphone. A camcorder’s audio isn’t the greatest.
b. Limit background noises during narration.
c. Shut windows, turn off fans, etc.
d. Record background sounds. This is useful for videos and audio slideshows to provide mood
and give depth.
e. Watch out for wind. Buy a wind protector, or put a sock on it.
f. Record your voice in a quiet space.
 Common audio file formats: .wav, .mp3, .midi, .aiff, .aac
Video Slideshow
 Some video tips:
a. Read the manual. Know what all the controls do.
b. Lay off the zoom. Too much of this results in dizziness.
c. Don’t use effects. Save that for the edit.
d. Bring a tripod.
e. Get a microphone. The typical camcorder’s microphone isn’t great
f. Shoot lots of extra. Better to have too much and edit out.
 Common audio file formats: .avi, .mpeg, .mov, .rm
HTML
 W W W – World Wide Web.
 HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.

HTML is a text formatting language.





Tags



URL – Uniform Resource Locator.
Browser – A software program which is used to show web pages.
Normal text‖ surrounded by bracketed tags that tell browsers how to display web pages
Pages end with ―.htm‖ or ―.html‖
HTML Editor – A word processor that has been specialized to make the writing of HTML
documents more effortless.
Codes enclosed in brackets
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <TITLE>
Choosing Text Editor
 There are many different programs that you can use to create web documents.
 HTML Editors enable users to create documents quickly and easily by pushing a few buttons
instead of entering the entire HTML codes by hand. These programs will generate the HTML
Source Code for you.
 HTML Editors are excellent tools for experienced web developers; however; it is important that
you learn and understand the HTML language so that you can edit code and fix “bugs” in
your pages.
Notepad
 NotePad is the standard text editor that comes with the microsoft windows operating system.
Creating a Basic Starting Document
 The HEAD of your document point to above window part. The TITLE of your document appears
in the very top line of the user’s browser. If the user chooses to ―Bookmark‖ your page or save
as a ―Favorite‖; it is the TITLE that is added to the list.
 The text in your TITLE should be as descriptive as possible because this is what many search
engines, on the internet, use for indexing your site.
<HTML>
<HEAD>
<TITLE>Al al-Bayt University</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>
Setting Document Properties
 Document properties are controlled by attributes of the BODY element. For example, there are
color settings for the background color of the page, the document’s text and different states
of links.
 Color Codes – Colors are set using “RGB” color codes, which are, represented as hexadecimal
values. Each 2-digit section of the code represents the amount, in sequence, of red, green or
blue that forms the color. For example, a RGB value with 00 as the first two digits has no red in
the color.
The Body Element
 The BODY element of a web page is an important element in regards to the page’s
appearance. Here are the attributes of the BODY tag to control all the levels: TEXT="#RRGGBB"
to change the color of all the text on the page (full page text color.)
 This element contains information about the page’s background color, the background
image, as well as the text and link colors.
Background Color
 It is very common to see web pages with their background color set to white or some other
colors.
 To set your document’s background color, you need to edit the <BODY> element by adding
the BGCOLOR attribute. The following example will display a document with a white
background color: <BODY BGCOLOR=“#FFFFFF”></BODY>
Text Color
 The TEXT attribute is used to control the color of all the normal text in the document. The
default color for text is black. The TEXT attribute would be added as follows:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”></BODY>
 In this example the document’s page color is white and the text would be red.
Link, V-Link, and A-Link
 LINK – initial appearance – default = Blue.
 VLINK – visited link – default = Purple.
 ALINK –active link being clicked–default= Yellow.
 The Format for setting these attributes is:
<BODY BGCOLOR=―#FFFFFF‖ TEXT=―#FF0000‖ LINK=―#0000FF‖
VLINK=―#FF00FF‖
ALINK=―FFFF00‖> </BODY>
Using Image Background
 The BODY element also gives you ability of setting an image as the document’s background.
 An example of a background image’s HTML code is as follows:
<BODY BACKGROUND=―hi.gif‖ BGCOLOR=―#FFFFFF‖></BODY>
Previewing your Work
 Once you have created your basic starting document and set your document properties it is a
good idea to save your file.
 To save a file, in NotePad, follow these steps:
1. Locate and click on the menu called ―File‖.
2. Select the option under File Menu labeled ―Save As‖.
3. In the ―File Name‖ text box, type in the entire name of your file (including the extension
name .html).
Edit, Save, and View Cycle
 To preview Your Work, open a web browser and do the following:
1. Click on the menu labeled ―File‖.
2. Locate the menu option, ―Open‖.
3. In the ―Open‖ dialog box, click on the ―Browse‖ button and locate your web document.
4. Click ―OK‖ once you have selected your file.
5. The web browser will load the same document but with the new revisions. This process is the
Edit, Save and View Cycle.
Headings
 Inside the BODY element, heading elements H1 through H6 are generally used for major
divisions of the document. Headings are permitted to appear in any order, but you will obtain
the best results when your documents are displayed in a browser if you follow these guidelines:
1. H1: should be used as the highest level of heading, H2 as the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3 should not appear after an H1, unless there
is an H2 between them.
Paragraphs
 Paragraphs allow you to add text to a document in such a way that it will automatically adjust
the end of line to suite the window size of the browser in which it is being displayed. Each line
of text will stretch the entire length of the window.
Break
 Line breaks allow you to decide where the text will break on a line or continue to the end of
the window.
 A <BR> is an empty Element, meaning that it may contain attributes but it does not contain
content.
 The <BR> element does not have a closing tag.
Horizontal Rule
 The <HR> element causes the browser to display a horizontal line (rule) in your document.
 <HR> does not use a closing tag, </HR>.
Default Value
Attribute
Description
SIZE
Height of the rule in pixels
2 pixels
WIDTH
Width of the rule in pixels or
percentage of screen width
100%
NOSHADE
ALIGN
COLOR
Draw the rule with a flat look
instead of a 3D look
Not set
(3D look)
Aligns the line (Left, Center,
Right)
Sets a color for the rule (IE 3.0 or
later)
Center
Not set
Character Formatting
 <FONT SIZE=“+2”> Two sizes bigger</FONT>
 The size attribute can be set as an absolute value from 1 to 7 or as a relative value using
the ―+‖ or ―-‖ sign. Normal text size is 3 (from -2 to +4).
 <B> Bold </B>
 <I> Italic </I>
 <U> Underline </U>
 Color = ―#RRGGBB‖ The COLOR attribute of the FONT element. E.g., <FONT
COLOR=“#RRGGBB”>this text has color</FONT>
 <PRE> Preformatted </PRE> Text enclosed by PRE tags is displayed in a mono-spaced font.
Spaces and line breaks are supported without additional elements or special characters.
 <EM> Emphasis </EM> Browsers usually display this as italics.
 <STRONG> STRONG </STRONG> Browsers display this as bold.
 <TT> TELETYPE </TT> Text is displayed in a mono-spaced font. A typewriter text, e.g. fixed-width
font.
 <CITE> Citation </CITE> represents a document citation (italics). For titles of books, films, etc.
Typically displayed in italics. (A Beginner's Guide to HTML)
Alignment
 Some elements have attributes for alignment (ALIGN) e.g. Headings, Paragraphs and
Horizontal Rules.
 The Three alignment values are: LEFT, RIGHT, CENTER.
 <CENTER></CENTER> Will center elements.
 <DIV ALIGN=“value”></DIV> Represents a division in the document and can contain most
other element type. The alignment attribute of the DIV element is well supported.
 <TABLE></TABLE> Inside a TABLE, alignment can be set for each individual cell.
Special Characters and Symbols
 These Characters are recognized in HTML as they begin with an ampersand and end with a
semi-colon e.g. &value; the value will either be an entity name or a standard ASCII character
number. They are called escape sequences.
 Additional escape sequences support accented characters, such as:
 &ouml; (a lowercase o with an umlaut: ö)
 &ntilde; (a lowercase n with a tilde: ñ)
 &Egrave; (an uppercase E with a grave accent: È)
 NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You cannot, for
instance, use &LT; instead of &lt;.
Special Character
Entity Name
Special Character
Entity Name
Ampersand
&amp; &
Greater-than sign
&gt; >
Asterisk
&lowast; ∗∗
Less-than sign
&lt; <
Cent sign
&cent; ¢
Non-breaking space
&nbsp;
Copyright
&copy; ©
Quotation mark
&quot; "
Fraction one qtr
&frac14; ¼
Registration mark
&reg; ®
Fraction one half
&frac12; ½
Trademark sign
&trade; ™
Additional Character Formatting Elements
 <STRIKE> strike-through text</STRIKE>
 DEL is used for STRIKE at the latest browsers
 <BIG> places text in a big font</BIG>
 <SMALL> places text in a small font</SMALL>
 <SUB> places text in subscript position </SUB>
 <SUP> places text in superscript style position </SUP>
Images
 <IMG>This element defines a graphic image on the page.
 Image File (SRC:source): This value will be a URL (location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.txt.
 Alternate Text (ALT): This is a text field that describes an image or acts as a label. It is displayed
when they position the cursor over a graphic image.
 Alignment (ALIGN): This allows you to align the image on your page.
 Width (WIDTH): is the width of the image in pixels.
 Height (HEIGHT): is the height of the image in pixels.
 Border (BORDER): is for a border around the image, specified in pixels.
 HSPACE: is for Horizontal Space on both sides of the image specified in pixels. A setting of 5 will
put 5 pixels of invisible space on both sides of the image.
 VSPACE: is for Vertical Space on top and bottom of the image specified in pixels. A setting of 5
will put 5 pixels of invisible space above and below the image.
How to Make a Link
1. The tags used to produce links are the <A> and </A>. The <A> tells where the link should start
and the </A> indicates where the link ends. Everything between these two will work as a link.
2. The example below shows how to make the word ―Here‖ work as a link to yahoo.
Click <A HREF="http://www.yahoo.com">here</A> to go to yahoo.
Links
 LINK - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF).
VLINK - visited link - to a page the visitor has been to before. (standard color is purple -

#800080).
ALINK - active link - the color of the link when the mouse is on it. (standard color is red #FF0000).
If the programmer what to change the color:
Click <a href="http://www.yahoo.com"><font color="FF00CC">here</font></a> to go to
yahoo.
Internal Links
 Internal Links: Links can also be created inside large documents to simplify navigation.
1. Select some text at a place in the document that you would like to create a link to, then
add an anchor to link to like this:
<A NAME=“bookmark_name”></A>
The Name attribute of an anchor element specifies a location in the document that we link
to shortly. All NAME attributes in a document must be unique.
2. Next select the text that you would like to create as a link to the location created above.
<A HREF=“#bookmark_name”>Go To Book Mark</A>
E-Mail (Electronic Mail)
 The type of service is identified as the mail client program. This type of link will launch the users
mail client.
 The recipient of the message is kmf@yahoo.com
<A HREF=―mailto:kmf@yahoo.com‖>Send me More Information </A>