Web Design IT404

College of Computing and Informatics

Assignment 1
Deadline: Monday 17/02/2025 @ 23:59
[Total Mark for this Assignment is #]
Student Details:
Name: ###

ID: ###

CRN: ###
Instructions:

• You must submit two separate copies (one Word file and one PDF file) using the Assignment Template on
Blackboard via the allocated folder. These files must not be in compressed format.

• It is your responsibility to check and make sure that you have uploaded both the correct files.
• Zero mark will be given if you try to bypass the SafeAssign (e.g. misspell words, remove spaces between
words, hide characters, use different character sets, convert text into image or languages other than English
or any kind of manipulation).

• Email submission will not be accepted.
• You are advised to make your work clear and well-presented. This includes filling your information on the cover
page.

• You must use this template, failing which will result in zero mark.
• You MUST show all your work, and text must not be converted into an image, unless specified otherwise by
the question.

• Late submission will result in ZERO mark.
• The work should be your own, copying from students or other resources will result in ZERO mark.
• Use Times New Roman font for all your answers.

Restricted – ‫مقيد‬

Question One

Pg. 01
Learning
Outcome(s):

Question One

Recognize and

What are the essential elements of web development, and how do these elements
contribute to creating a functional website?

evaluate a range
of real-world web
design
approaches.

Restricted – ‫مقيد‬

2 Marks

Question Two

Pg. 02
Learning
Outcome(s):
Identify most

Question Two

2 Marks

Write HTML5 code to build nested lists, contain a description list of three terms
“HTML”, “CSS,” and “JavaScript” as presented in the given output.

HTML tags and
CSS properties
and use a text
editor to construct
the basic HTML
and CSS
structure for
a webpage.

Important notes:
1. You should copy and paste the “HTML script” to answer this question. DON’T
take screenshots for your HTML script. It must be an editable script.
2. Take a screenshot of your output web page and paste it as a part of your
answer.

Restricted – ‫مقيد‬

Question Three

Pg. 03
Learning
Outcome(s):
Evaluate the
effectiveness of a
web design in
respect to its
context.

Restricted – ‫مقيد‬

Question Three

2 Marks

List and explain the FOUR categories of disabilities that impact how people interact
with their computers?

Question Four

Pg. 04
Learning
Outcome(s):
Identify most
HTML tags and
CSS properties
and use a text
editor to construct
the basic HTML
and CSS
structure for
a webpage.

Restricted – ‫مقيد‬

Question Four

2 Marks

What are the purposes of the and elements in HTML? Include an
example for each to demonstrate their usage.

Learning Web Design
Chapter 1:

Where do I start?

What Does a Web Designer Do?
2

• Web design includes many different skills and disciplines

in the production and maintenance of websites.
• Over the years, the term “web design” has become a

catch-all for a process that encompasses a number of
different disciplines, from user experience design, to
document markup, to serious programming.
• Web design can separated into four broad categories:
1. Design
2. Development
3. Content strategy
4. Multimedia
2

What Does a Web Designer Do?
A. Design
3
• Identify the site’s goals, how it will be used, and how visitors
move throughout the site.
• These tasks fall under the disciplines of:
➢ Interaction design (IxD)
❖ Make the site easy, efficient, and delightful to use.
➢ User interface design (UI)
❖ Focused on the functional organization of the page and tools
(buttons, links, menus…etc)
➢ User experience design (UX)
❖ Ensures that the site is favorable.
❖ Based on understanding users and user needs through
observations and interviews.

3

What Does a Web Designer Do?
• Designers
produce documents that include:
4
1. User research and testing reports
❖ Called User-Centered Design (UCD)
❖ Start with user research (interviews and observation)
❖ User testing at each phase of the design process to ensure the
usability of their designs.

2. Wireframe diagrams
❖ Shows the structure of a web
page using outlines for each
content type and widget.
❖ Indicates how the screen real
estate is divided and where
functionality and content
(such as navigation, search
boxes, form elements) are
placed
4

What Does a Web Designer Do?
• Designers
produce documents that include:
5
3. Site diagram
❖ Indicates the structure of the site as a whole and how
individual pages relate to one another.

4. Storyboards and user flow charts
❖ Traces the path through a site or application from the point of
view of a typical user.
❖ It usually includes a script and “scenes” consisting of screen
views or the user interacting with the screen.

5

Website storyboarding

What Does a Web Designer Do?
• Visual
(graphic) Design
6
➢ Creates the “look and feel” of the site
❖ Logos, graphics, type, colors, layout, etc.

➢ Ensures that the site makes a good impression and is
consistent with the brand and message of the
organization.
➢ Generates sketches of the way the site might look.
➢ May also be responsible for producing graphic files that
are optimized for web delivery.

6

What Does a Web Designer Do?
7
1. Front-end
design
❖ Any aspect of the design process that appears in or relates
directly to the browser.
▪ Graphic design and image production.
▪ Interface design.
▪ Information design – user’s experience on the site.
▪ HTML document and style sheet development.
▪ JavaScript.

2. Back-end design
❖ Programs and scripts that work on the server behind the scenes
to make web pages dynamic and interactive.
▪ Forms processing.
▪ Database programming.
▪ Content management systems.
▪ Other server-side web applications using programming
languages.
7

What Does a Web Designer Do?
B. Development
8
• Part of the web design process that involves the creation and

troubleshooting of the documents, style sheets, scripts and images that
make up a site.
• Development includes:
1. Authoring/Markup
➢ Authoring is the process of preparing content for delivery on the Web.
➢ Markup is marking up (marking) the content with HTML tags:

➢ : this tag defines the document’s body.

Authoring/markup

8

What Does a Web Designer Do?
2. 9Styling
➢ Appearance of the page in the browser, which is controlled by style
rules written in CSS (Cascading Style Sheets).
➢ CSS is a simple mechanism for adding style (e.g., fonts, colors,
spacing) to Web documents.
➢ Appearance of a page is handled separately from the HTML markup
of the page.

9

What Does a Web Designer Do?
3. 10Scripting and Programming
➢ JavaScript is the language that makes elements on web pages
work.
➢ Other programming languages that run on the server and process
data include: PHP, Ruby, Python, ASP.NET
➢ Requires traditional computer programming experience

JavaScript

10

Summary of Web page
Development

What Does a Web Designer Do?
C. 11
Content Strategy and Creation
• Everything you do supports the process of getting the content,
message, or functionality to our users.
•

Two content-related specialists on the modern web development team:

• Content Strategist
➢ Ensures that every piece of text on a site, from long explanatory
text down to the labels on buttons, supports the brand identity and
marketing goals of the company.
• Information Architect (Information Designer)
➢ Organizes the content logically and for ease of findability.
➢ May be responsible for search functionality, site diagrams, and
how the data and content is organized on the server.

D. Multimedia
• Multimedia elements include:
➢ Sound
➢ Video
➢ Animation
➢ Interactive games
11

What Languages Do I need to Learn?
• Which
technologies you learn will depend on the role that you have in
12
the web design process.
• The list of technologies associated with web development include:

1. Hypertext Markup Language (HTML)
➢
➢
➢
➢

Used to create web page documents.
HTML 4.01 is the most established
HTML5
Not a programming language; it is a markup language

2. Cascading Style Sheets (CSS)
➢
➢
➢

Describes how the content should look.
Known as the presentation.
Includes:
❖ Fonts
❖ Colors
❖ Background images
❖ Line spacing

12

Learning Web Design
Chapter 2:

How the Web Works

What Languages Do I need to Learn?
3. 14
JavaScript/ Document Object Model (DOM) Scripting

➢ Used to add interactivity and behaviors to web pages
❖ Checking form entries for valid entries.
❖ Swapping out styles for an element or an entire site.
➢ Making the browser remember information about the user for the
next time they visit
➢ Building interface widgets

4. Server-side Programming
➢ Commercial sites have more advanced functionality than simple
HTML sites.
➢ Functions are handled by web applications running on the server.
➢ Programming languages used to create web applications include:
❖ PHP
❖ Python
❖ Ruby
❖ JavaScript
❖ Java
❖ ASP.NET
13

What Do I Need Buy?
• 15Equipment
❖
❖
❖
❖
❖
❖
❖

The author recommends the following equipment:
Up-to-date computer.
Extra memory.
Large monitor.
Scanner and/or digital camera.
Second computer.
Mobile devices.

14

What Do I Need Buy?
• Software

16❖ Tools provide a WYSIWYG view interface.
▪ WYSIWYG: What You See Is What You Get, pronounced “whizzy-wig”

1. HTML tools/editors
❖
❖
❖

Designed to speed up the process of writing HTML by hand.
Do not allow you to edit the page visually – must check work in a browser.
These tools include:
▪ TextPad
▪ NotePad++ (we will use this tool.
▪ Sublime Text
▪ Coda by Panic
▪ TextMate
▪ BBEdit
▪ Nvu (N-view)

2. Image-editing and drawing software
❖

Popular programs include:
▪ Adobe Photoshop
▪ Adobe Photoshop Elements
▪ Adobe Illustrator
▪ Adobe Fireworks
▪ Corel Paint Shop
15
▪ GIMP

What Do I Need Buy?
3. Internet
tools
17

❖ Specific for viewing and moving files over the network
❖ Tools include:
▪ Browsers:
o Internet Explorer, Chrome, Firefox, Safari
▪ File-transfer protocol (FTP) program
o WS_FTP, CuteFTP, AceFTP, Filezilla

4. Terminal application
❖
❖
❖
❖

Unix operating system
Command-line application
Type Unix commands on the server
Useful for:
▪ Setting up file permissions
▪ Moving or copying files and directories
▪ Managing the server software
❖ Windows users can install a Linux emulator – Cygwin
❖ PuTTY – free Telnet/SSH client
❖ Mac OS X includes an application called Terminal
16

Learning Web Design
Chapter 2:

How the Web Works

The Internet Versus the Web
• Internet
➢ Network of connected computers.
➢ No company owns the Internet.
➢ Cooperative effort governed by a system of standards and rules
➢ Information can be passed between computers by:
❖ Email
❖ File transfer (FTP)

• Web
➢ The Web is a subset of the Internet.
➢ Originally called the World Wide Web (www addresses)
➢ It’s just one of the way information can be shared over the Internet
➢ Allows documents to be linked to one another using hypertext
links.
➢ Web uses a protocol HTTP (HyperText Transfer Protocol)

Serving Up Your Information
• Servers
➢ Computers that serve up documents upon request.
➢ More accurately, server is a software that allows the computer to
communicate with other computers.
➢ Role of server software is to wait for a request for information, then
retrieve and send that information back as quickly as possible

➢ Two most popular servers are:
❖ Apache
❖ Microsoft Internet Information Services (ITS)

➢ Every computer and device connected to the Internet is assigned an IP
address. (IP: Internet Protocol)
❖ google.com has the IP address: 172.217.21.78

➢ Domain Name System (DNS) was developed to allow us to refer to a
server by its domain name.

• Browsers
➢ Software that does the requesting is called the client
➢ People use desktop browsers, mobile browsers, and other assistive
technologies as clients to access documents on the Web
➢ The server returns the documents for the browser (Also referred as
user agent) to display.

Web Page Addresses (URLs)
• Every page and resource on the Web has its own special address
which is called a URL
• URL is made up of three parts:
1. The protocol (
2. The site/server name (www.example.com)
3. The absolute path to the filename (document or resource)
(/2011/samples/first.html)

• To sum it up, the URL in Figure 2-1 says it would like to use the HTTP

protocol to connect to a web server on the Internet called
www.example.com and request the document/file name first.html
(located in the samples directory, which is in the 2011 directory).

Web Page Addresses (URLs)
• Default files
➢ Not all URLs are lengthy, Many addresses do not include a filename

➢ When a server receives a request for a site name OR directory name
rather than a specific filename, it looks in that directory for a default
document, typically named index.html

➢ If your site uses server-side
programming to generate pages,
the index file might be named
default.htm, main.html,
index.php or index.asp.

The Anatomy of a Web Page
• HTML documents
➢ The graphically rich and interactive pages we see on the Web are
generated by simple, text-only documents.
➢ This text file is referred to as the source document.
➢ Adding descriptive tags to a text document is known as “marking up”
the document.
➢ Web pages use a markup language called HyperText Markup
Language, or HTML for short
➢ HTML defines dozens of elements that make up documents such as
headings, paragraphs, emphasized text, links, title, images, videos,
and widgets for form inputs
➢ Several versions of HTML in use today. These include:

❖ HTML version 4.01
❖ XHTML 1.0
❖ HTML5

The Anatomy of a Web Page
• Introduction to HTML Markup
➢ The web page shown on the following slide consists of 4 separate
files:
❖ An HTML text document (index.html)
❖ A CSS (kitchen.css)
❖ Two images (foods.gif, spoon.gif)

index.html

The Anatomy of a Web Page
➢ Tags in the HTML source document give the browser instructions
for how the text is structured and where the images should be
placed.

The Anatomy of a Web Page
➢ Text within the brackets (for example, ) does not display in the
final page.
➢ The browser displays only what’s between the tags (the content of the
element)
➢ Most of the HTML tags appear in pairs surrounding the content of the
element
❖ indicates the following text should be a level-1 heading.
❖ indicates the end of the level-1 heading
➢ Some elements called Empty elements (Do not have content)
❖ The tag indicates an empty element that tells the browser to “insert a
thematic divider here” (a horizontal line)

• Where are the pictures?
➢ No pictures in the HTML file.
➢ Each image is a separate file.
➢ Images are placed in the flow of the text with the HTML image element (img)
❖ This tag tells the browser where to find the graphic (its URL).
❖ When the browser sees the img element, it makes another request to the
server for the image file, and then places it in the content flow.
❖ The browser software brings the separate pieces together into the final page.

The Anatomy of a Web Page
• Adding Style
➢ Near the top of the HTML document there is a link element that points
to the style sheet document (kitchen.css)
❖ That style sheet includes a few lines of instructions for how the page
should look/present in the browser.

❖ These are style instructions written according to the rules of
Cascading Style Sheets (CSS).
❖ CSS allows designers to add visual style instructions (known as the
document’s presentation) to the marked-up text (the document’s
structure, in web design terminology).

Putting It All Together
•

To wrap up our introduction to how the web works, let’s trace a typical stream of
events that occurs with every web page that appears on your screen:

Putting It All Together
• To wrap up our introduction to how the web works, let’s trace a typical

stream of events that occurs with every web page that appears on your
screen:
1.
2.
3.

Web pages can be requested by typing the URL directly into a browser or
by clicking on a link to the web page
Your browser sends an HTTP request to the server named in the URL and
asks for the specific file
The server looks for the requested file and issues an HTTP response
➢ If the page cannot be found, the server returns an error message. The
message typically says “404 Not Found,” although more hospitable error
messages may be provided.
➢ If the document is found, the server retrieves the requested file and returns
it to the browser.

4.

5.

The browser parses the HTML document. If the page contains images
(indicated by the HTML img element) or other external resources like
scripts, the browser contacts the server again to request each resource
specified in the markup.
The browser inserts each image in the document flow where indicated by
the img element and the assembled web page is displayed for your
viewing pleasure.

Learning Web Design
Chapter 3:

Some Big Concepts You Need to Know

Some Big Concepts You Need to Know
• The heart of the matter is that as web designers:
1. We never know exactly how the pages we create will be
viewed.
2. We don’t know which of the hundreds of browsers might
be used.
3. Whether it is on a desktop computer or something more

portable.
4. How large the browser window will be.
5. What fonts are installed.
6. Whether functionality such as JavaScript is enabled?
7. The speed of the Internet connection

Some Big Concepts You Need to Know
• The Big Concepts in this chapter are primarily reactions to
and methods for coping with the certain elements of the
Unknown in our medium. They include:
1. The multitude of devices
2. Web standards
3. Progressive enhancement
4. Responsive web design
5. Accessibility
6. Site performance

A Dizzying Multitude of Devices
• Introduction of mobile devices such as iPhone and Android
smartphones brought in a new shift in how, when, and where we surf
the web.
• The challenge of designing for all of these devices goes beyond
addressing differing screen sizes.
• There is a world of difference between using a site over a broadband
connection and over a 3G, 4G or else network.
• Designers need to resist making assumptions about network speed
and context based on the screen size.

Sticking with the Web Standards
• Dealing with the diversity between devices
➢ Follow the HTML, CSS, and JavaScript standards documented by
the World Wide Web Consortium (W3C)
➢ Sticking with web standards is the primary tool for ensuring a site
is as consistent as possible on all standards-compliant browsers
(approximately 99% of those currently in use)
➢ It also helps make your content forward-compatible as web
technologies and browser capabilities evolve.

Progressive Enhancement
• No browser has implemented all of the standards 100%.
• Users can set their own browser preferences, so they may have a
browser that supports JavaScript but have chosen to turn it off.
• Progressive enhancement is one strategy for dealing with unknown

browser capabilities.
➢ When designing with progressive enhancement, start with a
baseline experience to make the content or functionality available
to even the most rudimentary browsers or assistive devices.
• Progressive enhancement includes:
1. Authoring Strategy
➢ When an HTML document is written in logical order and its
elements are marked up in a meaningful way, it will be usable on
the widest range of browsing environments, including the oldest
browsers, future browsers, and mobile and assistive devices.

Progressive Enhancement
2. Styling Strategy
❖ Can create layers of experience simply by taking advantage of the
way browsers parse style sheet rules.
❖ Without going into too much technical detail, you can write a style
rule that makes an element background red, but also includes a
style that gives it a nice gradient (a blend/merge from one color to
another) for browsers that know how to render gradients.
3. Scripting Strategy
❖ JavaScript is the scripting language that makes web pages
interactive and dynamic (updating content on the fly or in response)
❖ Like other web technologies, there are discrepancies in how
browsers handle JavaScript (particularly on non-desktop devices),
and some users opt to turn it off entirely.
❖ Make sure basic functionality—such as linking from page to page
or accomplishing essential tasks like data submission via forms—is
intact, even when JavaScript is off.

Responsive Web Design
• Responsive web design is a strategy for dealing with unknown screen size.
• Most browsers on small devices, such as smartphones and tablets, shrink
a web page down to fit a screen and provide mechanisms for zooming and
moving around the page. This can create the following issues:
➢ Text is too small to read
➢ Links are too small to select
➢ Zooming and panning around is distracting

Responsive Web Design
• Responsive Web Design
➢ Strategy for providing custom layouts to devices based on the size of

the viewport (screen size)
➢ Serving a single HTML document to all devices, but applying different
style sheets based on the screen size for the most optimized layout
for that device
➢ Helps with matters of layout, but it is not a solution to all mobile web
design challenges
➢ Providing the best experiences for your users and their chosen
device may require optimizations that go beyond adjusting the look
and feel
• Dedicated Mobile Sites
➢ The alternative to a single responsive site is to build an entirely

separate site, with a unique URL, that gets served up when
requested by a mobile device
➢ Mobile site URLs are commonly prefixed with “m.” or “mobile.”
➢ On dedicated mobile sites, the most frequently requested features
are highlighted on the first screen, and a lot of the “extra” stuff (like
promotions) from the desktop site is simply stripped away.

One Web for All (Accessibility)
• Although intended for users with disabilities, such as poor vision or
limited mobility, the techniques and strategies developed for
accessibility also benefit other users.
• Helps users with less-than-optimum browsing experiences (e.g.,
handheld devices, outdated browsers, slow modem connections,
images and JavaScript turned off, etc.)
• Accessible sites are also more effectively indexed by search engines
such as Google.
• The four broad categories of disabilities that affect how people interact

with their computers and the information on them are:
1. Vision impairment
❖ People with low or no vision may use an assistive device such
as a screen reader, Braille display, or a screen magnifier to get
content from the screen.
2. Mobility impairment
❖ Users with limited or no use of their hands may use special
devices such as a modified mouse or keyboard, foot pedals, or
joysticks to navigate the Web and enter information

One Web for All (Accessibility)
3. Auditory impairment
❖ Users with limited or no hearing will miss out on audio aspects of
multimedia, so it is necessary to provide alternatives, such as
transcripts for audio tracks or captions for video.
4. Cognitive (mental) impairment
❖ Users with memory, reading comprehension, problem solving,
and attention limitations benefit when sites are designed simply

and clearly
• Guidelines started by W3C:
➢ Web Accessibility Initiative (WAI)
❖ To address the need to make the web usable for everyone
❖ Good starting point for learning more about web accessibility.
➢ WAI-ARIA (Accessible Rich Internet Applications)
❖ Addresses the accessibility of web applications that include
dynamically generated content, scripting, and advanced interface
elements that are particularly confounding to assistive devices

The Need for Speed (Site Performance)
•
•
•

The percentage of people using mobile devices to access the Web is
increasing dramatically
Mobile usage is expected to exceed desktop usage

Things that can be done to improve site performance fall into two
categories:
1. Limiting file sizes.
2. Reducing the number of requests to the server.

•

Specific things that can be done to improve site performance include:
1. Optimizing images so they are the smallest file size possible without
sacrificing quality.
2. Minimize HTML and CSS documents by removing extra character spaces
and line returns.
3. Keep JavaScript to a minimum.
4. Add scripts in such a way that they load in parallel with other page assets
and don’t block rendering.
5. Don’t load unnecessary assets (such as images, scripts, or JavaScript
libraries)
6. Reduce the number of times the browser makes requests of the server

•

Every trip to the server in the form of an HTTP request takes a few
milliseconds, and those milliseconds can really add up

Learning Web Design

Chapter 4:
Creating a Simple Page

(HTML Overview)

A Web Page, Step by Step
• Five steps for basic page production:
➢ Step 1: Start with content. As a starting point, we’ll write up raw text
content and see what browsers do with it.

➢ Step 2: Give the document structure. You’ll learn about HTML
element syntax and the elements that give a document its structure.
➢ Step 3: Identify text elements. You’ll describe the content using the
appropriate text elements and learn about the proper way to use
HTML.
➢ Step 4: Add an image. By adding an image to the page, you’ll learn
about attributes and empty elements.
➢ Step 5: Change the page appearance with a style sheet. This
exercise gives you a taste of formatting content with Cascading Style
Sheets (CSS).

Figure 4-1. In this chapter,
we’ll write the source
document for this page step
by step.

Before We Begin, Launch a Text Editor
 We’ll be writing out HTML documents by hand, so the first thing we
need to do is launch a text editor.

 HTML documents can be created in a number of ways. One way is to
use Notepad++.
1. Download the latest version of Notepad++ from here.
2. To preview your HTML document inside of notepad++, you need to
install “Preview HTML” plugin. Follow the steps here.
3. To use Preview HTML, click Ctrl+Shift+H OR click as below.

Step 1: Start with Content

Step 1: Start with Content
• Follow these rules and conventions when naming files
1. Use proper suffixes for files.
▪

HTML and XHTML files must end with .html

2. Never use character spaces within filenames.
▪

Common to use an underline character or hyphen to visually separate words
within filenames

3. Avoid special characters.
▪

For example, ?, %, #, /, :, etc.

4. Filenames may be case-sensitive
▪
▪

Depending on server configuration
Consistently using all lowercase letters in filenames is one way to make your
filenames easier to manage

5. Keep filenames short
▪

Short names keep the character count and file size of your HTML file in
check

6. Self-imposed conventions
▪
▪

Helpful to develop a consistent naming scheme for huge sites
For instance, always using lowercase with hyphens between words.

Step 2: Give the Document Structure
• We have our content saved in an .html document—now we’re ready to
start marking it up.
• Introducing…HTML elements:
➢ An element consists of both the content and its markup.

Step 2: Give the Document Structure
➢ HTML elements:
❖ Syntax – anatomy of an HTML element
❖ Elements are identified by tags in the text source
▪
▪

A tag consists of the element name (usually an abbreviation of a longer
descriptive name) within angle brackets ()
The browser knows that any text within brackets is hidden and not
displayed in the browser window.

❖ Element names appear in the opening tag and also in the closing tag
preceded by a slash (/)
▪

Closing tag works like an off switch for the element.

❖ Not all elements have content and can be empty
❖ Markup – tags added around content
▪

It is important to note that an element consists of both the content and its
markup (the start and end tags)

❖ HTML – capitalization of element names is not important
❖ XHTML – element names must be all lowercase to be valid

Step 2: Give the Document Structure
➢ Basic document structure

Step 2: Give the Document Structure
❖ Only element required in an HTML document is the title
▪

XHTML requires all elements except the meta element

1. First line in HTML document is the document type declaration or
DOCTYPE declaration.
▪

It lets modern browsers know they should interpret the document as written

according to the HTML5 specification

2. The entire document is contained within an html element.
❖ Within the html element, the document is divided into:
1. Head – Contains descriptive information about the document itself (title,
style sheet, scripts and other types of “meta” information.)
o Meta – Provide information about the document itself.
❑ Specifies character encoding (charset)
o Title – mandatory element.
2. Body – contains everything that should be seen in a browser window

Step 2: Give the Document Structure

Step 3: Identify Text Elements
➢ Semantic markup
❖ The purpose of HTML is to add meaning and structure to the content
▪ Not intended to provide instructions for how the content should
look (its presentation). This is called Semantic markup
❖ HTML element that provides the most meaningful description of the
content at hand
▪

Most important heading should be marked up as h1

❖ Markup gives the document structure
❖ DOM – Domain Object Model
▪
▪

The way elements follow each other or nest within one another creates
relationships between the elements. This is called the Document Object
Model (DOM)
The underlying document hierarchy is important because it gives
browsers cues on how to handle the content

❖ With no style sheet system in place, HTML was extended to give
authors ways to change the appearance of fonts, colors, and
alignment using markup alone

Step 3: Identify Text Elements

Step 3: Identify Text Elements
➢ Default Styles
❖ The browser makes an attempt to give the page some visual
hierarchy by making the first-level heading the biggest and boldest
thing on the page, with the second-level headings slightly smaller
❖ User agent style sheets
▪

▪
▪

All browsers have their own built-in style sheets that describe the default
rendering of elements.
Default rendering is similar from browser to browser.
If the h1 is too big and clunky as the browser renders it, change it with a
style sheet rule.

Step 4: Add an Image
➢ Empty elements
❖ Elements do not have text content because they are used to
provide a simple directive.

❖ Image elements are examples of empty elements.
▪

Image element tells the browser to get an image file from the server and
insert it at that spot in the flow of the text

❖ Other empty elements include line breaks and thematic breaks

(horizontal line)

Step 4: Add an Image
➢ Attributes
❖ Are instructions that clarify or modify an element
▪

For the img element, the src (short for “source”) attribute is required, and
specifies the location (URL) of the image file

❖ Attributes go after the element name in the opening tag only, never
in the end tag.
❖ There may be several attributes applied to an element, separated by
spaces in the opening tag. Their order is not important.

Step 4: Add an Image
❖ Most attributes take values, which follow an equals sign (=)
❖ A value might be a number, a word, a string of text, a URL, or a
measurement, depending on the purpose of the attribute
❖ Some values don’t have to be in quotation marks in HTML, but
XHTML requires them.
❖ Some attributes are required, such as the src and alt attributes in the
img element.
❖ The attribute names available for each element are defined in the
HTML specifications.

Step 4: Add an Image

Step 5: Change the Look with a Style Sheet
❖ We’ll get into CSS in more detail in chapter 11 and beyond.

When good pages go bad
❖ (/) are required to close a tag
▪

For example, to close an emphasis tag, a () is needed

❖ Without the closing tag bracket, the browser assumes that all the
following text—all the way up to the next closing bracket it finds (>) is
part of the opening tag.

Validating your Documents
❖ Validating a document is to check your markup to make sure that you

have abided by all the rules of whatever version of HTML you are using to
create your document.
❖ Documents that are error-free are valid.
❖ Valid documents are more consistent when displayed in different browsers.

❖ Validator
▪
▪

A software that checks the source code against the HTML version that is specified.

The W3C offers a free online validator at validator.w3.org.

❖ Validators check for:
▪
▪
▪
▪
▪
▪
▪

The inclusion of a DOCTYPE declaration. Without it the validator doesn’t know
which version of HTML or XHTML to validate against.
An indication of the character encoding for the document
The inclusion of required rules and attributes
Non-standard elements
Mismatched tags
Nesting errors
Typos and other minor errors.

Learning Web Design
Chapter 5:
Marking Up Text

Paragraphs
• Paragraphs are rudimentary/basic elements of a text document.
• You indicate a paragraph with the p element by inserting an
opening tag at the beginning of the paragraph and a closing
tag after it.

• Visual browsers nearly always display paragraphs on new lines with
a bit of space between them by default (to use a term from CSS,
they are displayed as a “block”)
• Phrasing Content
➢ Paragraphs may contain text, images, and other inline elements
➢ May not contain headings, lists, sectioning elements, or any element
that typically displays as a block by default.

• HTML: the closing tag can be omitted.
➢ A browser just assumes it is closed when it encounters the next block
element

• XHTML: closing tag is required
• Most web developers chose to close paragraphs and all elements

Headings
• There are actually six levels of headings, from h1 to h6:
• This example shows the markup for four heading levels:
• h1: 2em size (2em means 2 times the size of the current font).

• h2: 1.5em, h3: 1.17em, h4: 1em, h5: .83em, h6: .67em
Type Design
Serif Typefaces
Serif typefaces have small slabs at the ends of letter strokes.
In general, serif fonts can make large amounts of text easier to read.
Baskerville
Description
Description of the Baskerville typeface.
History
The history of the Baskerville typeface.

Georgia
Description and history of the Georgia typeface.
Sans-serif Typefaces
Sans-serif typefaces do not have slabs at the ends of strokes.

Headings
• Heading Groups
➢ It is common for headlines to have clarifying subheads or taglines.
➢ HTML5 includes the hgroup element for identifying a stack of headings
as a group.
➢ Browsers that support know to count only the highest-ranked
heading in the outline and ignore the rest.

Lists

• HTML provides elements for marking up three types of lists:
1. Unordered Lists
▪ Collections of items that appear in no particular order
▪ To identify an unordered list, mark it up as a “ul” element
▪ The opening tag goes before the first list item, and the closing tag
goes after the last item
▪ Each item in the list gets marked up as a list item (li) by enclosing it in
opening and closing li tags
▪ The same unordered list markup can be changed in appearance by applying
different style sheets

Lists
2. Ordered lists
▪ Lists in which the sequence of the items is important
▪ Instead of bullets, the browser automatically inserts numbers before ordered
list items, so you don’t need to number them in the source document
▪ If you want a numbered list to start at a number other than “1,” you can use
the start attribute in the ol element to specify another starting number.

▪ Nesting List
❑ Any list can be nested within
another list
❑ Must be placed within a list item
❑ When an unordered list is nested
within another unordered list, the
browser automatically changes
the bullet style for the secondlevel list

Chapter 1
Chapter 2

Chapter 2.1
Chapter 2.2

1. Chapter 1
2. Chapter 2
o Chapter 2.1
o Chapter 2.2

Lists
3. Description lists
▪ Lists that consist of name and value pairs, including but not limited to terms
and definitions.
▪ The whole description list is marked up as a dl element
▪ The content of a dl is some number of dt elements indicating the names and
dd elements for their respective values.

More Content Elements
• Long Quotations
➢ Long quotations, testimonials, or a section of copy from another
source, should be marked up as a blockquote element
➢ Blockquote elements
❖ Are part of sectioning roots category of elements
❖ Content within blockquote elements be contained in other elements.

More Content Elements
• Preformatted Text
➢ Element used for whitespace in conveying meaning of a document
➢ It is a unique element, in that it is displayed exactly as it is typed,
including all the carriage returns and multiple character spaces.
➢ By default, preformatted text is also displayed in a constant-width font
(one in which all the characters are the same width, also called
monospace), such as Courier.

More Content Elements
• Figures
➢ The figure element is used for content that illustrates or supports some point
in the text.
➢ A figure may contain an image, a video, a code snippet, text, or even a
table—pretty much anything that can go in the flow of web content and should
be treated and referenced as a self-contained unit
➢ If a figure is removed from its original placement in the main flow (to a sidebar
or appendix, for example), both the figure and the main flow should continue
to make sense.
➢ A caption can be attached to the figure using the
optional figcaption element above or below the
figure content.

Sample of Pie chart.

Organizing Page Content
• HTML5 introduced new elements that give semantic meaning to sections
of a typical web page or application, including sections (section),
articles (article), navigation (nav), tangentially related content (aside),
headers (header), and footers (footer)
• The new element names are based on a Google study that looked at the
top 20 names given to generic division elements

Organizing Page Content
• Sections
➢ Long documents are easier to use when they are divided into smaller parts.
➢ For example, books are divided into chapters, and newspapers have sections

for local news, sports, comics.
➢ section element divide long web documents into thematic sections
➢ Typically have a heading (inside the section element) and any other content
that has a meaningful reason to be grouped together
➢ The section element has a broad range of uses, from dividing a whole page into
major sections or identifying thematic sections within a single article

Organizing Page Content
➢ Article
❖ Self-contained works that could stand alone or be reused in a different
context (such as syndication)
❖ Useful for magazine or newspaper articles, blog posts, comments, or other
items that could be extracted for external use
❖ Specialized section element.

Organizing Page Content
• Navigation
➢ nav element gives developers a semantic way to identify navigation for a site
➢ The spec makes it clear that it should be used for links that provide primary
navigation around a site or a lengthy section or article.

• Aside (sidebars)
➢ Aside element identifies content that is related but tangential to the surrounding
content
➢ In print, its equivalent is a sidebar, but it couldn’t be called sidebar, because
putting something on the “side” is a presentational description, not semantic

Organizing Page Content
• Headers and Footers
➢ Header
❖ Used for introductory material that appears at the beginning of a web page
or at the top of a section or article.
❖ There is no specified list of what a header must or should contain.

Organizing Page Content
• Headers and Footers
➢ Footers
❖ Used to indicate the type of information that comes at the end of a page or an
article (author, copyright information, etc.)
❖ May apply to the entire document or be associated with a particular section or
article
❖ If the footer is contained directly within the body element, either before or after
all the other body content, then it applies to the entire page or application
❖ If it is contained in a sectioning element (section, article, nav, or aside), it is
parsed as the footer for just that section

Organizing Page Content
• Addresses
➢ Used to create an area for contact information for the author or maintainer of
the document
➢ Usually placed at the end of the document or in a section or article within a
document
➢ Could appear in a footer element
➢ Used specifically for author contact information

The Inline Element Roundup
• Inline element
➢ Display in the flow of text by default and DO NOT cause any line breaks.

• Text-level inline elements
➢ Element used to highlight important text.

The Inline Element Roundup
• Adding breaks
➢ Line breaks
❖ Add a line break within the flow of text using br element

➢ Word breaks
❖ The word break wbr element lets you mark the place where a word should
break if it needs to “line break opportunity”.
❖ If there is enough room, the word stays in one piece.

Generic Elements
• Divide it up with a
➢ The div element is used to create a logical grouping of content or elements
on the page.
➢ It indicates that they belong together in some sort of conceptual unit or should
be treated as a unit by CSS or JavaScript.

• Get inline with
➢ A span offers the same benefits as the div element.
➢ The difference between the two is that div is a block element, It’s on a separate
line. span however is an inline element, meaning that it can be on a line with other
elements.
➢ span used to group inline-elements and does not introduce line breaks.
➢ span mostly used for styling by using an id or class.

Generic Elements
• id and class attributes
1. Identification with id
❖ The id attribute is used to assign a unique identifier to an element in the
document
❖ The value of id must be used ONLY ONCE in the document

Generic Elements
• id and class attributes
2. Classification with class
❖ The class attribute classifies elements into conceptual groups; therefore,
unlike the id attribute, multiple elements may share a class name
❖ By making elements part of the same class, you can apply styles to all of
the labeled elements at once with a single style rule or manipulate them
all with a script.

➢ id and class attributes may be used with all elements in HTML5, not

just div and span

Special Characters

Special Characters
• Some common characters, such as the copyright symbol ©, are not part
of the standard set of ASCII characters, which contains only letters,
numbers, and a few basic symbols.
• Characters such as these must be escaped in the source document.
➢ Escaping means that instead of typing in the character itself, the
character is represented by a 6-digit number.
• Two ways of referring to a specific character:
❖ Numeric entity – assigned numeric value (©)
❖ Named entity – predefined abbreviated name for the character (©)

• HTML defines hundreds of named entities as part of the markup
language.
• XHTML
➢ Every instance of an ampersand must be escaped so that it is not
interpreted as the beginning of a character entity, even when it
appears in the value of an attribute.

Learning Web Design
Chapter 6:
Adding Links

Adding Links
• Anchor (a)
➢ Element that makes linking possible.
➢ To make a selection of text a link, simply wrap it in opening and closing
… tags and use the href attribute to provide the URL of the target page.

➢ The content of the anchor element becomes the hypertext link.

➢ The simplified structure of the anchor element is: linked text or
element
❖ Here is an example that creates a link to the O’Reilly Media website:

❖ To make an image a link, simply put
the img element in the anchor element:

The href Attribute
• The href (hypertext reference) attribute provides the address of the page
or resource (its URL) to the browser.
• The URL must always appear in quotation marks
• Because there’s not much to placing anchor tags around some content,
the real trick to linking comes in getting the URL correct.
• Two ways to specify a URL:
1. Absolute ( External) URLs
❖ Provide the full URL for the document, including the protocol (, the
domain name, and the pathname as necessary
❖ You need to use an absolute URL when pointing to a document out on the
Web (i.e., not on your own server)

2. Relative (Internal) URLs
❖ Describe the pathname to a file relative to the current document
❖ Relative URLs can be used when you are linking to another document on
your own site (i.e., on the same server)
❖ It doesn’t require the protocol or domain name—just the pathname.
See: Absolute&Relative URLs.html

Linking to Pages on the Web *
• External link (Absolute link)
➢ It is going to a page outside of your own server or site.
➢ To make an external link, you need to provide the absolute URL, beginning

with http:// (the protocol)
➢ When copying long links, helpful to copy the URL from the location toolbar
in the browser and paste it into the document

Linking Within Your Own Site *
• A large portion of the linking you’ll do will be between pages of your own
site:
➢ From the home page to section pages
➢ From section pages to content pages, and so on

• Without “ the browser looks on the current server for the linked
document.
➢ A pathname, the notation used to point to a particular file or directory, tells the
browser where to find the file
➢ Web pathnames follow the Unix convention of separating directory and
filenames with forward slashes (/)

NOT on your own server

on your own server

Linking Within Your Own Site
• Important Pathname Don’ts
1. Don’t use backslashes (\).
❖ Web URL pathnames use forward slashes (/) only
2. Don’t start with the drive name (D:, C:, etc.)

3. Don’t start with file://
❖ This also indicates that the file is local and causes the link to break when it
is on the server.

Linking Within Your Own Site
• Internal Link (Relative URLs)
• Linking within a Directory
➢ The most straightforward relative URL points to another file within the same
directory
➢ When you link to a file in the same directory, you only need to provide the
name of the file (its filename)
➢ When the URL is a single filename, the server looks in the current directory
(that is, the directory that contains the document with the link) for the file

Linking Within Your Own Site
• Linking to a Lower Directory
➢ If the files are not in the same directory, the browser needs directions by
including the pathname in the URL
➢ Directories are separated by forward slashes
❖ The resulting anchor tag tells the browser where to look
❖ This same method applies for relative pathnames that drill down through
any number of directories
▪ Just start with the name of the directory that is in the same location as
the current file, and follow each directory name with a slash until you get
to the linked filename

Linking Within Your Own Site
• Linking to a Higher Directory
➢ In Unix, there is a pathname convention just for this purpose, the “dot-dotslash” (../)
➢ When a pathname begins with ../, it’s the same as telling the browser “back up
one directory level” and then follow the path to the specified file

Linking Within Your Own Site
• Site root relative pathnames
➢ All websites have a root directory, which is the directory that contains all the
directories and files for the site.
➢ Root directory
❖ The directory that contains all the directories and files for the site
➢ Site root relative
❖ Another way to write a relative pathname is to start at the root directory and
list the subdirectory names until you get to the file you want to link to
➢ A forward slash (/) at the

start of the pathname
indicates the path begins at
the root directory
➢ Do not need to write the
name of the root directory in
the path
➢ Start with a forward slash (/)
and the browser will look in
the
top-level
directory
relative to the current file

You are here

Linking Within Your Own Site
• It’s the same for images
➢ Src attribute in the img element works the same as the href attribute in anchors
when it comes to specifying URLs.

You are here

Linking Within Your Own Site
• Linking to a specific point in a page
➢ Linking to a specific point in the page is also referred to as linking to a
document fragment.
➢ Fragment
❖ Linking to a specific point in the page
❖ Fragment identifier
▪ Use the id attribute to give the
target element in the document a
unique name

Identify the destination using the id attribute.

Create a link to the destination. The # before the name is
necessary to identify this as a fragment and not a filename.

See Glossary.html

Linking Within Your Own Site
• Linking to a fragment in another document
➢ Link to a fragment in another document by adding the fragment name
to the end of the URL.
❖ For example, to make a link to the “H” heading of the glossary page from
another document in that directory, the URL would look like this:

➢ Link to specific destination in pages on other sites by placing the
fragment identifier at the end of the absolute URL.

➢ Destination points must be inserted by the author of those documents
in order for them to be available
❖ “View Source” for the page and look for them in the markup

Targeting a New Window *
• One problem with putting links on your page is that when people click on
them, they may never come back.
➢ The traditional solution to this dilemma has been to make the linked
page open in a new browser window
➢ Visitor can check out the link and still have the content from your
website available where they left it
•

Reasons for not having links open in a new browser window include:

1. Tabbed browsers make it somewhat less likely that users will never
find their way back to the original page
2. Opening new windows is problematic for accessibility
3. New windows may be confusing to some users, particularly those who
are accessing your site via a screen reader or even on a small-screen
device
4. New windows may be perceived as an annoyance rather than a
convenience

Targeting a New Window
• A new window with markup
➢ Target attribute
❖ To open a new window using markup, use the target attribute in the anchor
(a) element to tell the browser the name of the window in which you want
the linked document to open.
❖ No control over window sizing.
❖ Will open as a tab or in a new window the same size as the most recently
opened window in the user’s browser
❖ Setting target=”_blank” always causes the browser to open a fresh window
▪ If target “_blank” is used for every link, every link will launch a new
window, and could cause a mess of open windows

See new window.html

Targeting a New Window
• Pop-up windows
➢ Opening a window with specific dimensions and various parts of the browser
chrome (toolbars, scrollbars, etc.) turned on or off
❖ It takes JavaScript to do this type of window
➢ Commonly used on web pages for advertising

• Mail Links
➢ Using the mailto protocol in a link, you can link and email address.
➢ When the mailto link is clicked on, the browser opens a new mail message
preaddressed to that address in the designated mail program
➢ Standard anchor element with the href attribute
➢ Browser has to be configured to launch a mail program.

• Telephone Links
➢ When mobile users tap the link, they will get an alert box asking them to
confirm that they would like to call the number
➢ Feature is supported by most mobile devices and Desktop VoIP applications.
➢ Nothing happens when desktop users click the link.

Learning Web Design
Chapter 7:
Adding Images

Learning Web Design
Chapter 7:
Adding Images

Adding Images
• Images
➢ Appear on web pages in two ways:
1. Inline content (image)
2. Background images
▪ Adding using Cascading Style Sheets (CSS) (ch13)
➢ With the emergence of standards-driven design and its mission to keep all
matters of presentation out of the document structure, there has been a shift
away from using inline images for purely decorative purposes.

• Image formats
❖Must be in GIF, JPEG, or PNG file formats
❖Must have the proper file suffix (.gif, .jpg, .png)
❖Will not be recognized by browser if not in the appropriate format.
❖Popular image formats (TIFF, BMP, EPS) must be converted to web format

before the image can be added to the web page
❖If needed, image can be kept in original format by making the image
available as an external image or by using a CAD program to make the
image a vector image
❖External image – making a linking to directly to the image file

The img Element
•
➢ img element tells the browser to “Place an image here”
➢ Images can be placed in the flow of text at the point where the image is to appear
➢ Images stay in the flow of text and do not cause any line breaks.

➢ Src attribute tells the browser the location of the image file

The img Element
➢ Alt attribute provides alternative text that displays if the image is not available

The img Element
• Providing the location with src (src=“URL”)
➢ The value of the src attribute is the URL of the image file
➢ In most cases, the images used on the pages will reside on the server, so relative
URLs to are needed to point to them
➢ If the image is in the same directory as the HTML document, the image can be
referred to by name in the src attribute
➢ Developers usually organize the images for a site into a directory called images,
assets, or graphics
➢ May even be separate image directories for each section of the site
➢ If an image is not in the same directory as the document, the pathname to the
image file will need to be provided.
• Providing the alternate text with alt (alt=“text”)
➢ Every img element must also contain an alt attribute that is used to provide a brief

description of the image for those who are not able to see it
➢ Alternate text (also referred to as alt text) should serve as a substitute for the
image content—serving the same purpose and presenting the same information
➢ Omitting the alt attribute will cause the document to be invalid

The img Element
• Providing width and height dimensions
➢ The width and height attributes indicate the dimensions of the image in
number of pixels.
➢ These attributes can speed up the time it takes to display the final page by
seconds.
➢ Browsers use the specified dimensions to hold the right amount of space in
the layout while the images are loading rather than reconstructing the page
each time a new image arrives

See slide note example below

The img Element
➢ Width and height attributes work well when designing a version of the web page
with a fixed image size.
➢ In these days of responsive web design, it is common to create several versions
of the same image and send a small one to small mobile devices and a larger
image for large-screen devices (and rescale the images to fit for sizes in
between)
➢ If scaling images in a responsive design or delivering multiple image sizes, do not
use width and height attributes in the markup.
➢ Match values with actual pixel size

❖ Pixel dimensions should be specified as the actual dimensions of the image
❖ If the pixel values differ from the actual dimensions of the image, the browser
resizes the image to match the specified values
❖ It is better to resize the image in an image-editing program and then place it at
actual size on the page.

The img Element
➢ When the browser sees the img element, it makes a request to the server and
retrieves the image file before displaying it on the page.
❖ On a fast network with a fast computer, even though a separate request is made
for each image file, the page usually appears to arrive instantaneously
❖ On mobile devices with slow network connections, we may be well aware of the
wait for images to be fetched one at a time
❖ The same is true for users still using dial-up Internet connections or other slow
networks, like the expensive WiFi at luxury hotels
➢ Browsers use helper applications to display media they can’t handle alone
➢ The browser matches the suffix of the file in the link to the appropriate helper
application
❖ The external image may open in a separate application window or within the
browser window if the helper application is a plug-in, such as the QuickTime plugin
➢ The browser may also ask the user to save the file or open an application manually
➢ Other items of note about the img element:
❖ It is an empty element, which means it doesn’t have any content
❖ Writing in the stricter XHTML syntax, you need to terminate (close) the empty img
element with a slash like so:
❖ Known as a replaced element because it is replaced by an external file when the
page is displayed
❖ By default, the bottom edge of an image aligns with the baseline of text

A Window in a Window
• iframe
➢ Allows embedding of a separate HTML document or other resource in a

document.
➢ What is seen on the page is a floating or inline “frame” that displays the
document with its own set of scrollbars if the embedded document is too long
to fit.
➢ Place an inline frame on a page similarly to an image, specifying the source
(src) of its content as well as its width and height.

➢ The content in the iframe element itself
displays in browsers that don’t support
the element
➢ Developers sometimes use them to
keep third-party content, such as
interactive ads or other widgets,
quarantined so they don’t interfere with
the scripting and contents of the rest of
the page

See slide note example below

Learning Web Design
Chapter 8:

Table Markup

How Tables Are Used
• HTML tables created when tabular material (data arranged into rows
and columns) needs added to a web page
• Used to organize calendars, schedules, statistics, or other types of
information
• Data does not have to be numbers
• Table cells may contain any sort of information:
➢
➢
➢
➢

Numbers
Text elements
Images
Multimedia objects

How Tables Are Used
• In visual browsers, the arrangement of data in rows and columns gives
readers an instant understanding of the relationships between data
cells and their respective header labels.
• When creating tables, keep in mind that some readers will be hearing
the data read aloud with a screen reader or reading Braille output.
• Trouble with Tables:
➢ Can be too large to display on mobile devices
❖ Text can be too small when rendered on a mobile device.
❖ Zooming may only display a few cells at a time instead of the whole table.

• Approaches to fixing table displays
1. Replace the table with a graphic representation such as a pie chart on
mobile devices.
2. For simple two- or three-column tables, consider using a dl list to represent
the information instead for more flexibility.
3. Another approach is to put an indication of the table (such as an image of
the top of it) that links to a separate screen with the full table for those who
are interested.

Minimal Table Structure
• Here is a small table with
three rows and three
columns that lists nutritional
information.

• Figure below shows those parts translate into elements (HTML table model)

❖ The elements that
identify the table for
“table”:
1. tr for “table row”
2. th for “table
headers” and
3. td for “table data”.

Table Headers
• The text marked up as headers (th elements) is displayed differently
from the other cells in the table (td elements)
• Table headers are important because they provide information or
context about the cells in the row or column they precede
• The th element may be handled differently than tds by alternative
browsing devices.
• Don’t try to fake headers by formatting a row of td elements differently
than the rest of the table
• Conversely, don’t avoid using th elements because of their default
rendering (bold and centered)
• Mark up the headers semantically and change the presentation later
with a style rule

Spanning Cells
➢ One fundamental feature of table structure is cell spanning, which is
the stretching of a cell to cover several rows or columns.
➢ Allows creation of complex table structures
➢ Markup can be more difficult to keep track of
➢ Make a header or data cell span by adding the colspan or rowspan
attributes.

• Column spans
➢ Created with the colspan attribute in the td or th element
➢ Stretches a cell to the right to span over the subsequent columns
➢ Every row should have the same number of cells or equivalent colspan
values

• Row spans

Spanning Cells

➢ Created with the rowspan
➢ Works just like column spans
➢ Every row should have the same number of cells or equivalent colspan
values
➢ Rows always span downward
➢ Cells that are spanned over do not appear in the code
➢ By default, cells are sized just large enough to fit their contents

Table Accessibility
• Keep in mind how the site’s content is going to be used by vision-

impaired visitors
• Make sense of tabular data using a screen reader
1. Describing table content:
➢ Provide a description of your table’s contents and perhaps the way it is
structured, if it is out of the ordinary.
➢ Use the caption element to give a table a title or brief description that displays
next to the table.
➢ Can use it to describe the table’s contents or provide hints on how it is
structured
➢ Caption element must be the first thing within the table element
➢ For longer descriptions, could consider putting the table in a figure element
and using the figcaption element for the description

Table Accessibility
2. Connecting cells and headers:
➢ Scope
❖ The scope attribute associates a table header with the row, column, group of
rows (such as tbody), or column group in which it appears using the values
row, column, rowgroup, or colgroup, respectively.
❖ For really complicated tables in which scope is not sufficient to associate a
table data cell with its respective header (such as when the table contains
multiple spanned cells), the headers attribute is used in the td element to
explicitly tie it to a header’s id value.

➢ Headers
❖ Used when scope is not sufficient to associate a table data cell with its
respective header.
❖ Headers attribute is used in the td element to explicitly tie it to the header’s id value.

Advanced Table Elements
• Row group elements
➢ Describe rows or groups as belonging to a header, footer, or the body of a table
using the thead, tfoot, and tbody elements
➢ User agents – another term for browsing device

• Column group elements
➢ May be identified with the col element or put
into groups using the colgroup element

➢ This is useful for adding semantic context
to information in columns and may be used
to calculate the width of tables more
quickly

Learning Web Design
Chapter 9
Forms

How Forms Work
• Two parts to a working form:
1. A form that is seen on the page itself using HTML markup.
❖ Includes form controls
▪ i.e., buttons, input fields and drop-down menus
❖ Used to collect information from the user
❖ May also contain text and other elements
2. An application or script on the server processes the
information collected by the form and returns an appropriate
response.
❖ It is what makes the form work
❖ Web applications and scripts require programming

What happens behind the
scenes when a web form is submitted

The form Element
➢ Forms are added to web pages using the form element
➢ form element is a container for all the content of the form, including
some number of form controls, such as text entry fields and buttons
➢ May also contain block elements (h1, p, and lists)
➢ Do not nest form elements or allow them to overlap
➢ A form element must be closed before the next one begins
➢ Currently, it is best practice to wrap form controls in semantic HTML
elements such as lists or divs

The form Element
• The action attribute
➢ Provides the location (URL) of the application or script on server
(sometime called action page) that will be used to process the form.
❖ The action attribute in this example sends the data to a script called
mailinglist.php.
❖ .php suffix indicates that this form is processed by a script written in the PHP
scripting language.

• Web forms can be processed using one of the following technologies:
1. PHP
▪ Open source scripting language most commonly used with the Apache web server

2. Microsoft ASP.NET (Active Server Page) (.asp)
▪ Programming environment for the Microsoft Internet Information Server (IIS)

3. Ruby on Rails
▪ Used with the Rails platform

4. JavaServer Pages (.jsp)
▪ Java-based technology similar to ASP

5. Python
▪ Popular scripting language for web and server applications

The form Element
• The method attribute:

➢ Specifies how the following information should be sent to the server.

➢ Two methods for sending this encoded data to the server:
❖ POST or GET : indicated using the method attribute in the form element.
• Method is optional
• Will default to GET if omitted
• POST and GET are not case-sensitive
❖ XHTML documents require lowercase values in the method attribute

The form Element
➢ POST method
❖ Browser sends a separate server request containing some special headers
followed by the data
❖ Only the server sees the content of this request
❖ Best method for sending secure information
❖ Preferable for sending a lot of data.
❖ See this Example:

post

➢ GET method
❖ Encoded form data gets tacked right onto the URL sent to the server
❖ Is appropriate when you want user to be able to bookmark the results of a
form submission
❖ Content of the form is in plain sight, so GET is not appropriate for personal

or financial information (secure information)
❖ May not be used when the form is used to upload a file
❖ See this Example:

Variables and Content
• Web forms use a variety of controls that allow users to enter
information or choose options
➢ Control types include various text entry fields, buttons, menus, and a few
controls with special functions
➢ They are added to the document using a collection of form control elements
➢ To use the technical term, “username” and “email” are two variables
collected by the form.
➢ The data entered by the user (“Sally Strongarm” and
“[email protected]”) is the value or content of the variable.

variable

value or content

Variables and Content
• The name attribute
➢ Provides the variable name for the control
➢ All form control elements must include a name attribute
➢ May also include a name attribute for submit and reset button
elements, but they are not required.

• Naming your variables
➢ Need to know the specific variable names when using preexisting
applications or scripts
➢ Developer will have the variable names.

The Great Form Control Roundup
• Majority of controls are added to a form using the input element
• Elements used to create form controls:
A. Text entry controls
1. Single-line text field – input element

2. Multiline text entry field – textarea element

The Great Form Control Roundup
• Elements used to create form controls:
B. Specialized text entry controls
1. Password entry field

2. HTML5 text inputs
➢ In HTML5, the email, tel, url, and search input types give the browser a
heads-up as to what type of information to expect in the field.

The Great Form Control Roundup
• Elements used to create form controls:
C. Submit and Reset Buttons
1. Submit button – most fundamental button that can be added to
web forms
2. Reset button – returns the form controls to the state they in when
the form initially loaded

The Great Form Control Roundup
• Elements used to create form controls:
D. Radio and checkbox buttons
1. Radio buttons
▪ Added using the input element with the type attribute set to radio
▪ All of the input elements have the same variable name, but their
values are different

2. Checkbox buttons
▪ Using the input element with its type set to checkbox

The Great Form Control Roundup
• Elements used to create form controls:
E. Pull-down and Scrolling Menus
1. Drop-down menus
▪ Select element displays as a drop-down menu by default when no size is
specified

The Great Form Control Roundup
• Elements used to create form controls:
E. Pull-down and Scrolling Menus
2. Scrolling menus
▪ Specify the number of lines that should be visible using the size attribute
▪ The multiple attribute allows users to make more than one selection
from the scrolling list.

The Great Form Control Roundup
• Elements used to create form controls:
E. Pull-down and Scrolling Menus
3. Grouping menu options
▪ Optgroup element to create conceptual groups of options
▪ Required label attribute in the optgroup element provides the heading
for the group

The Great Form Control Roundup
• Elements used to create form controls:
F. File selection and upload control
▪ File selection control makes it possible for users to select a document
from the hard drive to be submitted with the form data

G. Hidden controls
▪ Added using the input element with the type set to hidden
▪ Sole purpose is to pass a name/value pair to the server when the form
is submitted

The Great Form Control Roundup
• Elements used to create form controls:
H. Dates and times (HTML5)
▪ HTML5 introduced six new input types that make date and time selection
widgets part of a browser’s standard built-in display capabilities (just as
they can display checkboxes, pop-up menus, and other widgets today)

The Great Form Control Roundup
• Elements used to create form controls:
I. Numerical controls (HTML5)
▪ The number and range input types collect numerical data

J. Color picker control (HTML5)
▪ The intent of the color control type is to
create a pop-up color picker for visually
selecting a color value similar to those
used in operating systems or imageediting programs

Form Accessibility Features
• Label, fieldset, and legend form elements improve accessibility by making
the semantic connections between the components of a form clear
➢ Label
❖ Associates descriptive text with its respective form field
❖ Provides important context for users with speech-based browsers

➢ Fieldset and Legend
❖ Indicates a logical group of form controls
❖ Fieldset may also include a legend element that provides a caption for the
enclosed fields

Form Layout and Design
• Usable Forms
➢ A poorly designed form can ruin/destruction a user’s experience on
your site and
➢ Negatively impact your business goals.
➢ Badly designed forms mean lost customers.
➢ Tips:
1. Avoid unnecessary questions (filling many data: age, hob…etc)
2. Consider impact of label placement
3. Choose input types carefully
4. Group related inputs
5. Clarify primary and secondary actions (compulsory OR optional fields)

• Styling forms
➢ Apply form elements such as margins, fonts, colors, borders, and
background effects. (CSS later)

Learning Web Design
Chapter 10
What’s Up, HTML5

HTML
14
• History
of HTML

➢4 1991 – Initial draft written by Tim Berners-Lee
➢ 1994 – HTML+
➢ 1995 – HTML 2.0
➢ Late 1990’s – Browser wars between Mosaic Netscape and
Microsoft Internet Explorer
❖ Sites were created in separate versions, one for each browser
➢ W3C released first recommendations:
❖ HTML 3.2 (1996)
❖ HTML 4.0 (1998)
❖ HTML 4.01 (1999)
➢ Cascading Style Sheets started gaining support

2

HTML
14
• Enter
XHTML
➢5XML
❖ W3C decided that one limited markup language was not enough for
describing all the sorts of information that might be shared over the Web
❖ XML was the solution.
❖ XML was a simplification of SGML (Standardized Generalized Markup
Language) which Tim Berners-Lee had used to create his original HTML
❖ The W3C has a vision of an XML-based Web with many specialized
markup languages working together.

➢ XHTML
❖ Result of a rewrite HTML according to XML rules
❖ Element and attribute names must be lowercase
❖ All elements must be closed
❖ Attribute values must be in quotation marks
❖ All attributes must have explicit attribute values
❖ Proper nesting of elements is strictly enforced/required
❖ Special characters must always be represented by character entities
❖ (e.g., & for the & symbol).
❖ Use id instead of name as an identifier
❖ Scripts must be contained in a CDATA section so they will be treated as
simple text characters and not parsed as XML

3

HTML
14
• HTML5

➢ 62004 – Web Hypertext Application Technology Working Group
(WHATWG)
❖ Established by Apple, Mozilla, and Opera.
❖ The goal of the WHATWG was to further the development of HTML to
meet new demands in a way that was consistent with real-world
authoring practices and browser behavior
❖ Their initial documents, Web Applications 1.0 and Web Forms 1.0, were
rolled together.

➢ W3C established its own HTML5 Working Group based on the
work done by WHATWG
➢ 2009 – W3C ended its working group and put all of its resources
and efforts into HTML5

• New in HTML5:
➢ A new DOCTYPE
➢ New elements and attributers
➢ Obsolete 4.01 elements
➢ APIs
➢ Media Player API
➢ Drag and Drop API

4

HTML
14
• HTML
fun facts

➢7HTML5 is based on HTML 4.01 strict, the version of HTML that did
not include any presentation-based or other deprecated elements
and attributes
➢ HTML5 does not use a DTD (Document Type Definition), which is a

document that defines all of the elements and attributes in a
markup language.

➢ HTML5 can also be written according to the stricter syntax of XML
(called the XML serialization of HTML5).
➢ HTML5 defines a number of APIs (Application Programming
Interfaces).
➢ Media Player API
➢ Drag and Drop API
5

Markup Department
• A14minimal DOCTYPE
➢8Documents should begin with a Document Type Declaration
(DOCTYPE declaration).
➢ HTML5 declaration
➢ In HTML 4.01 and XHTML 1.0 and 1.1, the declaration must point
to the public DTD
❖ Public DTD – document that defines all of the elements in a markup

language and rules for using them

➢ Three types of DTD documents”
❖ Transitional
▪ Includes legacy elements like font and attributes such as align
marked as “deprecated”

❖ Strict
▪ Deprecated features stripped out

❖ Frameset
▪ Documents broken into individually scrolling frames

➢ HTML5 does not have a DTD
➢ Validators
❖ Software that checks all the markup in a document is correct
6

Markup Department
14
• Elements
and attributes
➢9 New elements in HTML5

➢ New form input types
❖ color, date, datetime, datetime-local, email, month, number, range,
search, tel, time, url, and week.

➢ New global attributes
❖ Global attributes are attributes that can be applied to any element
❖ ie: class – Assigns one or more classification names to the element.

➢ Obsolete HTML 4.01 Markup

7

Meet the APIs
15
• HTML
specifications prior to HTML5 included only documentation of the
0
elements,
attributes, and values permitted in the language
• The creators of HTML5 had their minds set on making it easier to create
web-based applications that require scripting and programming. For that
reason, HTML5 also defines a number of new APIs for making it easier
to communicate with an application.
• API (Application Programming Interface)
➢ Documented set of commands, data names, etc., that lets one
software application communicate with another.
➢ HTML5 includes APIs for task that traditionally required proprietary
plug-ins or custom programming.
➢ Some APIs have a markup component, such as embedding
multimedia with the new HTML5 video and audio elements
➢ HTML5 includes specifications for these APIs:
1. Media Player API
2. Session History API
3. Offline Web Application API
4. Editing API
5. Drag and Drop API

6. Canvas API
7. Web Storage API
8. Geolocation API
9. Web Workers API
10. Web Sockets API
8

Video and Audio
15 WWW, MIDI files could be added to a web page for sound
• Early
1 came RealMedia and Microsoft Media which allowed audio and
• Next
video formats to be embedded in a web page
• Flash became the de facto embedded multimedia player
• Good news
➢ Audio and video elements are well supported in modern browsers
• How media formats work
➢ When preparing audio or video content for web delivery, there

are two format decisions to make:
1. Encoded – The algorithms used to convert the source to 1s and 0s and
how they are compressed.

▪ Codec – method used for encoding
2. Container format for the media (video → mp4, audio → mp3)

▪ Continuer is like ZIP file that holds the media.
▪ Container format can hold more than one codec type

9

Video and Audio
15
➢ Video
formats
❖ 2Ogg container + Theora video codec + Vorbis audio codec – called
“Ogg Theora” and should have the .ogv suffix
❖ MPEG-4 container + H.264 video codec + AAC audio codec – referred
to as “MPEG-4” and should have the .mp4 or .m4v suffix
❖ WebM container + VP8 video codec + Vorbis audio codec – “WebM” is
the newest container format and used the .webm file extension

➢ Audio formats
❖ MP3 – is both a codec and container in one with the file extension .mp3
▪
▪
▪

Ubiquitous as a music download format
MP3 is short for MPEG-1 Audio Layer 3
Format is patented and requires license fees paid by hardware and
software companies

❖ WAV – .wav is also a codec and container in one
❖ Ogg container + Vorbis audio codec – Referred to as “Ogg Vorbis” with
the .ogg or .oga file extension
❖ MPEG 4 container + AAC audio codec – “MPEG4 audio” with the .m4a
extension
❖ WebM container + Vorbis audio codec – The WebM (.webm) format can
also contain only audio.

10

Video and Audio
15
• Adding
a video to a page
3

➢ width and height specifies the size of the box the embedded media
player takes up on the screen.
➢ poster provides the location of a still image to use in place of the
video before it plays.
➢ controls prompts the browser to display its built-in media controls
➢ autoplay makes the video start playing automatically once it has
downloaded enough of the media file to play through without stopping.
11

Video and Audio
15 video (and audio) element can use the:
➢ The
4
➢ Loop attribute to make the video play again once it has
finished (ad infinitum)
➢ Muted for playing the video track without the audio
➢ Mediagroup for making a video element part of a group of
related media elements (such as a video and a synced sign
language translation).
➢ Preload for suggesting to the browser whether the video
data should be fetched as soon as the page loads
(preload=”auto”) or wait until the user presses the play
button (preload=”none”).
❖ Setting preload=”metadata” loads information about the
media file, but not the media itself.

12

Video and Audio
15
• Adding
audio to a page:
➢ 5Audio element uses the same attributes as the video element except
for width, height, and poster
➢ Can provide a stack of audio format options using the source element

13

Canvas
15
• Canvas
6
➢ Creates
an area on a web page that you can draw on using a set of

JavaScript functions for creating lines, shapes, fills, text, animations
➢ Is dynamic and can draw things on the fly and respond to user input
➢ Is supported by every current browser except for Internet Explorer 8
and earlier.
➢ The markup just clears a space on which the drawing will happen.

• The canvas element
➢ Add a canvas space to the page with the canvas element and specify
the dimensions with the width and height attributes.

• Drawing with JavaScript
➢ Canvas API includes functions for creating basic shapes for drawing a
rectangular outline and moving things around, plus attributes for styles
➢ Example:
14

Learning Web Design
Chapter 11
Cascading Style Sheets Orientation

The Benefits of CSS
• Cascading Style Sheets (CSS) is the W3C standard for defining the
presentation of documents written in HTML.
• Presentation refers to the way the document is displayed or delivered

to the user.
• CSS is a separate language with its own syntax
• Benefits of using style sheets
1. Precise type and layout controls
2. Less work
❖ Can change the appearance of an entire site by editing one style sheet
3. More accessible sites
❖ Can mark up your content meaningfully, making it accessible for nonvisual or mobile devices.
4. Reliable browser support
❖ Every browser in current use supports CSS Level 2 and many parts of
CSS Level 3.

See slide note example.

The Benefits of CSS
• Power of CSS:
1. Robust and powerful design tool
❖ See below figure
2. Do not include a single img element
❖ All of the images are used as backgrounds
3. Proof of power in keeping CSS separate from HTML, and presentation
separate from structure.

How Style Sheets Work
• It’s as easy as 1-2-3!
1. Marking up the document
❖Start with a document that has been marked up in HTML
2. Writing the rules
❖Write style rules for how you’d like certain elements to look

3. Attaching the styles to the document
• When the browser displays the document, it follows your rules

for rendering elements

How Style Sheets Work
1. Marking up the document
➢ Choose elements that accurately describe the meaning of the content
➢ HTML creates structure layer.
➢ CCS creates presentation layer.

2. Writing the rules
➢ Rules or rule sets – style sheets that are made up of one or more

style instructions.
➢ First step in learning CSS is to get familiar with the parts of a rule
➢ Each rule selects an element and declares how it should look.
➢ The following example contains two rules. The first makes all the h1
elements in the document green; the second specifies that the p
should be in a small, sans-serif font.

How Style Sheets Work
➢ In CSS terminology, the two main sections of a rule are:
❖ Selector – identifies the element or elements to be affected
▪ Element type selector – most basic type of selector
▪ Properties defined for each rule will apply to every element in the
document
❖ Declaration – provides the rendering instructions
▪ Made up of two parts:
❑ Property – e.g., color
❑ Value – e.g., the actual color such as green
▪ Can be more than one declaration in a rule
▪ One or more declarations are placed inside curly brackets
▪ Each declaration must end in a semicolon.
▪ Values are dependent on the property.
OR

How Style Sheets Work
3. Attaching the styles to the document
➢ External style sheets
❖ An external style sheet is a separate, text-only document that contains a
number of style rules.
❖ It must be named with the .css suffix. (covered in ch13)

➢ Embedded style sheets
❖ It is placed in a document using the style element, and its rules apply

only to that document.
❖ The style element better be placed in the head of the document

➢ Inline styles
❖ Apply properties and values to a single element using the style attribute
in the element itself

multiple properties

The Big Concepts
• Inheritance
➢ Are your eyes the same color as your parents’? Did you inherit their hair color?
➢ Styled HTML elements pass down certain style properties to the elements they

contain.

See slide note example

The Big Concepts
• Parents and Children
➢ HTML documents have an implicit structure or hierarchy.
➢ Document tree becomes a family tree when it comes to referring to the
relationship between elements.
➢ An element that is directly contained within another element is said to be a
child of that element
➢ Conversely, the containing element is the parent
➢ All of the elements higher than a particular element in the hierarch are its
ancestors
❖ Two elements with the same parent are siblings

The Big Concepts
• Pass it On
➢ When you write a font-related style rule using the p element as a selector,
the rule applies to all of the paragraphs in the document as well as the inline
text elements they contain.
➢ Note that the img element is excluded because font-related properties do
not apply to images.
➢ In general, properties related to the styling of text—font size, color, style,
etc.—are passed down.
➢ Properties such as borders, margins, backgrounds, and so on that affect the
boxed area around the element tend not to be passed down
➢ Any property applied to a specific element will override the inherited values
for that property.

See slide note example

The Big Concepts
• Conflicting styles: the cascade
➢ CSS allows you to apply several style sheets to the same document
➢ Cascade refers to what happens when several sources of style

information compete for control of the elements on a page
➢ Style information is passed down (“cascades” down) until it is
overridden by a style command with more weight.
➢ For example:
1. If you don’t apply any style information to a web page, it will be rendered
according to the browser’s internal style sheet (called user agent style
sheet).
2. If Individual users (called user style sheet) can apply their own styles as
well, it overrides the default styles in their browser.
3. If the author of the web page has attached a style sheet (external) (called
author style sheet), it overrides both the user and the user agent styles.

See slide note example

The Big Concepts
• Specificity
➢ Cascades continues at the rule level.
➢ When two rules in a single style sheet conflict, they type of selector is
used to determine the winner.

• Rule order
➢ If there are conflicts within
style rules of identical
weight, whichever one
comes last in the list “wins”

See slide note example

The Big Concepts
• The box model
➢ The box model called cornerstone of the CSS visual formatting system
➢ Browsers see every element on the page as being contained in a little

rectangular box
❖ Can apply properties such as borders, margins, padding, and backgrounds
to these boxes, and even reposition on the page

See slide note example

The Big Concepts
• Grouped selectors
➢ Used to apply the same style property to a number of elements
❖ Can group the selectors into one rule by separating them with commas
❖ The one rule has the same effect as the five rules listed previously
❖ Grouping them makes future edits more efficient and results in a smaller
file size
See slide note example

Learning Web Design
Chapter 12

Formatting Text

The Font Properties
• By the end of this chapter, you’ll pick up 15 new CSS properties used to
manipulate the appearance of text.
• In CSS, fonts are specified using a bundle of font-related properties for
typeface (font-family), size, weight, and font style
• Font-related properties:
1. font-family
2. font-size
3. font-weight
4. font-style
5. font-variant
6. font

The Font Properties
• Font family
❖ named a typeface also.
❖ Specifies a font or list of fonts (font stack)
❖ Important syntax requirements
• All font names, with the exception of generic font families, must be capitalized.
• For example, use “Arial” instead of “arial”.
▪ Use commas to separate multiple font names, as shown in the second and
third examples.
▪ Notice that font names that contain a character space must appear within

quotation marks
▪ If the first specified font is not found, the browser tries the next one, and down
through the list until it finds one that works.

❖ Font limitations
▪ Browsers are limited to displaying fonts they have access

The Font Properties
• Font family
❖ Generic font families
▪ “sans-serif” is just one of five generic font families that you can specify with
the font-family property
▪ Generic font families:
▪ serif
▪ sans-serif
▪ monospace
▪ cursive
▪ fantasy

See slide note example

The Font Properties
• Font family
❖ Font stack strategies
▪ A good font stack should include stylistically related fonts that are known
to be installed on most computers.
▪ Sticking with fonts that come with the Windows, Mac OS, and Linux
operating systems as well as fonts that get installed with popular software
packages such as Microsoft Office and Adobe Creative Suite gives you a
solid list of “web-safe” fonts to choose from.

The Font Properties
• Specifying font size
em a unit of
➢ Use font-size property to specify the size of the text.
measurement
❖ Specify text size using one of the CSS length units. equal to the
current font size

➢ When specifying a number of units, be sure the unit abbreviation
immediately follows the number, with no extra character space in
between.

➢ Use one of the absolute keywords (xx-small, x-small, small, medium,
large, x-large, xx-large)

➢ Use a relative keyword (larger or smaller) to push the text larger or
smaller than the surrounding text:

The Font Properties
• Specifying font size
➢ Percentage values

➢ em measurements

➢ Pixels and absolute measurements

➢ em best practice
❖ Most popular solution for making em display consistently is to set the size of
the body element to 100% (keeping it at the default or user’s preference),
then use em to size the text elements thereafter

See slide note example

The Font Properties
• Font weight (boldness)
➢ Use text element for font to appear in bold – font-weight property to
adjust the boldness of type
➢ font-weight property has many predefined values, including descriptive
terms (normal, bold, bolder, and lighter) and nine numeric values (100
to 900) for targeting various weights of a font if they are available

• Font style (italic)
➢ The font-style property affects the posture (‫ )وضعية الجسد‬of the text—
that is, whether the letter shapes are vertical (normal) or slanted (italic
and oblique)

Italic )‫كل حرف له ميالنه (ميالن‬
Oblique: )‫كل االحرف بنفس الميالن (انحراف‬

The Font Properties
• Font variant (small caps)
➢ Some typefaces come in a “small caps” variant
❖ This is a separate font design that uses small uppercase-style letters in
place of lowercase letter designs.
❖ The one-trick-pony font-variant property is intended to allow designers to
specify such a small-caps font for text elements

• Shortcut font property
➢ Specifying multiple font properties for each text element can get
repetitive and lengthy, so the creators of CSS provided the shorthand
font property that compiles all the font-related properties into one rule
➢ At minimum, the font property must include a font-size value and a fontfamily value, in that order.

Changing Text Color
• The value of the color property can be a predefined color name or a
numeric value describing a specific RGB color
• Color is inherited, so you can change the color of all the text in a
document by applying the color property to the body element
• CSS2.1 defines 17 standard color names
➢ Black, white, purple, lime, navy, aqua, silver, maroon, fuchsia, olive, blue,
orange, gravy, red, green, yellow, teal

• Color property is used to change the foreground

A Few More Selector Types
• Descendant selectors (Contextual selector)
➢ Targets elements that are contained within (and therefore are
descendants of) another element
➢ It selects the element based on its context or relation to another
element.

Figure 12-11. Only em elements within
li elements are selected. The other em
elements are unaffected.

➢ Another types of Contextual selector
➢ Child selector – targets only the direct children of a given element
➢ Adjacent sibling selector – targets an element that comes directly after
another element with the same parent.
➢ General sibling selectors – targets an element that shares a parent
with the specified element and occurs after it in the source order

A Few More Selector Types
• ID selector
➢ ID selectors allow you to target elements by their id values
➢ The symbol that identifies ID selectors is the octothorpe (#), also
known as a hash symbol
Here is an example of a list item
with an id reference.

• Class Selectors
➢ Unlike the id attribute, multiple elements may share a class name
➢ Class selector – can target elements belonging to the same class with
a class selector
➢ To apply a property to all elements of the same class, omit the element
name in the selector (be sure to leave the period)
Select all paragraphs with class=”special”
Select all elements with class=”special”

See slide note example

A Few More Selector Types
• Universal Selector

A Few More Selector Types
• Specificity
➢ Refers to the fact that more specific selectors have more weight when
it comes to handling style rule conflicts.
➢ The actual system CSS uses for calculating selector specificity is quite
complicated.
➢ List of selector types for most to least specific:
1. ID selectors are more specific than (and will override)
2. Class selectors, which are more specific than (and will override)
3. Contextual selectors, which are more specific than (and will
override)
4. Individual element selectors
➢ For example, if a style sheet has two conflicting rules for the strong
element, the contextual selector (h1 strong) is more specific and therefore
has more weight than the individual element selector (strong).
Contextual selectors (winner)
Individual element selectors

See slide note example

Text Line Adjustments
• Line height
➢ Defines the minimum distance from baseline to baseline in text
➢ Used to specify a “minimum” distance because if you put a tall image or large
characters on a line, the height of that line will expand to accommodate it

➢ Baseline

baseline
baseline

• Indents
➢ Indents the first line of text by a specified
amount
➢ Can specify a length measurement or a
percentage value
➢ Percentage values are calculated based on
the width of the parent element
➢ Inherits, but it is worth noting that the
calculated values are passed on to
descendant elements

Line height

❖ The imaginary line upon which the bottoms of characters sit.

Text Line Adjustments
• Horizontal alignment
➢ Can align text for web pages just as you would in a word processing or
desktop publishing program
➢ A fairly straightforward property to use

Underlines and Other “Decorations”
• The most popular use of the text-decoration property is turning off the
underlines that appear automatically under linked text
• A few cautions for using text-decoration:
➢ Get rid of the underlines under links, be sure there are other cues to
compensate, such as color and weight
➢ On the flip side, because underlines are such a strong visual cue to “click
here,” underlining text that is not a link may be misleading and frustrating
➢ Finally, there is no reason to make the text blink

obsolete

Changing Capitalization
• When you apply the text-transform property to a text element, it
changes its capitalization when it renders without changing the way it is
typed in the source

Spaced Out
• Add space between the letters of the text or words in a line
➢ Letter-spacing
➢ Word-spacing

• When specifying em measurement, the calculate size is passed down to
child elements, even if they have a smaller font size than the parent.

Text Shadow
• Way to add a drop shadow to text using CSS alone
• Value for the text-shadow property is up to three measurements and a
color
1. Horizontal offset:
➢ Positive: position the shadow to the right of the text
➢ Negative: position the shadow to the left of the text

2. Vertical offset
➢ Positive: position the shadow to the down of the text
➢ Negative: position the shadow to the up of the text

3. Optional blue radius
➢ Color of the shadow

See slide note example

Changing List Bullets and Numbers
• As you know, browsers automatically insert bullets before unordered list
items and numbers before items in ordered lists.
• Choosing a Marker
➢ List-style-type property
❖ Used to select the type of marker that appears before each list item
❖ Used with its value set to none to remove bullets or numbers together
❖ disc, circle, and square values generate bullet shapes

Figure 12-23. The list-style-type values disc, circle, and square.

See slide note example

Changing List Bullets and Numbers
• Make bullets
➢ List-style-image property
❖ Use your own image as a bullet
❖ The value of the list-style-image property is the URL of the image you want
to use as a marker
❖ The list-style-type is set to disc as a backup in case the image does not
display or the property isn’t supported by the browser or other user agent

See slide note example

Learning Web Design
Chapter 13:

Colors and Backgrounds

Specifying Color Values
• Two main ways to specify color in style sheets:
1. Color name
❖ Most intuitive way to specify color.
❖ Has to be one of the color keywords predefined in the CSS
Recommendation
❖ CSS1 and CSS2 adopted the 16 standard color names originally
introduced in HTML 4.01
❖ The extended color names, also known as the X11 color names,
were originally provided with the X Window System for Unix

Specifying Color Values
• Two main ways to specify color in style sheets:
2. Numeric value (RGB color values)
❖ Most common way to specify color is by the RGB value.
❖ RGB Model
▪ Computers create the colors you see on a monitor by combining three
colors of light: Red, Green, and Blue.
▪ Any color seen on your monitor can be described by a series of three
numbers: a Red value, a Green value, and a Blue value

❖ Picking a color
▪ Easiest way to pick a color and find its RGB color values is to use an
image-editing tool

❖ Two ways to define color on monitors
▪ RGB
▪ HSL (Hue, Saturation, Lightness)

Specifying Color Values
• CSS allows RGB color values to be specified in a number of formats:
1. Scale from 0 to 255
2. Percentage values
3. Six-digit or three-digit hexadecimal equivalents

Specifying Color Values
• RGBa color
❖ RGBa color allows you to specify a color and also make it as transparent
or as opaque as you like.
❖ The “a” in RGBa stands for alpha, which is an additional channel that
controls the level …
Purchase answer to see full
attachment