Information Technologies Anselm Spoerri PhD (MIT)
advertisement
Info + Web Tech Course
Information
Technologies
Anselm Spoerri PhD (MIT)
SC&I @ Rutgers University
aspoerri@rutgers.edu
anselm.spoerri@gmail.com
Info + Web Tech Course
© Anselm Spoerri
Lecture 5 - Overview
HTML Elements
– Recap: Hierarchy of Tags | Block and Inline Elements
– div | id | class
HTML5
– HTML5 Key New Features
Cascading Style Sheet = CSS
– Formatting Rules
– Inline | Internal | External
specification of CSS rules
CSS3
– CSS3 Key New Features
CSS Demo
Lectures – Week 5 Content
http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures.html#week5
Info + Web Tech Course
© Anselm Spoerri
Recap & New – Web Basics: HTML Elements & Tags
HTML is made up of elements
<tag>Content</tag>
(read as: open tag, content, close tag)
Three major elements needed on HTML page
<html> - container for all of our HTML code
<head> - put data for browser and other machines
<body> - put content to show to the user
Block-level elements
take up own space vertically
(<p>, <h1-6>, <header> <nav>, <main>, <article>, <footer>)
<div>
page division
Inline-level elements
and
used style blocks of content
placed inside other elements
(<a>, <img>, <strong>, <em>, …)
Info + Web Tech Course
© Anselm Spoerri
Page Layout – DIVs
Two methods for creating Web Page Layout
‒ Tables (last lecture)
‒ HTML5, DIVs and CSS (this lecture)
Structure Your Pages
URL
‒ Divide logical sections of document into div elements
pageContent
<div>
header
<div> header content </div>
navigation
<div> navigation content </div>
main content
<div> main content </div>
footer
<div> footer content </div>
</div>
Produces “linear / natural flow” of elements
Info + Web Tech Course
© Anselm Spoerri
Page Structure – Hierarchy & Naming Elements
Hierarchical Structure of Web pages
‒
Elements contained inside another element (latter = parent, former = child)
<html>
<body>
<div>
page content
</div>
</body>
</html>
Naming Elements
‒ id="name"
can be applied only once unique
#idName {…}
‒ class="name"
.className {…}
define CSS rule
can be applied many times
define CSS rule
Useful with div (content blocks) and span (inline text) elements
Info + Web Tech Course
© Anselm Spoerri
Page Layout – DIVs with IDs
Name div elements with unique IDs
pageContent
<div id="pageContent">
header
<div id="header"> text/images/links </div>
navigation
<div id="navi"> text/images/links </div>
main content
<div id="content"> text/images/links </div>
footer
<div id="footer"> text/images/links </div>
</div>
Info + Web Tech Course
© Anselm Spoerri
Page Layout – HTML5 tags
Use tags that represent meaning of content elements
pageContent
<div id="pageContent">
header
<header> text/images/links </header>
navigation
<nav> text/images/links </nav>
main content
<main> text/images/links </main>
footer
<footer> text/images/links </footer>
</div>
Info + Web Tech Course
© Anselm Spoerri
HTML5 – Intro
Why HTML5?
–
–
–
–
–
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
Based on HTML, CSS, DOM, and JavaScript
What is HTML5
‒
HTML5 specification – http://dev.w3.org/html5/spec/
‒ Officially Working Draft
| “living standard”
Browser Support for HTML5
– HTML5 not yet official standard, no browser provides full HTML5 support.
– But all major browsers continue to add support for new HTML5 features.
– Understanding & implementing features is what matters.
Info + Web Tech Course
© Anselm Spoerri
HTML5 – New Capabilities
http://www.w3schools.com/html5/default.asp
Video specifies standard way to embed video (no plug-in)
Audio specifies standard way to embed audio (no plug-in)
Drag and Drop any element can be draggable
what to drag | where to drop | do the drop
Canvas used to draw graphics, on the fly, on web page
SVG supported Scalable Vector Graphics to draw shapes
Geolocation can determine user's position with permission
Web Storage better local storage within browser than cookies
Web Workers JavaScript runs in background without
affecting page performance
Server-Sent Events page gets automatic updates from server
Info + Web Tech Course
© Anselm Spoerri
HTML5 – DOCTYPE | charset | lang | CSS & JavaScript links
‒ HTML5 DOCTYPE: <!DOCTYPE html>
‒ not case sensitive | version dropped
‒ all browsers recognize shortened DOCTYPE & render in strict mode
and deprecated elements will not work
‒ Specify Character Set: <meta charset="UTF-8" />
‒ Specify Language: <html lang="en">
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" />
‒ Script and Link Declarations: type attribute optional
<link rel="stylesheet" href="styles.css" />
<script src="scripts.js"></script>
Info + Web Tech Course
© Anselm Spoerri
HTML5 – New Elements
New Media Elements
<audio>
<video>
<source>
<embed>
<track>
sound content
video or movie
multiple media resources for <video> and <audio>
container for external application or interactive content (a plug-in)
text tracks for <video> and <audio>
New Form Elements
–
New form controls, like calendar, date, time, email, url, search
New Semantic / Structural Elements
‒
header, nav, aside, section, article and footer
‒
Focus on your content and consider semantics of each element
‒
Use div if you need containing element strictly for style purposes
‒
Some older browsers treat new elements like inline elements
header, footer, nav, article, aside, section { display: block; }
Info + Web Tech Course
© Anselm Spoerri
HTML5 – New Semantic / Structural Elements
‒ header element
‒ Used to contain headline(s) for a page and/or section.
‒ Can contain logos and navigational aids.
‒ nav element
‒ Contains major navigation links.
‒ Often contained by header.
‒ aside element
‒ Contains related information, such as sidebar or pull-quotes.
‒ section element
‒ Contains content that is related or grouped thematically.
‒ Only if its content has own self-contained outline (h1,… h6).
‒ Do not use simply for styling purposes – use divs and spans instead.
‒ article element
‒ Stand-alone content such as a blog entry.
‒ footer element
‒ Contains information about a page and/or section.
Info + Web Tech Course
© Anselm Spoerri
HTML5 – Element Flowchart
http://html5doctor.com/happy-1st-birthday-us/#flowchart
Info + Web Tech Course
© Anselm Spoerri
CSS
Cascading Style Sheets = CSS
‒ Collection of
Formatting Rules
‒ Control Appearance of web page: blocks and text
‒ Ensure a more Consistent Treatment of Page Layout
and Appearance in Browsers
‒ Separation of Content from Presentation
– Easier to Maintain Appearance since Make Change
in Single Location
– Simpler and Cleaner HTML code shorter loading times
Info + Web Tech Course
© Anselm Spoerri
CSS
(cont.)
Cascading Style Sheets (CSS)
‒ Control Text properties
Specific fonts and font sizes; bold, italics, underlining, and text
shadows; text color and background color; link color and link
underlining; etc.
‒ Control Format & Position of Block-level Elements
Set margins and borders for block-level elements; position them in a
specific location; add background color; float text around them; etc.
‒ Liquid layouts: expand/contract based on Browser width.
‒ Easy to apply Same Layout to Whole Site and only
need to modify external CSS file.
‒ Minus: Not all browsers support CSS the same way.
Info + Web Tech Course
© Anselm Spoerri
CSS
(cont.)
CSS Style Sheet stored
a) External CSS style sheet
(.css file linked to page and using a link or an @import rule in
the head section of a document).
b) Internal (or embedded) CSS style sheet
(included in style tag in head portion of an HTML document).
c) Inline styles
(defined within specific tag instance in HTML document)
Using Inline styles is not recommended.
CSS Rule = Selector and Block of Declarations
Enclosed by {...} brackets and separated by ;
Declaration = Property: Value;
Info + Web Tech Course
© Anselm Spoerri
CSS – General Structure of CSS Rule
Basic syntax for Internal and External CSS:
selector {property1: value1; property2: value 2;}
HTML tag you want to modify
Value you want property to take
Property you want to change
p { text-align: left;
color: black;
font-family: Arial; }
causes
Font to be left-aligned
Font to be Arial and black
Info + Web Tech Course
© Anselm Spoerri
CSS Rules – id and class Rules in Internal Style Sheet
<head>
<style type="text/css">
/*
Comment: pageContent ID and define font to use for page and the top
and left margins as well page width. This pageContent div contains all the
other divs */
#pageContent {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
margin-top: 10px;
margin-left: 50px;
width: 500px;
}
/* blue text class */
.blueText {
color:#009;
}
</style>
</head>
Info + Web Tech Course
© Anselm Spoerri
CSS Rules – id and class Rules Applied in <body>
<body>
<div
id="pageContent">
<div id="content">
<h1>Heading1</h1>
<p
class="blueText">Open paragraph</p>
</div>
</div>
</body>
Info + Web Tech Course
© Anselm Spoerri
Location of CSS Style Definition
Inline style
(causes only the tag to have desired properties)
<p style="font-family:Arial; color:blue">Something blue </p>
Internal stylesheet
(specific to a document)
– Causes all tags in document to have property
– <style> tag inside <head> tag of document
<head>
<style type="text/css">
p { font-family:Arial; color:blue;}
</style>
</head>
External stylesheet (can control multiple documents)
– Ensure consistent appearance of website
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
Info + Web Tech Course
© Anselm Spoerri
CSS – Cascasde of How Rules are Applied
Style Rules “Cascade” from broad to narrow:
– Browser’s Default Behavior
– External Style Sheet
– Internal Style Sheet
– Inline Style
Info + Web Tech Course
© Anselm Spoerri
CSS3 – Intro
http://www.w3schools.com/css3/default.asp
CSS3 backwards compatible, don’t have to change existing designs.
Borders Rounded, add shadow and use image as border.
Backgrounds new background properties and greater control.
Text Effects new features such as text-shadow or word-wrap.
Fonts can use font you like by including font file on server.
2D Transforms move, scale, turn, spin and stretch elements.
3D Transforms format elements using 3D transforms.
Transitions add effect when changing from one style to another, such
as on mouseover or mouseout events.
Animations specify CSS style inside @keyframes rule and animation
will gradually change from the current style to the new style.
Multiple Columns can create multiple columns for laying out text.
User Interface user can resize elements and other features supported.
Info + Web Tech Course
© Anselm Spoerri
CSS Demo – Step 1
Step 1
‒ Download “startPage.html”
from
http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec5/Steps
‒ Save “startPage” as “page1.html” in folder “week5”
‒ Create nested div structure
pageContent,
header, navi, content, footer
‒ Assign id name to div
Info + Web Tech Course
© Anselm Spoerri
CSS Demo – Step 2
Step 2
‒ Create Internal CSS Style Sheet
<style type="text/css">
‒ Create CSS Rule for id="pageContent"
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
margin-top: 10px;
margin-left: 50px;
width: 500px;
‒ Create CSS Rule for class="blueText"
color:#009;
Info + Web Tech Course
© Anselm Spoerri
CSS Demo – Step 3
Step 3
‒ Create CSS Rule for id="header"
in HTML5 for <header>
font-size: 9px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #333;
‒ Create CSS Rule for id="navi"
in HTML5 for <nav>
font-size: 14px;
background-color: #E1E3F7;
padding: 5px;
margin-top: 5px;
Info + Web Tech Course
© Anselm Spoerri
CSS Demo – Step 4
Step 4
‒ Create CSS Rule for id="content"
in HTML5 for <main>
font-size: 12px;
‒ Apply class="blueText"
<p> tag inside div with id="content"
‒ Create CSS Rule for id="footer"
in HTML5 for <footer>
font-size: 10px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #666;
Info + Web Tech Course
© Anselm Spoerri
