C779 - Web Development Fundamentals
C779 - Web Development
Fundamentals
Web Development Fundamentals - 70% of assessment
Cascading Style Sheets (CSS3) and Graphical Elements
● Cascading Style Sheets (CSS) is a st yle sheet lang uag e used for describing t he present at ion of
a document writ t en in a markup lang uag e such as HT ML.
● CSS3 is t he current version.
● A CSS rule consist s of a select or and a declarat ion block.
○ Select ors - point s t o t he HT ML element you want t o st yle.
○ Declarat ion - cont ains a CSS propert y name and a value, separat ed by a colon.
● CSS also allows you t o g roup select ors, which minimizes t he st yling done t o t he sheet and can
make sit e maint enance easier. We can do t his by using a comma t o separat e select ors. T hink of t he
commas as “and” - h1 and h2 and h3.
C779 - Web Development Fundamentals
h1, h2, h3 {color: red;}
● T here are t hree ways of insert ing a st yle sheet :
○ External CSS - E xt ernal st yles are de ned wit hin t he <link> element , inside t he <head>
sect ion of an HT ML pag e:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
○ Internal CSS - An int ernal st yle sheet may be used if one sing le HT ML pag e has a unique
st yle. T he int ernal st yle is de
ned inside t he <st yle> element , inside t he head section.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
○ Inline CSS - An inline st yle may be used t o apply a unique st yle for a sing le element . T o use
inline st yles, add t he st yle at t ribut e t o t he relevant element . T he st yle at t ribut e can cont ain
any CSS propert y.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
How are t ag select ors and class select ors di
erent in purpose?
● If t here are t wo or more CSS rules t hat point t o t he same element , t he select or wit h t he
hig hest
speci city value will "win", and it s st yle declarat ion will be applied t o t hat HT ML
element .
● T he !important rule in CSS is used t o add more import ance t o a propert y/value t han
normal. In fact , if you use t he
!important rule, it will override ALL previous st yling rules for
C779●- Web Devcascade
elopment Fundamentals
t hat speci
c propert y on t hat element .
Stylesheet s
— at a very simple level, t his means t hat t he order of CSS rules
mat t ers; when t wo rules apply t hat have equal speci
cit y, t he one t hat comes last in t he CSS
is t he one t hat will be used.
● Inheritance - some CSS propert y values set on parent element s are inherit ed by t heir
child element s, and some aren't .
● CSS comments are not displayed in t he browser, but t hey can help document your
source code.
/* This is a single-line comment */
p {
color: red;
}
● Sass is a st ylesheet lang uag e t hat ’s compiled t o CSS. It allows you t o use variables, nest ed
rules, mixins, funct ions, and more, all wit h a fully CSS- compat ible synt ax.
Sass helps keep
larg e st ylesheet s well- org anized and makes it easy t o share desig n wit hin and across
project s.
Ident ify 3 common imag e
GIF, JPEG, PNG
le format s used for Web.
GIF87a is t he orig inal format for indexed color imag es. It uses LZW compression and has t he opt ion
of being int erlaced. GIF89a is t he same, but also includes t ransparency and animat ion capabilit ies.
<img src="url" alt="alternatetext">
oat property can have one of t he following values:
left - T he element oat s t o t he left of it s cont ainer
right - T he element oat s t o t he rig ht of it s cont ainer
none - T he element does not oat (will be displayed just where it occurs in t he t ext ). T his is default
inherit - T he element inherit s t he oat value of it s parent
T he
Always specify t he
pag e mig ht
width and height of an imag e. If widt h and heig ht are not speci ed, t he web
icker while t he imag e loads.
● T he required alt attribute provides an alt ernat e t ext for an imag e, if t he user for some
reason cannot view it (because of slow connect ion, an error in t he src at t ribut e, or if t he user
uses a screen reader).
● Responsive web design is about creat ing web pag es t hat look g ood on all devices. A
responsive web desig n will aut omat ically adjust for di
erent screen sizes and viewport s.
● Interlacing is a t echnique t hat allows an imag e t o prog ressively display in a browser as it
downloads. T he imag e will appear in st ag es over t he period of downloading t ime. T his act ion
makes your pag es more accessible t o users wit h slower Int ernet connect ions. T his was
import ant during t he days of dial- up, but not widely seen wit h t oday’s broadband Int ernet
connections.
● An imag e t hat support s transparency provides t he visual e ect of blending int o t he
backg round of your Webpag e. When used, t he pag e backg round simply shows t hroug h t he
t ransparent part of t he imag e
le. Most developers use imag e t ransparency t o remove t he
blank imag e backg round, so it appears t o
oat on t he pag e. However, you can make any
element of an imag e t ransparent , not just it s backg round.
● A hexadecimal color is speci ed wit h: #RRGGBB.
C779 - Web Development Fundamentals
● RR (red), GG (g reen) and BB (blue) are hexadecimal int eg ers bet ween 00 and FF specifying
t he int ensit y of t he color.
● For example, #0000FF is displayed as blue, because t he blue component is set t o it s
hig hest value (FF) and t he ot hers are set t o 00.
Color
Hex Code
Black
#000000
Whit e
#FFFFFF
Red
#FF0000
Blue
#0000FF
Green
#008000
Links can be st yled di
T he four
erent ly depending on what st at e t hey are in.
links states are:
a:link - a normal, unvisit ed link
a:visit ed - a link t he user has visit ed
a:hover - a link when t he user mouses over it
a:act ive - a link t he moment it is clicked
headers , menus , content and a footer.
header is usually locat ed at t he t op of t he websit e (or rig ht below a t op navig at ion menu). It
A websit e is oft en divided int o
A
oft en cont ains a log o or t he websit e name.
A
navigation bar cont ains a list of links t o help visit ors navig at e t hroug h your websit e.
footer is placed at t he bot t om of your pag e. It oft en cont ains informat ion like copyrig ht and
T he
cont act info.
Nav, header, main, and foot er t ag s are
semantic because t hey are used t o represent di erent
sect ions on an HT ML pag e. T hese are more descript ive t han div t ag s which make part it ioning web
pag es int o t ang ible sect ions di
cult .
An element wit h posit ion:
static; is not posit ioned in any special way; it is always posit ioned
according t o t he normal
ow of t he pag e.
An element wit h posit ion:
relative; is posit ioned relat ive t o it s normal posit ion.
An element wit h posit ion:
xed; is posit ioned relat ive t o t he viewport , which means it always st ays in
t he same place even if t he pag e is scrolled. T he t op, rig ht , bot t om, and left propert ies are used t o
posit ion t he element .
A
xed element does not leave a g ap in t he pag e where it would normally have been locat ed.
An element wit h posit ion:
sticky; is posit ioned based on t he user's scroll posit ion.
erent colors, a list of 216 "Web
Safe Colors" was sug g est ed as a Web st andard (reserving 40 xed syst em colors). T his is not as
Many years ag o, when comput ers support ed a maximum 256 di
import ant now, since most comput ers can display millions of di
T his
erent colors.
216 hex values cross- browser color palet t e was creat ed t o ensure t hat all comput ers would
display t he colors correct ly when running a 256 color palet t e:
C779 - Web Development Fundamentals
T he font - family propert y should hold several font names as a "
fallback" syst em, t o ensure
maximum compat ibilit y bet ween browsers/operat ing syst ems. Start wit h t he font you want , and
end wit h a g eneric family (t o let t he browser pick a similar font in t he g eneric family, if no ot her
font s are available). T he font names should be separat ed wit h commas.
.p1 {
font-family: "Times New Roman", Times, serif;
}
In CSS, t he t erm
"box model" is used when t alking about desig n and layout .
Padding is used t o creat e space around an element 's cont ent , inside of any de ned borders.
Margins are used t o creat e space around element s, out side of any de ned borders.
T he
position propert y speci es t he t ype of posit ioning met hod used for an element (st at ic,
relat ive,
xed, absolut e or st icky).
Margins are used t o creat e space around element s, out side of any de ned borders.
If t he
margin propert y has four values (g oes clockwise):
marg in: 2% 3% 4% 5% ;
t op marg in is 2%
rig ht marg in is 3%
bot t om marg in is 4%
left marg in is 5%
Integrating HTML, CSS3, and Media
● HT ML was creat ed t o describe t he cont ent of a web pag e.
T he HT ML
<img> tag is used t o embed an imag e in a web pag e.
<img src="url" alt="alternatetext">
<img> t ag has t wo required at t ribut es:
src - Speci es t he pat h t o t he imag e
alt - Speci es an alt ernat e t ext for t he imag e
T he
● T he HT ML <video> element is used t o show a video on a web pag e. T he MP4, WebM, and Og g
format s are support ed by HT ML.
● T he controls attribute adds video cont rols, like play, pause, and volume.
● T he poster attribute speci es an imag e t o be shown while t he video is downloading , or unt il
t he user hit s t he play but t on. If t his is not included, t he
rst frame of t he video will be used inst ead.
● T he <source> element allows you t o specify alt ernat ive video
choose from. T he browser will use t he
les which t he browser may
rst recog nized format .
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
● T he HT ML <audio> element is used t o play an audio
aut omat ically, use t he
le on a web pag e. T o st art an audio
le
autoplay at t ribut e. T he MP3, OGG, and WAV format s are support ed by
C779 - Web Development Fundamentals
HT ML. Modern major browsers support t hese
le format s, except Safari. Safari does not support
Og g .
● T he <iframe> t ag speci es an inline frame. An inline frame is used t o embed anot her document
wit hin t he current HT ML document .
● Vector — g raphics t hat use mat hemat ical coordinat es wit h lines, curves, and shapes t o creat e
imag es and specify colors. Vect or g raphics can be creat ed using various soft ware t ools, such as
Adobe Illust rat or. Vector g raphics are g enerally small in
le size.
Vector graphics are scalable,
which means t hey keep t heir imag e qualit y when enlarg ed or shrunk.
● Bitmap — g raphics t hat use small dot s (usually t housands) t o creat e imag es and specify colors.
E ach dot is mapped t o bit s st ored in a comput er's memory. Bit maps are also called rast er
g raphics, and t hey include t he JPE G, GIF and PNG format s. Dig it ized phot og raphs are t he most
common t ype of bit map seen on t he Web. Bit map imag es can be creat ed using soft ware t ools such
as Microsoft Paint . Making bit map imag es more det ailed can creat e larg e
and compressing
les will decrease
le sizes. Removing pixels
le size but will also reduce imag e qualit y.
● An imag e t hat support s transparency provides t he visual e ect of blending int o t he backg round
of your Webpag e. When used, t he pag e backg round simply shows t hroug h t he t ransparent part of
t he imag e
le. Most developers use imag e t ransparency t o remove t he blank imag e backg round, so
it appears t o
oat on t he pag e. However, you can make any element of an imag e t ransparent , not
just it s backg round.
● Know and underst and how t o use t he CSS opacit y propert y.
● Which CSS opacit y value is more t ransparent : 0.3 or 0.75?
● Interlacing is a t echnique t hat allows an imag e t o prog ressively display in a browser as it
downloads. T he imag e will appear in st ag es over t he period of downloading t ime. T his action makes
your pag es more accessible t o users wit h slower Int ernet connect ions. T his was import ant during
t he days of dial- up, but not widely seen wit h t oday’s broadband Int ernet connect ions.
● T he
rst pass will render roug hly 13 percent of t he ent ire imag e. T he second pass delivers 25
percent , and t hen cont inues in 25- percent increment s unt il t he imag e renders complet ely. During
t his process, t he full imag e will at
rst appear fuzzy, but will cont inuously sharpen.
● T he only Web- ready imag e
le format s t hat
support interlacing are GIF and PNG
● T he only Web- ready imag e
le format s t hat
support animation are GIF, PNG and MNG.
● When you desig n an image, each individual component of t he imag e can be creat ed on it s own
layer, t hus allowing t hat component t o be manipulat ed independent ly of t he ent ire imag e. A series
of layers will compose an ent ire imag e, and an imag e can have as many layers as necessary.
However, alt houg h layers are support ed in t he PNG
le format , t hey are not support ed by GIF or
JPG format s.
● Scalable Vector Graphics (SVG) is a W3C- recommended lang uag e developed by various
vendors, including Adobe, Microsoft and Sun. SVG uses XML t o describe g raphics and g raphical
applicat ions. SVG allows you t o creat e cross- plat form animat ed movies. Not all SVG imag es are
animat ed, but t his applicat ion is common because SVG o
ers comprehensive animat ion support .
Unlike Flash, SVG is an open st andard. However, it provides similar feat ures in addit ion t o animat ion
● An image map is an imag e t hat includes hyperlinks wit hin speci c areas of t he imag e. T hese
linked areas, or hot spot s, are de
ned by a set of coordinat es.
● T he following t ag s are used t o creat e a hotspot : <img >, <map>, and <area>.
● Possible hot spot shapes include:
○ rect : used t o creat e a rect ang ular area
C
○ circle: used t o creat e a circular area
e a polyg
779○-poly: used tvo creat
lopm
nt onal
un area
m nt
○ default : used t o de ne t he ent ire area
Web De e
e F da e als
● T he HT ML <canvas> element is used t o draw g raphics, on t he
y, via JavaScript .
Markup and HTML5 Coding
● A markup language is a set of rules g overning what markup informat ion may be included in a
document and how it is combined wit h t he cont ent of t he document in a way t o facilit at e use by
humans and comput er prog rams.
● HTML is t he markup lang uag e t hat de nes pag e st ruct ure, hyperlinks, g raphics and more t o
enable pag es t o render in Web browsers and ot her devices.
● HTML 5.2 is t he lat est version.
● T he HTML 4.01 Recommendat ion (released in 1999) cont ained many improvement s from HT ML
3.2, most not ably Cascading Style Sheet s (CSS). Y ou can access t his st andard at
www.w3.org /T R/ht ml4/. T he 4.01 speci
cat ion included minor modi
● Cascading Style Sheets (CSS) are rules in an ext ernal t ext
cat ions t o t he 4.0 speci
cat ion.
le t hat det ermine how t o display
HT ML element s in your Webpag es. CSS3 cont ains format t ing inst ruct ions t hat can de
ne t he font ,
color and phrase element s used on a part icular markup pag e.
● It is possible t o validat e all markup code aut omat ically. Many validators exist , but t he most
aut horit at ive is t he
W3C Markup Validation Service (ht t ps://validat or.w3.org /).
● Javascript is a script ing lang uag e t hat provides dynamic, int eract ive capabilit ies t o Web Pag es.
● T he web development trifecta includes HT ML, CSS, and Javascript .
● Ident ify t he following prot ocols: HT T P, HT T PS, T CP/IP, FT P, and SMT P.
●
● Describe a t ext edit or. Name t hree examples.
● Describe a GUI edit or. Name t hree examples.
● What are t he main di erences bet ween a t ext edit or and GUI edit or?
● A URL is anot her word for a web address. A URL can be composed of words (e.g . w3schools.com),
or an Int ernet Prot ocol (IP) address (e.g . 192.68.20.50).
● Extensible Markup Language (XML) is a lang uag e used t o describe dat a element s on a
Webpag e. XML enhances t he st ruct ure and navig at ion of dat a. It is not used t o format t he pag e's
appearance. Businesses use XML because it allows dat a t o be int erchang ed wit h all t ypes of
applicat ions.
● What is t he di erence bet ween HT ML and XML?
● What is t he di erence bet ween t he World Wide Web (WWW) and t he Int ernet ?
● What is t he W3C?
● Underst and t he basic synt ax of an HT ML element .
● Code it . Know how t o add an at t ribut e and value t o a t ag .
● Know and ident ify t ypes of cont ainer t ag s.
● Know and ident ify t ypes of empt y t ag s.
● Know and underst and t he di erence bet ween a cont ainer t ag and empt y t ag .
● Give t hree examples of a cont ainer t ag and t hree examples of an empt y t ag .
● Code it . Creat e a basic webpag e wit h t he following element s:
● DOCT Y PE
● ht ml
● head
● t it le
● met a
● body
● E xamine t he following HT ML t ag . What is t he t ag ? What is t he at t ribut e? What is t he value?
● <met a charset =”ut f- 8”>
● Ident ify t hree at t ribut es used wit hin a met a t ag .
● Ident ify and describe a websit e le st ructure.
● Know t he di erence bet ween block- level element s and inline/t ext - level element s.
● Ident ify a block element .
● Ident ify an inline element .
● Know
hemat icnt
break
779 how
- t o insertva tlopm
un<hr>,mformerly
nt lsknown as a horizont al rule.
● What is t he <br> t ag ?
C
Web De e
T here are t hree t ypes of
e F da e a
lists you can creat e wit h HT ML:
● Unordered List - An unordered list beg ins wit h t he <ul> t ag . E ach list it em st art s wit h t he <li>
t ag . By default , t he list it ems are marked by bullet point s.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
● Ordered List - An ordered list beg ins wit h t he <ol> t ag . E ach list it em st art s wit h t he <li> t ag . By
default , t he list it ems are marked numerically.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
● A description list is a list of t erms, wit h a descript ion of each t erm. T he <dl> t ag de nes t he
descript ion list , t he <dt > t ag de
nes t he t erm (name), and t he <dd> t ag describes each t erm.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Heading elements st art at t he larg er t ext (h1) t o smallest t ext (h6). By default , t he h4 heading element is
t he same size as t he default t ext .
● Nesting is t he process of adding a pair of t ag s wit hin anot her pair of t ag s
● What element s are nest ed wit hin a head element ?
● What is a relat ive or local link?
● What is an absolut e link?
● What is an ext ernal hyperlink?
● What is an int ernal link (also known as a bookmark)?
Link rot is t he phenomenon of hyperlinks t ending over t ime t o cease t o point t o t heir orig inally t arg et ed
le, web pag e, or server due t o t hat resource being relocat ed t o a new address or becoming permanent ly
unavailable.
● Can you creat e a link t o wg u.edu t hat opens in a new t ab?
● What is t he purpose of a div element ?
● Specify how and when t o use a span element .
● Ident ify t he purpose of t he t able element .
● Ident ify t he purpose of t he t r element .
● Ident ify t he purpose of t he t h element .
● Ident ify t he purpose of t he t d element .
● Ident ify t he purpose of t he capt ion element .
● Code it . Creat e a t able wit h t hree columns and t hree rows.
● Ident ify t he purpose of t he colspan at t ribut e.
● Ident
t he rowspan
at t ribut
779ify- t he purposev oflopm
nt un
me. nt ls
● Code it . Pract ice coding a t able wit h t he colspan and rowspan.
● Ident ify ve common CSS propert ies used t o st yle t ables and describe how each format a t able.
● When should a t able be used?
● When should we NOT use a t able?
● Ident ify 5 semant ic HT ML element s and t heir purpose.
● What is t he di erence bet ween head, header, and heading element s?
● Know how t o add HT ML E nt it ies t o a webpag e.
● Underst and websit e le st ruct ure/ le pat h.
● Ident ify t he st eps in t he Web Development Project Cycle and describe each.
● Know and ident ify a wireframe.
● Ident ify t he t ype of input provided by st akeholders.
● Know and ident ify a sit emap.
● Underst and t he t asks performed during websit e maint enance/manag ement .
C
Web De e
e F da e a
The Americans with Disabilities Act (ADA) was sig ned int o law on July 26, 1990, by President Georg e
H.W. Bush. T he ADA is one of America's most comprehensive pieces of civil rig ht s leg islat ion t hat prohibit s
discriminat ion and g uarant ees t hat people wit h disabilit ies have t he same opport unit ies as everyone else
t o part icipat e in t he mainst ream of American life.
Section 508 of the Rehabilitation Act requires federal ag encies t o develop, procure, maint ain and use
informat ion and communicat ions t echnolog y
t hat is accessible t o people wit h disabilit ies - reg ardless of
whet her or not t hey work for t he federal g overnment .
Accessibility Principles
Perceivable information and user interface
● T ext alt ernat ives for non- t ext cont ent
● Capt ions and ot her alt ernat ives for mult imedia
● Cont ent can be present ed in di erent ways
● Cont ent is easier t o see and hear
Operable user interface and navigation
● Functionalit y is available from a keyboard
● Users have enoug h t ime t o read and use t he cont ent
● Cont ent does not cause seizures and physical react ions
● Users can easily navig at e, nd cont ent , and det ermine where t hey are
● Users can use di erent input modalit ies beyond keyboard
Understandable information and user interface
● T ext is readable and underst andable
● Cont ent appears and operat es in predict able ways
● Users are helped t o avoid and correct mist akes
Robust content and reliable interpretation
● Cont ent is compat ible wit h current and fut ure user t ools
The World Wide Web Consortium (W3C) develops int ernat ional st andards for t he Web: HT ML, CSS, and
many more.
The W3C Web Accessibility Initiative (WAI) develops st andards and support mat erials t o help you
underst and and implement accessibilit y.
Web Content Accessibility Guidelines (WCAG) is developed t hroug h t he W3C process in cooperat ion
wit h individuals and org anizat ions around t he world, wit h a g oal of providing a sing le shared st andard for
web cont ent accessibilit y t hat meet s t he needs of individuals, org anizat ions, and g overnment s
int ernat ionally.
The Authoring Tool Accessibility Guidelines (ATAG) document s explain how t o make t he aut horing
t ools t hemselves accessible, so t hat people wit h disabilit ies can creat e web cont ent , and help aut hors
creat e more accessible web cont ent .
C779 - Web Development Fundamentals
● Web pag es should be accessible t o all people, including t hose wit h disabilit ies.
● T he following includes some common challeng es and solut ions for accommodat ing Web users
wit h
vision impairment :
○ Text readability — Make sure t hat font s used are t he correct size.
○ Text support for images — All imag es must be described in t ext using special HT ML
code.
○ Screen-reader support — E nsure t hat all pag es and pag e element s can be rendered by
audio screen readers.
● T he following includes some common challeng es and solut ions for accommodat ing Web users
wit h
hearing impairment:
○ Alternative audio support — If you include audio cont ent on a pag e, make sure t hat a
t ext - based equivalent is readily available for hearing - impaired users.
○ Alternative speech input —If your sit e includes t he abilit y for speech input , make sure
t hat an equivalent keyboard ent ry mechanism is available.
○ Text support for audio elements — Make sure t hat any audio element s are clearly
marked wit h alt ernat ive t ext so t hat readers can obt ain t he informat ion.
● T he following includes some common challeng es and solut ions for accommodat ing Web users
wit h
cognitive impairment or equipment limitations:
○ Page content that ashes, ickers or strobes — Such cont ent may cause problems
for t hose wit h neurolog ical disorders.
○ Alternative navigation —Navig at ion aids should be provided t o help t hose wit h lower
cog nit ive skills.
○ Audio support — Audio t ranscript ions of t ext - based cont ent may help users wit h reading
disabilit ies such as dyslexia.
○ Low-resolution alternatives — Desig n Web pag es so t hat t hey do not require larg e,
expensive screen resolut ions, or provide low- resolut ion alt ernat ives.
● T he Lynx browser is a part icularly useful t ool for t est ing web sit e accessibilit y. Lynx is ent irely
t ext based and support s braille displays and screen readers, which means t hat it uses t he alt , name
and t it le at t ribut es associat ed wit h imag es and ot her non- t ext - based cont ent inst ead of displaying
t he element s t hemselves.
Web Forms
● Websit es use forms t o obt ain input from users. Y ou can creat e several t ypes of
elds in one
form t o collect various t ypes of user input . Such input can include t he user's name, address and
credit card number, for example. T he informat ion a user ent ers int o t he form is t hen submit t ed t o
a server where it is st ored and/or processed.
● Aft er a user has ent ered informat ion int o a Web form, he or she clicks t he form's Submit but t on.
Submit t ing t he form uploads or emails t he user's informat ion t o t he receiving server. Many Web
forms also provide a Reset but t on t hat clears ent ered dat a inst ead of submit t ing it , and reset s t he
form
elds t o t he default values.
● Forms are of lit t le use wit hout an applicat ion on a Web server t o process t he submit t ed
informat ion. CGI script s perform t his informat ion processing . T he following sections discuss t he
ways t hat CGI script s receive and process Web form informat ion. T he rest of t he lesson will t each
you how t o develop Web forms using HT ML.
● What element s are included wit hin a form?
● T he HT ML <form> element can cont ain one or more of t he following form element s:
○ <input >
○ <label>
○ <select >
○ <t ext area>
○ <but t on>
C
○ < eldset >
779○-<leg end> v
○ <dat alist >
○ <out put >
○ <opt ion>
○ <opt g roup>
Web De elopment Fundamentals
● One t ype of form element is t he <input> element . T he <input> element can be displayed in
several ways, depending on t he t ype at t ribut e.
●
●
● What are t he di erent t ypes of input element s?
● What is t he purpose of each input t ype? What does it look like on a webpag e?
● What is t he purpose of t he met hod and act ion form at t ribut es?
● What are t hree t ypes of but t ons used in a web form?
● T he <label> element de nes a label for several form element s. T he <label> element is useful for
screen- reader users, because t he screen- reader will read out loud t he label when t he user focuses
on t he input element .
● How do you "bind" a label t o an input element ?
● What input t ype would you use t o creat e a g roup of mut ually exclusive opt ions, such as a survey?
● What input t ype would you use t o creat e a g roup of opt ions where many could be select ed?
● T he <select> element de nes a drop- down list . T he <option> element de nes an opt ion t hat
can be select ed.
● T he <t ext area> element de nes a mult i- line input eld (a t ext area).
○ T he rows at t ribut e speci es t he visible number of lines in a t ext area.
○ T he cols at t ribut e speci es t he visible widt h of a t ext area.
● What is CGI? What is a CGI script ?
● Ident ify t he di erences bet ween server- side script ing and client - side script ing .
● Describe CAPT CHA and it s purpose.
● What are name/value pairs in a form?
● Ident ify a query st ring .
Industry Standards
● Ident ify t hree charact erist ics of a server- side lang uag e.
● Ident ify t hree ways in which server- side script s are used.
● Ident ify ve common server- side lang uag es.
● Ident ify Microsoft ’s orig inal server- side script ing solut ion.
● Ident ify a common client - side lang uag e.
● What is t he di erence bet ween an int erpret ed and a compiled lang uag e?
● Ident ify at least t wo pot ent ial problems wit h a client - side lang uag e.
● Ident ify t he t hree advant ag es of JavaScript , as not ed wit hin t he reading .
● What is DHT ML?
● What is t he DOM? How do we use it ?
● Give an example of a DOM object .
● What is an HT ML5 API?
● Ident ify t hree HT ML5 APIs.
● When working wit h o ine web applicat ions, what inst ructs t he browser t o st ore cert ain
locally t o allow t he user t o cont inue working wit hout t he connect ion?
GUI HTML Editors and Mobile Websites
● What is a t ext edit or?
● Ident it y a t ype of t ext edit or and provide t wo examples.
● Ident ify one feat ure of a t ext edit or.
● List t hree pros and t hree cons of a t ext edit or.
● What is a GUI edit or? What is anot her name for a GUI edit or?
● Ident ify t he t wo t ypes of GUI edit ors and provide t hree examples.
● List t hree pros and t hree cons of using a GUI edit or.
les
● Ident ify ve feat ures of a GUI edit or.
● What
W3C markup
779 is- t he URL forvt helopm
nt unvalidat
mion?
nt ls
● What is t he URL for t he W3C CSS validat ion?
● What is FT P? Ident ify it s use for t he web.
● Ident ify t he purpose of a t est web server.
● Ident ify six sug g est ions for opt imizing a websit e for mobile devices.
● What is t he purpose of t he viewport met a t ag ?
● What is AJAX?
● What is Web 2.0? Provide ve examples.
● What is a Web Feed?
C
Web De e
e F da e a
Website Development for Business - 30% of assessment
Developing and Maintaining a Website
T here are seven main st eps in t he
Web Development Project Cycle.
1. Informat ion Gat hering
2. Planning
3. Desig n
4. Cont ent Writ ing and Assembly
5. Coding
6. T est ing , Review, and Launch
7. Maint enance
● Ident ify t hree advant ag es and t hree disadvant ag es of t he Wat erfall Model.
● What are t he responsibilit ies of a web project manag er?
● What is t he di erence bet ween t he desig n phase and implement at ion phase?
● What is a sit emap? Be able t o ident ify or draw a sit emap.
Branding is t he creat ion of a dist inctive ident it y and place in t he market for a product or org anizat ion.
Allows consumers t o readily ident ify a product and it s purpose. T he look and feel of your Websit e is oft en
part of a market ing depart ment 's branding .
T he brand should be simple.
T he brand should be di
erent .
T he brand should be safe.
T he brand should make a promise.
T he brand should re
ect t he company’s at t ribut es.
T he brand should re
ect t he company’s personalit y.
T he brand should appeal t o t he int ended audience.
Y ou must
rst have a clearly est ablished brand before you can beg in t o creat e a compelling
Webpage.
E ectively designed pages:
● Feat ure crisp, concise t ext (limit ing t he word count t o half of what would be used in convent ional
writ ing ).
● Include one idea per parag raph
● Include search eng ine keywords in t he main port ions of t he t ext .
● Convey t he cent ral messag e using t he invert ed- pyramid writ ing st yle (i.e., t he conclusion is
present ed at t he t op of t he pag e, followed by support ing informat ion).
Three major e-commerce models that are widely implemented:
● Business-to-Consumer (B2C) - A model in which a Web- based business sells product s and/or
services t o consumers or end users.
● Business-to-Business (B2B) - A model in which a Web- based business sells product s and/or
services t o ot her businesses.
● Consumer-to-Consumer (C2C) - A model in which individual consumers sell product s or services
C779 - Web Development Fundamentals
t o ot her consumers.
A
niche market is t he subset of t he market on which a speci c product is focused
Mind share is t he e ect of market ing e ort s in uencing a part icular t arg et market or demog raphic. Mind
share includes commercial phrases, cat ch words and sound bit es t hat provoke recog nit ion of t he product ,
service, or company by t he public.
A
target market is a g roup of cust omers wit hin a business's serviceable available market at which a
business aims it s market ing e
ort s and resources.
A business (usually Web- based) t hat market s and sells g oods and services t hat it does not own or st ore.
T he
aggregator allows ot her vendors t o compet e using it s sit e, and t hen t akes a percent ag e of t he
business. In essence, t he sit e act s as a port al for an ent ire indust ry niche.
End-User Web Experience
● Search Engine Optimization (SEO) is t he use of speci c t echniques t o increase a pag e's or
sit e's rank on a search eng ine (such as Goog le, Y ahoo! or Bing ). Such t echniques are said t o be
“org anic" because t hey do not include paid advert isement s of any kind. SE O expert s edit pag es and
sit es t o enable search eng ines t o recog nize t he inherent value of t he cont ent and services on t he
sit e.
● Pay Per Click (PPC) - an Int ernet market ing t echnique in which you pay for hig h search eng ine
result s by advert ising on keywords t hat describe your product or service. Y ou pay your sit e host s
only when your ads are clicked by t he user.
● Web Analytics - T he pract ice of collect ing dat a and st udying user behavior in an at t empt t o
increase market share and sales.
Org anizat ions need st andard met hods for exchang ing funds just as much as t hey need st andards for
exchang ing informat ion. Several e- commerce payment t echnolog ies are in common use, eit her as
t ransaction met hods or as t ools t o secure t ransact ions:
● Electronic Funds Transfer (EFT) – E lect ronic Funds T ransfer) is a g eneric t erm t hat describes
t he abilit y t o t ransfer funds using comput ers, rat her t han using paper. Banks use E FT t o save t ime
and ensure t hat monet ary exchang e bet ween individuals and businesses is as secure as possible.
Ot her larg e org anizat ions use E FT as well.
● Payment gateways – A payment g at eway is a syst em, eit her hardware- based or soft warebased, t hat mediat es bet ween a merchant (i.e., an e- commerce- enabled Websit e) and an acquirer
(e.g ., t he merchant 's bank). E nd users do not con
g ure t heir syst ems t o become payment
g at eways. Once t he merchant receives payment from a cust omer, t he merchant uses t he payment
g at eway t o t ransmit credit card informat ion t o t he bank.
● 3-D Secure – 3- D Secure is an XML- based prot ocol used by credit card companies t o add
securit y t o online credit and debit card t ransact ions. It is oft en list ed as "Veri
ed by VISA" or
"Mast erCard Secure Code." 3- D Secure has replaced t he Secure E lectronic T ransact ions (SE T )
prot ocol.
● Secure Sockets Layer (SSL) and Transport Layer Security (TLS) are met hods used t o
encrypt dat a t ransmissions. T hey act as t he foundat ion for many e- commerce prot ocols, including
3- D Secure. T LS is quit e like SSL, but T LS is an open st andard t hat is updat ed frequent ly.
● What is HT T PS?
● What is encrypt ion?
● What is plag iarism?
● Wireframing is anot her helpful t ool for Websit e planning . Wireframing is t he process of
C779 - Web De
velopment Fundamentals
Wireframes
developing an out line for a Web presence. A wireframe is present ed as a visual represent at ion of a
Web Pag e layout .
usually focus on represent ing a Websit e's layout . Mult iple
wireframes can make up a st oryboard, which will be discussed lat er in t he lesson.
● Know and describe t he following int ellect ual propert y t erms: t rade secret , copyrig ht , t rademark,
licensing , infring ement , and plag iarism.
● T he United Nations Educational, Scienti c and Cultural Organization ( UNESCO) is a
specialized ag ency of t he Unit ed Nat ions aimed at promot ing world peace and securit y t hroug h
int ernat ional cooperat ion in educat ion, art s, sciences and cult ure.
● Increasing ly, Web development work (including sit e desig n) is being outsourced t o workers in
remot e locat ions. When
outsourcing occurs, a local t eam of workers oft en remains t o perform
some t asks (somet imes permanent ly, somet imes only for a short t ime).
● E-commerce requires you t o underst and g lobal issues. Remember t hat by placing a business on
t he Web, t he audience is expanded t o include anyone in t he world wit h a browser and Int ernet
access.
● Currency di
erences – E - commerce sit es such as eBay and g lobal businesses such as IBM
facilit at e business wit h people in many di
erent count ries. T hese businesses must be able t o
aut omat ically calculat e exchang e rat es for t he day of t he t ransact ion (oft en called currency
conversion). T hey must also calculat e t axes and t ari
s on g oods, which incur addit ional cost s.
● International shipping – When shipping g oods int ernat ionally, you must consider searches by
cust oms, cost s incurred by cust oms, delays caused by cust oms, and all t ari
s. A product you sell
leg ally in one count ry may be illeg al in anot her or heavily reg ulat ed.
● Language concerns – Consider t he lang uag e(s) used by t he t arg et audience and t he charact ers
necessary (e.g ., alphanumeric, mat hemat ical or currency symbols). Y ou may be assig ned t o creat e a
pag e for a lang uag e t hat requires a part icular charact er set . T o solve t his problem, specify Unicode
support for all your sit e's Webpag es. T he Unicode T echnical Commit t ee (UT C) maint ains t he
Unicode st andard. T he UT C is a subcommit t ee of t he Unicode Consort ium (www.unicode.org ).
● Relationship management – E very business want s t o est ablish solid relat ionships wit h all
part ies involved. T wo import ant concept s t hat can help you ensure success are t rust - building and
cust omer self- service. T rust is built t hroug h qualit y cust omer service and frequent cont act.
Cust omer self- service includes t he abilit y t o t rack orders, cust omize orders (such as modify or
cancel an order, chang e a shipping address, et c.) and choose product s wit hout t he help of a live
person.
Web Servers
● Ident ify and describe various web server t echnolog ies.
● Describe push t echnolog y.
● Describe pull t echnolog y.
● What is a vert ical port al?
● What is a horizont al port al?
A
wiki is a sit e t hat is desig ned for g roups of people t o quickly capt ure and share ideas by creat ing simple
pag es and linking t hem t og et her.
Multipurpose Internet Mail Extensions (MIME) is an Int ernet st andard t hat ext ends t he format of
email messag es t o support t ext in charact er set s ot her t han ASCII, as well as at t achment s of audio, video,
C779 - Web Development Fundamentals
imag es, and applicat ion prog rams.
● Ident ify 10 common
le format s used for t he web.
● Ident ify pot ent ial issues wit h propriet ary
le format s.
● Ident ify and describe four t ypes of dat abases.
● Ident ify t wo t ypes of dat abase connect ions.
● Underst and and compare web host ing solut ions.
Structured Query Language (SQL) is a st andardized prog ramming lang uag e t hat is used t o manag e
relat ional dat abases and perform various operat ions on t he dat a in t hem.
● When you ent er a domain int o a browser address bar, what is t he name of t he pag e t hat t he
server looks for t o display?
● Ident ify t wo pros and t wo cons for each of t he following :
Dedicat ed Server Host ing
Virt ual
Co- locat ion
A
cloud service provider is a t hird- part y company o ering a cloud- based plat form, infrast ruct ure,
applicat ion, or st orag e services. Much like a homeowner would pay for a ut ilit y such as elect ricit y or g as,
companies t ypically have t o pay only for t he amount of cloud services t hey use, as business demands
require.
Software as a service (SaaS) is a soft ware licensing and delivery model in which soft ware is licensed on
a subscript ion basis and is cent rally host ed. E xamples include Goog le Workspace, Dropbox, Salesforce,
Cisco WebE x, Concur, GoT oMeet ing .
