9/15/2020
1
Had some
presentational
elements
THE EVOLUTION OF HTML
XHTML2000
HTML5Work In Progress
HTML 41997
Written in XML
Presentational
elements removed
In fact, completed in
Oct., 2014
HTML<!DOCTYPE html>
Older versions—common cases:
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" />
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-
transitional.dtd" />
HTML5 DOCTYPE
HTML
<!-- start of introduction -->
<h1>Current Exhibition</h1>
<h2>Olafur Eliasson</h2>
<!-- end of introduction -->
<!--
<a
href="mailto:[email protected]">Contact</a>
-->
COMMENTS IN HTML
HTML
<p>Water and air. So very commonplace are
these substances, they hardly attraction
attention and yet they vouchsafe our very
existence.</p>
<p id="pullquote">Every time I view the
sea I feel a sense of calming security, as
if visiting my ancestral home; I embark of
a voyage of seeing.</p>
<p>Mystery of mysteries, water and air are
right there before us in the sea.</p>
ID ATTRIBUTE
9/15/2020
2
RESULT
Online page
HTML
<p class="important">For a one-year period
from November 2010, the Marugame
Genichiro-Inokuma Museum of Contemporary
Art (MIMOCA) will host...</p>
<p>Each will showcase works by the artist
thematically contextualised under the
headings...</p>
<p class="important admittance">Hours:
10:00 - 18:00 (No admittance after
17:30)</p>
CLASS ATTRIBUTE
RESULT
Online page
HTML
<h1>Hiroshi Sugimoto</h1>
<p>The dates of the ORIGIN OF ART
exhibition are as follows:</p>
<ul>
<li>Science: 21 Nov - 20 Feb 2010</li>
<li>Architecture: 6 Mar - 15 May
2010</li>
<li>History: 29 May - 21 Aug 2010</li>
<li>Religion: 28 Aug - 6 Nov 2010</li>
</ul>
BLOCK ELEMENTS
RESULT
HTML
Timed to a single revolution of the planet
around the sun at a 23.4 degrees tilt that
plays out the rhythm of the seasons, this
<em>Origins of Art</em> cycle is organized
around four themes: <b>science,
architecture, history</b> and
<b>Religion</b>.
INLINE ELEMENTS
9/15/2020
3
RESULT
HTML
Block vs. inline elements
• Note: Although it’s normal to put inline elements
inside block elements, it’s not a good idea to try
to put block elements inside inline elements.
• This distinction is not cast in stone. Inline
elements can be converted to block elements
and vice versa through use of the display
attribute—see pg. 317.
HTML
<div id="header">
<img src="logo.gif" alt="Anish Kapoor" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</div><!-- #header -->
GROUPING TEXT &ELEMENTS IN A BLOCK
HTML
<div id="header">
<img src="logo.gif" alt="Anish Kapoor" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</div><!-- #header -->
GROUPING TEXT &ELEMENTS IN A BLOCK
RESULT
HTML
<p>Anish Kapoor won the Turner Prize in
1991 and exhibited at the
<span class="gallery">Tate Modern</span>
gallery in London in 2003.</p>
GROUPING TEXT &ELEMENTS INLINE
9/15/2020
4
HTML
<p>Anish Kapoor won the Turner Prize in
1991 and exhibited at the
<span class="gallery">Tate Modern</span>
gallery in London in 2003.</p>
GROUPING TEXT &ELEMENTS INLINE
RESULT
HTML
<iframe width="450" height="350"
src="http://maps.google.co.uk/maps?
q=moma+new+york&output=embed"
frameborder="0"
scrolling="0">
</iframe>
IFRAMES
Online page
HTML
<p>© 2012</p>
<p>© 2012</p>
<p>The <html> tag</p>
<p>The <html> tag</p>
ESCAPE CHARACTERS
RESULT
DOCTYPES tell browsers
which version of HTML you
are using.
SUMMARY
9/15/2020
5
You can add comments to
your code between the <!-- and --> markers.
SUMMARY
The id and class
attributes allow you to
identify particular elements.
SUMMARY
The <div> and <span>
elements allow you to group
block-level elements and
inline content together.
SUMMARY
<iframes> cut windows
into your web pages
through which other pages
can be displayed.
SUMMARY
The <meta> tag allows you
to supply all kinds of
information about your
web page.
SUMMARY
Escape characters are used
to include special
characters in your pages
such as <, >, and ©.
SUMMARY
9/15/2020
6
--But we’re skipping
FLASH, now being
phased out
HTML5: PREPARING VIDEOFOR YOUR PAGES (alternative to FLASH)
SUPPORT
Recent browsers
No DRM
FORMATS
H264 (.mp4)
WebM (.webm)
CONTROLS
From browser
Or via JavaScript
(DRM = copy
protection))
HTML<body>
<video src="video/puppy.mp4"
poster="images/puppy.jpg"
width="400" height="300"
preload
controls
loop>
<p>A video of a puppy playing in the
snow.</p>
</video>
</body>
ADDING HTML5 VIDEORESULT
online
HTML<video poster="images/puppy.jpg"
width="400" height="300"
preload
controls
loop>
<source src="video/puppy.mp4”/> (Chrome, Firefox, IE/Edge, Safari)
<source src="video/puppy.webm”/> (Chrome, Firefox, Edge)
<p>A video of a puppy playing in the
snow.</p>
</video> See caniuse.com/webm
MULTIPLE VIDEO SOURCES: so more browsers can display it
FLASH HTML5
ADDING AUDIO TOWEB PAGES
HOSTED SERVICE
SoundCloud
Amazon S3
Many others
Flash MP3 player
Several available
<audio> element
Similar to <video>
(we’re
skipping
FLASH)
9/15/2020
7
HTML<body>
<audio src="audio/test-audio.mp3"
controls
autoplay>
<p>This browser does not support
our audio format.</p>
</audio>
</body>
ADDING HTML5 AUDIORESULT
online
HTML<body>
<audio controls autoplay>
<source src="audio/test-audio.ogg"/> (Chrome, Firefox, Edge)
<source src="audio/test-audio.mp3"/> (Chrome, IE/Edge, Safari, Opera)
<p>This browser does not support
our audio format.</p>
</audio>
</body>
MULTIPLE AUDIO SOURCES
Note: Firefox has partial mp3 support
Android supports both formats
iPhone can play mp3
caniuse.com/ogg
Flash allows you to add
animations, video and audio
to the web.
SUMMARY
Adobe Flash was never
supported on iPhone or iPad, by
decision of Steve Jobs. See http://en.wikipedia.org/wiki/Apple_and_A
dobe_Flash_controversy
It will be unavailable after this year,
2020. See
www.adobe.com/products/flashplayer/en
d-of-life.html
SUMMARY
HTML5 introduces new <video> and <audio>
elements to add video and
audio to web pages, but
these are only supported in
the latest browsers.
SUMMARY
9/15/2020
8
Browsers that support the
HTML5 elements do not
use the same video and
audio formats, so you
supply your files in different
formats.
SUMMARY
UNDERSTANDING CSS:THINKING INSIDE THE BOX
The Cottage Garden
The cottage garden is a distinct style of garden that uses an informal
design, dense planting and a mixture of ornamental and edible plants.
The Cottage Garden originated in England and its history can be
traced back for centuries, although they were re-invented in 1870's
England, when stylized versions were formed as a reaction to the
more structured and rigorously maintained English estate gardens.
The earliest cottage gardens were more practical than their modern
descendants, with an emphasis on vegetables and herbs, along with
some fruit trees.
p {
font-family: Arial;}
CSS ASSOCIATES STYLE RULES WITH HTML ELEMENTS
p {
font-family: Arial;}
CSS ASSOCIATES STYLE RULES WITH HTML ELEMENTS
SELECTOR
9/15/2020
9
p {
font-family: Arial;}
CSS ASSOCIATES STYLE RULES WITH HTML ELEMENTS
SELECTOR
DECLARATION
h1, h2, h3 {
font-family: Arial;
color: yellow;}
CSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYED
h1, h2, h3 {
font-family: Arial;
color: yellow;}
CSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYED
PROPERTY
h1, h2, h3 {
font-family: Arial;
color: yellow;}
CSS PROPERTIES AFFECT HOW ELEMENTS ARE DISPLAYED
PROPERTY VALUE
HTML
<h1>From Garden to Plate</h1>
<p>A <i>potager</i> is a French term for
an ornamental vegetable or kitchen
garden...</p>
<h2>What to Plant</h2>
<p>Plants are chosen as much for their
functionality as for their color and
form...</p>
INTRODUCING CSSRESULT
Without CSS:
9/15/2020
10
CSS
body {
font-family: Arial, Verdana, sans-serif;}
h1, h2 {
color: #ee3e80;}
p {
color: #665544;}
INTRODUCING CSS
CSS
body {
font-family: Arial, Verdana, sans-serif;}
h1, h2 {
color: #ee3e80;}
p {
color: #665544;}
INTRODUCING CSS
Change the font used
CSS
body {
font-family: Arial, Verdana, sans-serif;}
h1, h2 {
color: #ee3e80;}
p {
color: #665544;}
INTRODUCING CSS
Change the color of the headings
CSS
body {
font-family: Arial, Verdana, sans-serif;}
h1, h2 {
color: #ee3e80;}
p {
color: #665544;}
INTRODUCING CSS
Change the color of the paragraphs
RESULT
online
HTML<html>
<head>
<title>Using External CSS</title>
<link href="css/styles.css"
type="text/css"
rel="stylesheet">
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of...</p>
</body>
</html>
USING EXTERNAL CSS
9/15/2020
11
HTML<html>
<head>
<title>Using External CSS</title>
<link href="css/styles.css"
type="text/css"
rel="stylesheet">
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of...</p>
</body>
</html>
USING EXTERNAL CSS
HTML<html>
<head>
<title>Using External CSS</title>
<link href="css/styles.css"
type="text/css"
rel="stylesheet">
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of...</p>
</body>
</html>
USING EXTERNAL CSS
HTML<html>
<head>
<title>Using External CSS</title>
<link href="css/styles.css"
type="text/css"
rel="stylesheet">
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of...</p>
</body>
</html>
USING EXTERNAL CSS
CSS
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: #rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
</head>
USING INTERNAL CSS
CSS SELECTORS
Universal * {}
Type h1, h2, h3 {}
Class .note {}
p.note {}
ID #introduction {}
CSS SELECTORS
Child li>a {}
Descendent p a {}
Adjacent sibling* h1+p {}
General sibling* h1~p {}
*Optional coverage (much less
common)
9/15/2020
12
CSS* {
font-family: Arial;
color: #333333;}
h1 {
font-family: "Courier New", monospace;}
i {color: green;}
i {color: red;} (later in file)
p {color: blue}
p b {color: violet;} (more specific)
HOW CSS RULES CASCADERESULT
CSS
body {
font-family: Arial, sans-serif;
color: #665544;
padding: 10px;}
.page {
border: 1px solid #665544;
background-color: #efefef;
padding: inherit;}
Reference: mozilla
INHERITANCE: Some properties (color, etc.) are largely inherited from containing elements, etc., others (border, etc.) are not.
RESULT
RESULTWhat properties are inherited?
• Should be easy to find this out, but there is
no central easy-to-use standard document
• Various websites try to cover details
• The standard for CSS3 is the standard for
CSS2.2 plus whatever is finished so far for
CSS3.
• CSS 2.2 Full property table helps with pre-
CSS3 properties
RESULTCSS standards complexityhttps://en.wikipedia.org/wiki/Cascading_Style_Sheets
Recommendations
Candidate
Recommendations
9/15/2020
13
Same CSS can be used for
every page of website
WHY USE EXTERNALSTYLE SHEETS
No need to copy style code into
each webpage
WHY USE EXTERNALSTYLE SHEETS
Changes to CSS automatically
apply to the entire website
WHY USE EXTERNALSTYLE SHEETS
Faster download time for
subsequent pages
WHY USE EXTERNALSTYLE SHEETS
Easier for many people to create
new pages in same style
WHY USE EXTERNALSTYLE SHEETS
Older browsers do not support
each property
DIFFERENT VERSIONS OF CSS & BROWSER QUIRKS
9/15/2020
14
Important to test
DIFFERENT VERSIONS OF CSS & BROWSER QUIRKS
Some browsers have "bugs" or
"quirks"
DIFFERENT VERSIONS OF CSS & BROWSER QUIRKS
CSS treats each HTML
element as if it appears
inside its own box and uses
rules to indicate how that
element should look.
SUMMARY
Rules are made up of
selectors (to specify which
elements the rule applies
to) and declarations (to say
what these elements should
look like).
SUMMARY
Different types of selectors
allow you to target your
rules at different elements.
SUMMARY
Declarations are made up of
two parts: the properties of
the element that you want to
change, and the values of
those properties.
SUMMARY
9/15/2020
15
CSS rules usually appear in
a separate document,
although they may appear
within an HTML page.
SUMMARY
CSS
h1 {
color: DarkCyan;}
h2 {
color: #ee4e80;}
p {
color: rgb(100, 100, 90);}
FOREGROUND COLOR (for text)
RESULT
CSS
body {
background-color: rgb(200,200,200);}
h1 {
background-color: DarkCyan;}
h2 {
background-color: #ee3e80;}
p {
background-color: white;}
BACKGROUND COLOR
9/15/2020
16
RESULTUNDERSTANDING COLOR
UNDERSTANDING COLOR VALUES
RGB VALUES
rgb(102,205,170)
HEX CODES
#66cdaa
COLOR NAMES
mediumAquaMarine
HUE SATURATION BRIGHTNESS
CONTRAST
HIGH
CONTRAST
LOW
CONTRAST
MEDIUM
CONTRAST
If text is reversed out (a light color on a dark
background) increase contrast and line height.
CSS
p.one {
background-color: rgb(0,0,0);
opacity: 0.5;
padding: 10px;}
p.two {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.5);}
CSS3: OPACITY: We’ll skip this
9/15/2020
17
RESULT
Online (but uses concepts from chap. 13)
Current
Chrome
Old
browser
Opacity 0.5
Color not only brings your
site to life, but also helps
convey the mood and
evokes reactions.
SUMMARY
There are three ways to
specify colors in CSS: RGB
values, hex codes, and
color names.
SUMMARY
Color pickers can help you
find the color you want.
SUMMARY
Ensure that there is enough
contrast between any text
and the background color
(or people will not be able to
read your content).
SUMMARY
CSS3 has introduced an
extra value for RGB colors
to indicate opacity. It is
known as RGBA.
SUMMARY
9/15/2020
18
TYPEFACE TERMINOLOGY
SERIF SANS-SERIF MONOSPACE WEIGHT STYLE STRETCH
TYPEFACE TERMINOLOGY
CHOOSING A TYPEFACEFOR YOUR WEBSITE
SERIF SANS-SERIF
*
*
*
*
*On “web-safe fonts list” at
http://www.w3schools.com/cssref/css_websafe_fonts.asp
CHOOSING A TYPEFACEFOR YOUR WEBSITE
MONOSPACE CURSIVE FANTASY
*
* *
9/15/2020
19
CSSbody {
font-family: Georgia, Times, serif;}
h1, h2 {
font-family: Arial, Verdana, sans-serif;}
.credits {
font-family: "Courier New", Courier,
monospace;}
SPECIFYING TYPEFACESfont-family
From http://www.w3schools.com/cssref/css_websafe_fonts.asp:
Start with the font you want, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are
available
RESULT
Online
CSS
body {
font-family: Georgia, Times, serif;
font-size: 12px;}
h1 {
font-size: 200%;} (200% of 12px)
.credits {
font-size: 1.3em;} (1em = width of ‘m’)
SIZE OF TYPEfont-size (inherited property)
RESULT
Note: Body looks like this even if browser is set for
large font, thus a barrier to sight-impaired users
Online
Zoom works as expected.
TYPE SCALES
Now used in programs such
as Word, Photoshop and
InDesign
One pt is approximately one px on a laptop,
so can’t go below about 8pt
Pleasing to the eye
Developed in 16th centuryCSS
.credits {
font-weight: bold;}
BOLDfont-weight
9/15/2020
20
RESULT
CSS
.credits {
font-style: italic;}
ITALICfont-style
RESULT
CSS
h1 {
text-transform: uppercase;}
h2 {
text-transform: lowercase;}
.credits {
text-transform: capitalize;}
UPPERCASE & LOWERCASEtext-transform
RESULT
CSS
.credits {
text-decoration: underline;}
a {
text-decoration: none;}
UNDERLINE & STRIKEtext-decoration
9/15/2020
21
RESULT
CSS
p {
line-height: 1.4em;}
LEADINGline-height
RESULT
CSS
h1, h2 {
text-transform: uppercase;
letter-spacing: 0.2em;}
.credits {
font-weight: bold;
word-spacing: 1em;}
LETTER & WORD SPACINGletter-spacing, word-spacing(optional for us)
RESULT
CSS
h1 {
text-align: left;}
p {
text-align: justify;}
.credits {
text-align: right;}
ALIGNMENTtext-align
9/15/2020
22
RESULT
CSS
#six-months {
vertical-align: text-top;}
#one-year {
vertical-align: baseline;}
#two-years {
vertical-align: text-bottom;}
VERTICAL ALIGNMENTvertical-align
RESULT
CSSh1 {
background-image: url("images
/logo.gif");
background-repeat: no-repeat;
text-indent: -9999px;}
.credits {
text-indent: 20px;}
<body>
<h1>Briards</h1> text pushed off screen (but available<p class="credits">by Ivy Duckett</p> to special browsers)
INDENTING TEXTtext-indent (Here, trick for providing text for an image, for blind users)
CSS
h1 {
background-image: url("images
/logo.gif");
background-repeat: no-repeat;
text-indent: -9999px;} trick case
.credits {
text-indent: 20px;} ordinary case
INDENTING TEXTtext-indent
RESULT
online
9/15/2020
23
CSS
a:link {
color: deeppink;
text-decoration: none;}
a:visited {
color: black;}
a:hover {
color: deeppink;
text-decoration: underline;}
a:active {
color: darkcyan;}
STYLING LINKS:link, :visited pseudo-classes
RESULT
online
There are properties to
control the choice of font,
size, weight, style,
and spacing.
SUMMARY
There is a limited choice
of fonts that you can
assume most people will
have installed.
SUMMARY
If you want to use a wider
range of typefaces there
are several options, but you
need to have the right
license to use them. (not
covered, see book if
interested)
SUMMARY
You can control the space
between lines of text,
individual letters,
and words.
SUMMARY
9/15/2020
24
Pseudo-classes can
change the style of an
element when a user
hovers over or clicks on
text, or have visited a link.
SUMMARY