Course
Essential
Standard
Indicator
Essential
Questions
BD10 Multimedia and
Webpage Design
4.00 B2
Unit B
Interactive Website Design and
Development.
28%
Understand the fundamentals of
web design
4.02 B2
10%
Understand the concepts of
responsive web design.
What challenges do mobile devices present to Web designers?
What are the basic concepts of responsive web design?
UNPACKED CONTENT
1) Web page Layout considerations
a) Typical layout is organized in columns using <div> tags and Cascading Style
Sheets in order to create flexible layouts.
i) <div> tag defines a division or a section in an HTML document.
ii) <div> tag is used to group block-elements to format them with CSS.
iii) <div> tags can be nested; meaning a tag contained within a tag
iv) <table> tags should not be used for layout; tables are intended for presenting
tabular data.
b) Html5 introduced these tags: <header>, <footer>, <nav> (Note: these tags were
briefly introduced in 4.01. They have particular relevance in layout)
i) <header> tag specifies a header for a document or section
ii) <header> element should be used as a container for introductory content
iii) <footer> tag defines a footer for a document or section
iv) <footer> typically contains the author of the document, copyright information,
links to terms of use, contact information, etc.
v) <nav> tag defines a set of navigation links; only intended for a major block of
navigation links
c) Many existing web sites today contains HTML code like this: <div id="nav">, <div
class="header">, or <div id="footer">, to indicate navigation links, header, and
footer.
d) HTML5 offers new semantic elements to clearly define different parts of a web
page; such as <header> and <footer>.
2) Challenges of wide-ranging devices
a) Devices with Web browsers include smartphones, tablets, laptops and desktops,
televisions, wearable devices, etc
b) Mobile browsers are optimized so as to display Web content most effectively for
small screens on portable devices.
c) Variations in screen size, resolution, pixel density, pixel size present a challenge.
d) A device pixel is the smallest element on a screen; also known as physical pixel.
e) More pixels typically mean a “crisper” presentation.
BD10 Multimedia and Webpage Design
Summer 2014
Page 224
f) Screen density or pixel density refers to the number of device pixels on a
physical surface. It is often measured in pixels per inch (PPI).
g) Resolution is a simple count of the number of pixels across the entire width and
height of a device.
h) Viewport is the rectangular area (measured in pixels) that is viewable on a
device screen. (Some mobile devices have virtual viewports in the browser that
scale down web pages to fit the smaller display.)
3) The Mobile Web
a) Challenges
i) Screen size. Limited screen size and therefore limited content that is visible.
ii) Input. Mobile devices have limited keypads, small keys and frequently no
pointing device.
iii) Bandwidth and cost. Mobile networks can be slow compared to fixed data
connections. Mobile data transfer costs money. Large images and advertising
content cause retrieval issues.
iv) Goals. Mobile users have different interests than desktop devices. Mobile
users are typically more goal-oriented and less interested in lengthy
documents.
v) Device limitations. Mobile devices do not have the computational power of
desktops; battery consumption; exceeding memory and incomplete displays
can cause problems.
b) Advantages of Mobile Web Devices
i) More personal and can be personalized
ii) Portable.
iii) Always connected.
iv) Location awareness.
v) Offers one-handed operation.
vi) Can be a universal alerting device.
c) World Wide Web Consortium (w3c) has a mobile Web initiative
i) “Mobile accessibility” generally refers to making websites and applications
more accessible to people with disabilities when they are using mobile
devices. This includes interacting with phones, tablets, TVs and other
devices that use the Web.
ii) W3C has defined the reference pixel. A standard based on an optical
reference unit that might be twice the size of a hardware pixel. This new pixel
should look exactly the same in all viewing situations.
4) Responsive Web Design
a) Ethan Marcotte coined the term responsive web design in an online article.
b) RWD takes existing techniques involving flexible grid layout, flexible images, and
media and media queries creating a unified approach to web design.
BD10 Multimedia and Webpage Design
Summer 2014
Page 225
c) Many designers have advocated an approach to design for the smallest viewport
first and then work up towards the larger viewpoints. The design and content can
be enhanced as you work upward.
d) What is needed for Responsive Web Design?
i) An understanding of the various devices and pixel density
ii) How user experience and user needs are different for mobile users
iii) How Web browsers vary in rendering Web pages
iv) HTML expertise
v) Extensive use of CSS required
vi) Fluid vs. Fixed Layout
5) Fixed Layout
a) Fixed-width layout has a wrapper (or container) that is a fixed width, and the
components inside it have either percentage widths or fixed widths.
i) The container (wrapper) element is fixed
ii) The width of the site is bound to a certain number of pixels
b) Advantages of Fixed-width layout
i) Easier to use and easier to customize in terms of design.
ii) Widths are the same for every browser, so there is less hassle with images,
forms, video and other content that are fixed-width.
iii) Fixed-width is predictable and has more precise control.
iv) Even if a website is designed to be compatible with the smallest screen
resolution, 800×600, the content will still be wide enough at a larger resolution
to be easily legible.
c) Disadvantages of Fixed-width
i) May create excessive white space for users with larger screen resolutions
ii) Smaller screen resolutions may require a horizontal scroll bar, depending on
the fixed layout’s width.
iii) Fixed-width layouts may create usability issues for mobile users and users
with very large screens.
6) Fluid Layout
a) Fluid or liquid layouts define dimensions in percentages rather than pixels.
b) Advantages
i) Can be more user-friendly, because it adjusts to the user’s set up.
ii) If designed properly, content will distribute evenly
iii) If designed well, a fluid layout can eliminate horizontal scroll bars in smaller
screen resolutions.
c) Disadvantages
i) Less control over what the user sees
ii) May overlook problems because the layout looks fine on their specific screen
resolution.
BD10 Multimedia and Webpage Design
Summer 2014
Page 226
iii) Images, video and other types of content with set widths may need to be set
at multiple widths to accommodate different screen resolutions.
iv) With incredibly large screen resolutions, a lack of content may create excess
white space that can diminish aesthetic appeal.
7) Absolute units and Relative measurement units defined in CSS and their
recommended use (this is not an all-inclusive list):
a) Absolute units include:
i) Pixels (px)—recommended for screens, occasional print
ii) Points (pt)—recommended for print, not for screens
iii) Picas (pc)—recommended for print
iv) Inches (in)—recommended for print, not for screens
b) Relative units include:
i) em (font size of the element)—recommended for screen or print
ii) % (percent)—recommended for screen or print
c) Absolute units are good when the physical size of the output is defined
d) Relative units are good when the user may change size in the browser and to set
sizes relative to the surrounding elements.
e) An em is a unit of measurement in the field of typography, equal to the currently
specified point size.
i) In a Web browser an em is equal to the default size of 16px
ii) Ems are becoming increasingly popular in web documents due to scalability
and their mobile-device-friendly nature.
iii) Ems are recommended by the w3c.
f) Images and mobile devices
i) Bitmap or raster images are composed of a fixed set of pixels.
ii) Bitmap pixel is the smallest unit of data in a raster image
iii) Avoid using bitmaps with inappropriate resolutions
iv) CSS can be used to serve up an appropriately sized version of a bitmap
depending upon the screen size
v) CSS pixel is a unit of measurement.
g) SVG tag <svg> (new in HTML 5) defines vector-based graphics for the Web.
i) SVG stands for Scalable Vector Graphics
ii) SVG graphics do NOT lose any quality if they are zoomed or resized
iii) SVG is a W3C recommendation
iv) SVG can be embedded directly into HTML pages
v) SVG can be edited with a plain text editor
h) Media queries consist of a media type and expressions that check for the
conditions of particular media features
i) By using the @media rule, a website can have a different layout for screen,
print, mobile phone, tablet, etc.
BD10 Multimedia and Webpage Design
Summer 2014
Page 227
ii) The @media rule allows different style rules for different media in the same
style sheet
iii) This is considered advanced CSS.
4.02 Resources
Html & CSS
reference
http://www.w3schools.com/
Article on
viewports
http://alistapart.com/article/vexing-viewports
Responsive Web
Design
http://alistapart.com/article/responsive-web-design
W3C
http://www.w3.org/Style/Examples/007/units.en.html
Browsers
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Pixels
http://coding.smashingmagazine.com/2012/08/20/towards-retinaweb/
Ems
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-ptvs/
Media Queries
http://www.w3.org/Talks/2013/0516-CSS-WWW2013/mediaqueries.html
SVG
http://www.w3.org/Graphics/SVG/
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vselastic-layout-whats-the-right-one-for-you/
BD10 Multimedia and Webpage Design
Summer 2014
Page 228
Instructional Activities
Resources
Going Green – Please refer to the Going Green document in the Curriculum Guide
Introductory Materials for suggestions on how to conserve resources while
teaching this course.
NOTE: The graphic organizers included in the curriculum guide are used to guide students in
taking notes. The teacher may use alternative methods suggested in the Going Green
document to provide this material to students.
NOTE: A text editor is needed for this activity. Notepad++ is a free source code editor. Multiple
web browsers should be installed on your classroom computers. Recommended browsers are:
IE, Mozilla Firefox, Chrome, Safari or Opera.
Mozilla Firefox has a web tool for responsive design in the browser.
Chrome Developer Tool has mobile emulator in the browser.
Safari has an emulator in its browser.
Opera has an emulator download.
Instructions for using the browser tools and emulators are provided in this document.
1.
2.
Using the 4.02 Guiding Questions activity, Teacher will
facilitate a discussion with students about the variety of
devices equipped with Web browsers. Topics to lead
discussion include:

Size comparison of device screens. Discuss
pixels, pixel density (for example, retina display)
and resolution. (http ://mobiledevicesize.com/ )

Problems experienced when viewing web pages
on mobile devices.

Opportunities to explore with mobile devices and
the Web.
 Teacher will present or make available to students
4.02WebBrowsers.ppt
 Teacher will distribute 4.02 Understand Web
Browsers graphical organizer.
 Students should take notes on the presentation and
should understand differences in Web browsers,
viewports, and page rendering.
BD10 Multimedia and Webpage Design
Summer 2014
 4.02 Guiding Questions
for Discussion on Mobile
Devices.
 4.02WebBrowsers.ppt
 4.02 Understand Web
Browser graphical
organizer
Page 229
3.
 Introduce the concept of Responsive Web Design.
 Show students one of the videos so they can visualize
the concept.
 Students should be able to define Responsive Web
Design.
 Preview these short
introductory videos on
RWD from You Tube:
http://www.youtube.com/w
atch?v=AkPrczmw9cU
http://www.youtube.com/w
atch?v=PTx5uaUdNRY
http://www.youtube.com/w
atch?v=lOTHsS6nJOU
4.
 Examine how Web pages look in various Web
browsers
 Provide students with this URL
http://browsershots.org to see the impact of various
Web browsers on Web page display or use multiple
browsers installed on your classroom computers.
 Students should see the differences and understand
why there are differences in Web browsers.
 Using the 4.02 Viewing Websites in Responsive
Design View activity, students will work in pairs and
should be able to recognize web sites that are
responsive in design.
 Students should be able to describe what happens to
the display of Web pages as the viewport changes?
Specifically, what happens to text, images and
layout?
5.
 Teacher will present or make available to students
4.02WebLayout.ppt
 Teacher will distribute 4.02 Understand Web Layout
worksheet.
 Students should understand layout tags.
BD10 Multimedia and Webpage Design
Summer 2014
Use the instructions
provided for your installed
browser:
 4.02 Viewing Websites in
Responsive Design ViewMozilla Firefox
 4.02 Viewing Websites in
Responsive Design ViewChrome
 4.02 Viewing Websites in
Responsive Design ViewOpera
 4.02 Viewing Websites in
Responsive Design ViewSafari
 4.02WebLayout.ppt
 4.02 Understand Web
Layout worksheet
 4.02 Understand Web
Layout worksheet KEY
Page 230
6.
 Show a video demonstrating Web layouts using <div>
<header> <footer> <nav> elements, in HTML5:
http://www.youtube.com/watch?v=dDn9uw7N9Xg
 Teacher will provide students with this URL to assist
them in practicing the tags:
http://www.w3schools.com/cssref/sel_element_elem
ent.asp
 Students will create a Web page using <div>
<header> <footer> <nav> tags.

Students should resize the browser window or use
responsive web design view in the browser to see
how the elements rearrange in different resolutions.
 Teacher will note the use of em values for font size.
Teacher will ask students to compare use of Pixel,
Percent and Em in styling the font size.
http://www.w3schools.com/css/css_font.asp
7.
8.
 Teacher will facilitate an introduction to Responsive
Web Design concepts using the
4.02ResponsiveWebDesign.ppt
 Teacher will distribute copies of 4.02 Responsive
Web Design Concepts worksheet.
 Students should understand the characteristics of
fixed, fluid layouts and definition of responsive web
design.
 4.02ResponsiveWebDes
ign.ppt
 Students should complete the 4.02 Key terms
independently.
 4.02 Key Terms
BD10 Multimedia and Webpage Design
Summer 2014
 4.02 Responsive Web
Design Concepts
worksheet
Page 231
9.
 Re-introduce SVG (Scalable Vector Graphics) in
terms of Web graphics using the 4.02 What is SVG
PowerPoint.
 Students should recall vector graphics from Unit 2.02
 Review <svg> (New tag in HTML 5) which creates a
scalable graphic embedded in a Web document.
 Students should understand the advantages of using
a vector graphic rather than a raster image.
 Students will practice using the <svg> tags provided:

4.02 What is SVG
PowerPoint

4.02 Try the SVG
Element
1. Practice with <svg>
http://www.w3schools.com/html/html5_svg.
asp
2. OR refer to 4.02 Try the SVG Element and
students can enter the code in a plain text
editor such as Notepad++
BD10 Multimedia and Webpage Design
Summer 2014
Page 232
4.02 Guiding Questions for Discussion on Mobile Devices




Poll students on use of mobile devices for Web surfing.
Ask students about their experience with mobile Web browsing. What problems
have they noticed? (connectivity, display, battery consumption, bandwidth use/data
plan, slow page loading, device detection, redirection, sites not optimized for mobile)
What expectations does a mobile Web user have that are different from the desktop
user? (Points of emphasis: more personal, more personalizable, portable, always
connected, location awareness, one-handed operation, can be a universal alerting
device)
Examine variations in mobile devices. http://mobiledevicesize.com/ or http://phonesize.com/
Here are some web sites/tools that can help demonstrate how Web pages look on
various devices.
W3C Validator for mobile
http://validator.w3.org/mobile/
Chrome Developer tool for mobile
https://developers.google.com/chromedeveloper-tools/docs/mobileemulation#emulate-devices (must be
enabled in Chrome)
Web site with phone emulator
http://www.mobilephoneemulator.com/
Mozilla Firefox Responsive Design View
https://developer.mozilla.org/enUS/docs/Tools/Responsive_Design_View
Built-in to web browser
Opera mini-simulator (requires Java to
run)
BD10 Multimedia and Webpage Design
http://www.opera.com/developer/opera-minisimulator
Summer 2014
Page 233
4.02 Understand Web Browsers
Briefly answer the following questions.
1. List 3 reasons why Web browsers do not necessarily display Web pages the
same way.
2. How are mobile web browsers different from desktop web browsers?
3. What is a viewport?
4. What does Web page rendering mean?
BD10 Multimedia and Webpage Design
Summer 2014
Page 234
4.02 Understand Web Browsers--Key
Briefly answer the following questions.
1. List 3 reasons why Web browsers do not necessarily display Web pages the
same way.
Variations in screen size, resolution and pixel density. Different operating
systems will impact display. User preferences in browser settings. Web browsers
render pages differently as they interpret the code.
2. How are mobile web browsers different from desktop web browsers?
Mobile browsers need to be small and efficient to operate on a mobile device.
They are optimized to display web content effectively on a small screen.
3. What is a viewport?
The viewport is the area a web browser has to display a web page.
4. What does Web page rendering mean?
Web browsers have a rendering engine that determines how the HTML and CSS
code is displayed.
BD10 Multimedia and Webpage Design
Summer 2014
Page 235
4.02 Viewing Websites in Responsive Design View- Mozilla Firefox
Mozilla Firefox: Tools> Web Developer Tools>Responsive Design View

BD10 Multimedia and Webpage Design
Summer 2014
Page 236
4.02 Viewing Websites in Responsive Design View- Chrome
Chrome Developer Tools-Mobile Emulation
BD10 Multimedia and Webpage Design
Summer 2014
Page 237
4.02 Viewing Websites in Responsive Design View- Safari
Safari Web Browser Emulator Tool
BD10 Multimedia and Webpage Design
Summer 2014
Page 238
4.02 Viewing Websites in Responsive Design View- Opera
4.02 Opera Mobile Emulator Tool
BD10 Multimedia and Webpage Design
Summer 2014
Page 239
4.02 Understand Web Layout
1. What is the definition of the <div> tag?
2. How does the usage of the <div> tag differ from the <table> tag?
3. How should the <header> tag be used?
4. How should the <footer> tag be used?
5. How should the <nav> tag be used?
6. What is the container or wrapper div?
7. What is the difference between screen resolution and pixel density?
BD10 Multimedia and Webpage Design
Summer 2014
Page 240
4.02 Understand Web Layout--KEY
1. What is the definition of the <div> tag?
The <div> tag defines a division or a section in an HTML document. The <div>
tag is used to group block-elements to format them with CSS.
2. How does the usage of the <div> tag differ from the <table> tag?
The <div> tag defines a division or section. A <table> organizes tabular data. It
should not be used as a layout tool.
3. How should the <header> tag be used?
The <header> tag specifies a header for a document or section. The <header>
element should be used as a container for introductory content or set of
navigational links.
4. How should the <footer> tag be used?
The <footer> tag defines a footer for a document or section. A footer typically
contains the author of the document, copyright information, links to terms of
use, contact information, etc.
5. How should the <nav> tag be used?
The <nav> tag defines a set of navigation links.
6. What is the container or wrapper div?
The first or outermost <div> tag.
7. What is the difference between screen resolution and pixel density?
Screen resolution is the count of the number of pixels across the entire width and height of a
device. Pixel density is the number of device pixels on a physical surface
BD10 Multimedia and Webpage Design
Summer 2014
Page 241
4.02 Responsive Web Design Concepts
Directions: Record notes while viewing the 4.02 Responsive Web Design PowerPoint
Define Fixed and Fluid layout and Responsive Web Design. What are the
advantages/disadvantages/characteristics of each?
Fixed Layout
Fluid or Liquid Layout
Responsive Web Design
Definition:
Definition:
Definition:
Advantages
Advantages
Characteristics:
Disadvantages
Disadvantages
BD10 Multimedia and Webpage Design
Summer 2014
Page 242
4.02 Responsive Web Design Concepts page 2
1. Classify the following CSS measurement units as either absolute or relative. Circle
the correct answer.
Ems (em)
Inches (in)
Percent (%)
Pixels (px)
Points (pt)
Picas (pc)
Absolute
Absolute
Absolute
Absolute
Absolute
Absolute
Relative
Relative
Relative
Relative
Relative
Relative
2. List 3 advantages of using Scalable Vector Graphics (SVG).
3. How is the size of an em unit defined?
4. What is the purpose of a media query?
BD10 Multimedia and Webpage Design
Summer 2014
Page 243
4.02 Responsive Web Design Concepts—Key
Directions: Record notes while viewing the 4.02 Responsive Web Design PowerPoint
and 4.02 What is SVG PowerPoint
Define Fixed and Fluid layout and Responsive Web Design. What are the
advantages/disadvantages/characteristics of each?
Fixed Layout
Fluid or Liquid Layout
Responsive Web Design
The width of the site is
bound to a certain number
of pixels
The web design’s
dimensions are defined in
percentages rather than
pixels. CSS helps to define
the layout as it adapts to
various screen sizes.
Refers to using existing
techniques involving flexible
grid layout, flexible images,
and media and media
queries into a unified
approach to web design.
Advantages


Easier to use
Designer sees what the Advantages
user will see at the
 More user-friendly;
specified size
should be more visually
Disadvantages
appealing
 Should eliminate
 On smaller screens,
scrollbars
creates scrollbars

On larger screens,
creates empty white
spaces



Disadvantages



BD10 Multimedia and Webpage Design
Less control over what
user sees
Requires testing on
various devices to really
see how the page will
look
Can still end up with
scrollbars and empty
white space
Summer 2014


Requires
understanding of the
various devices and
pixel density
Must understand the
needs of mobile users
Requires testing in
various browsers and
on a variety of devices
HTML and CSS
expertise needed
Understand Fluid vs
Fixed Layout
Page 244
4.02 Responsive Web Design Concepts page 2
5. Classify the following CSS measurement units as either absolute or relative. Circle
the correct answer.
Ems (em)
Inches (in)
Percent (%)
Pixels (px)
Points (pt)
Picas (pc)
Absolute
Absolute
Absolute
Absolute
Absolute
Absolute
Relative
Relative
Relative
Relative
Relative
Relative
6. List 3 advantages of using Scalable Vector Graphics (SVG).
SVG are scalable
SVG are zoomable without degradation
SVG can created and edited with a text editor
SVG can be printed with high quality at any resolution
7. How is the size of an em unit defined?
An em is a unit of measurement equal to the currently specified point size. In a web
browser the default is 16 px = 1 em
8. What is the purpose of a media query?
The main purpose of a media query is to apply different CSS rules in order to obtain
different layouts, depending on the width of the display window afforded to your
content
BD10 Multimedia and Webpage Design
Summer 2014
Page 245
4.02 Web Page Layout Practice
This document displays 2 Flash objects in a layout using the <header> <nav> <footer>
and <div> tags. Students could display images, animated gifs, or videos in the main
section of this document. Customize the content to fit your particular needs.
This is a screenshot of the document displayed in the Chrome browser. The code is on
the following page.
BD10 Multimedia and Webpage Design
Summer 2014
Page 246
4.02 Web Page Layout Practice
This document displays 2 Flash objects in a layout using the <header> <nav> <footer>
and <div> tags. Students could display images, animated gifs, or videos in the main
section of this document. Customize the content to fit your particular needs. Notice that
em values are used for font-size.
<!DOCTYPE html>
<html>
<head>
<title>My Flash Projects</title>
</head>
<body>
<div id="container" style="width:100%; backgroundcolor:#A9A9A9">
<header style="background-color:#666666; color:#FFFFFF; textalign:center; font-family:Courier; font-size:2.5em">
Welcome to my Flash Projects Page
</header>
<nav style="background-color:#F8F8F8">
<a
href="http://www.adobe.com/products/flashplayer.html">Adobe
Flash Player</a> |
<a href="http://en.wikipedia.org/wiki/Adobe_Flash">What is
Flash?</a> |
<a
href="http://www.shortoftheweek.com/category/style/flashanimation/">Flash Animations</a>
</nav>
<div>
<h1 style="font-family:Courier; color:#666666;">Here are some of
my Flash Projects that I created in
Multimedia and Web Page Design</h1>
<object width="550" height="400" data="johnhandwriting.swf"></object>
<object width="550" height="400" data="Snowanimation.swf"></object>
</div>
<footer style="background-color:#990000; color:#FFFFFF; fontfamily:Courier; font-size:1.5em; clear:both; textalign:center;">
Copyright-Date-Your Name</footer>
</div>
</body>
</html>
BD10 Multimedia and Webpage Design
Summer 2014
Page 247
4.02 Key Terms
Responsive Web Design
Resolution
Pixels per Inch (PPI)
Device Pixel
Bitmap Pixel
Reference Pixel
Pixel Density
Viewport
Fixed-width Layout
Refers to using existing techniques involving flexible grid
layout, flexible images, and media and media queries into a
unified approach to web design.
A simple count of the number of pixels across the entire
width and height of a device
A measure of screen density refers to the number of device
pixels on a physical surface.
The tiniest physical unit in a display; also known as a
physical pixel
The smallest unit of data in a raster image
A W3C standard based on an optical reference unit that
might be twice the size of a hardware pixel. This new pixel
should look exactly the same in all viewing situations.
The number of device pixels on a physical surface; often
measured in pixels per inch.
The rectangular area (measured in pixels) that is viewable
on a device screen.
The width of the site is bound to a certain number of pixels
Relative units
The web design’s dimensions are defined in percentages
rather than pixels.
1 em equals the current font size; in a Web browser it
equals 16 px
Size is set in relation to surrounding elements
Absolute units
A specific size
Fluid Layout
Em space
Media Query
A CSS specification that allows designers to target styles
based on a number of device properties
Scalable Vector Graphics Defines vector-based graphics that can be embedded
(SVG)
directly into a Web page; SVG is a World Wide Web
Consortium recommendation.
Vector graphics
Type of graphic that does NOT lose quality when zoomed or
resized.
BD10 Multimedia and Webpage Design
Summer 2014
Page 248
4.02 Try the SVG Element
In HTML5, you can embed SVG elements directly into your HTML page:
SVG Star Example:
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
SVG Circle Example:
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"
fill="yellow" />
</svg>
</body>
</html>
BD10 Multimedia and Webpage Design
Summer 2014
Page 249