Multimedia and the World Wide Web

Multimedia and the World Wide Web HCI 201 Lecture Notes #8A

What will we learn today? • Review of what we have learned about CSS • The <div> tag • The <span> tag • Formatting block-level element boxes • Resizing the boxes • Moving the boxes • Image processing 101 2

Review of last week <style> body {color:green; background: white url(Draft.jpg) no-repeat fixed center center} h1, h2, h3 {font-family: Arial, Helvetica, sans-serif} address {font-size:0.6em; font-style:normal; text-align:center; text-transform:uppercase} ul {list-style: circle url(Apple.jpg) outside} ul b {color: rgb(128, 0, 0)} li.special {color:rgb(50%,0%,75%); font-weight:bold} blockquote {background-color:rgb(200,200,200); color: maroon; font-style: italic} a {color:green} a:hover {color:red; text-transform: uppercase; font-weight:bold} </style> 3

Review of last week • The style of CSS (Inline, embedded, or external?) • Inheritance and overriding • Selectors and declarations (grouping selectors and contextual selectors?) • Style class (generic, regular, or pseudo class?) • Properties - URL property - Font property - Color property - Text property - Background property - List property 4

The <div> tag Internet Explorer Netscape 5

The <div> tag <div class=class_name>content</div> • <div> tag does not format content. • <div> tag creates a block-level element. • Used with class or id property, <div> tag assigns a name to the document content it contains. • class_name is the name of the style class assigned to the content. • You can substitute the id property for the class. 6

The <div> tag In style: div.Slogan {font-weight:bold} In HTML: <div class=Slogan>Maxwell Scientific’s new slogan is: ”We teach science”.</div> What do you mean by “block-level element”? Maxwell Scientific’s new slogan is: <div class=Slogan>”We teach science”.</div> 7

Block-level and inline elements • Block-level elements paragraphs, block quotes, headers, lists, etc. • Inline elements individual letters, words, phrases, etc. • How to assign styles to an inline element? the <span> tag 8

The <span> tag <span class=class_name>content</span> • Browsers treat the <span> tag as a physical or content-based tag. • <span> tag creates an inline element. • Used with class or id property, <span> tag assigns a name to the inline element it contains. • class_name is the name of the style class assigned to the content. • You can substitute the id property for the class. 9

The <span> tag In style: span {color:purple} span.bigger {font-size:larger} In HTML: <span class=“bigger”>Maxwell Scientific’s new slogan is: ”We teach science”.</span> Question: Will we break the line if we change the code to Maxwell Scientific’s new slogan is: <span class=“bigger”>”We teach science”.</span> 10

The “boxes” • Control the page layout with CSS - CSS treats block-level elements as if they were enclosed in a box (remember the inside and outside property of list items?). • Manipulating the size and location of block-level element --- the “boxes”. • Applying borders and background colors to the boxes. • … • HTML tags that are treated as lock-level elements • <h> tags: <h1> ~ <h6> • <p> • <blockquote> and <address> • List tags: <ul>, <ol>, and <dl> • <div>, <body>, <hr>, and <img> 11

What’s in the box? Margin Border Padding Parent Element • Margin: The area between the box and its parent element. • Border: The border around the box • Padding: The space between the box border and the content. Content of the block-level element goes here … 12

The boxes in our page 13

Control the margins • margin-top: The space between the top of the box and the top margin. • margin-right: The space between the right side of the box and the right margin. • margin-bottom: The space between the bottom of the box and the bottom margin. • margin-left: The space between the left side of the box and the left margin. • Margin size: units of length (pt, em, etc.) or a percentage of the width of the parent box. 14

Control the margins li {margin-left:3em; margin-right:3em; margin-top:2em; margin-bottom:2em} body {margin-left:5%; margin-right:5%; margin-top:5%; margin-bottom:5%} Question: The body margin sizes are 5% of _____________________. p {margin:1pt,2pt,3pt,4pt} top=1pt, right=2pt, bottom=3pt, left=4pt. p {margin:1pt,2pt,3pt} top=1pt, right=2pt, bottom=3pt, left=right=2pt. p {margin:1pt,2pt} top=1pt, right=2pt, bottom=top=1pt, left=right=2pt. p {margin:1pt} top=right=bottom=left=1pt. the width of the display window 15

Set the padding size • padding-top. • padding-right. • padding-bottom. • padding-left. • padding.(In the order of top, right, bottom, and left.) • padding size: units of length (pt, em, etc.) or a percentage of the width of the block-level element itself. 16

Formatting the border • Border properties 17

Formatting the border • Width: expressed with units of length or keywords: thin, medium, thick. • Color: expressed in color names or RGB triplets. • Style: 9 styles: none, solid, dotted, dashed, double, outset, inset, groove, ridge. Chris wants us to create a container box for the science article: div.Article {padding:1em; border-style:solid; border-width:2px; background-color: rgb(252,221,163)} 18

Resizing the boxes • width- In absolute or relative units of length, or as a percentage of the width of the parent element. - Width is seldom modified, except for text boxes and inline images. (The results for other elements can be unpredictable with different browsers.) • height-In absolute or relative units of length, but NOT in percentages. - Length is seldom modified, except for inline images. - When the amount of required text exceeds the specified height, browsers might introduce scrollbar, ignore the style, or worse, truncate the extra text. 19

Moving the boxes • With CSS, we can tell the browser to place the boxes in specific positions on the page. (We can also make the page look like this:) 20

Moving the boxes • float- With a specified width, float property can align the box to either “left” or “right”. - The browser moves the next element up and wrapped around the floating element. float: right width: 200px float: left width: 200px 21

Moving the boxes • clear- Prevent the next element from wrapping around the floating box. - clear=none, left, right, both - The next element is placed at the first point where the left/right margin is clear. float: right width: 200px float: right width: 200px hr {clear: right} 22

Moving the boxes Chris wants us to resize and float the article box: div.Article {padding:1em; border-style:solid; border-width:2px; background-color: rgb(252,221,163); float: right; width:300px} 23

Image processing 101 • Select • Shape (rectangular, elliptical, polygonal, line) • All, deselect, inverse • Feather • Stroke • Copy, Paste, and Layers • Transform 24

Assignment 5 • Download the Chem.htm and MWSLogo.gif into one folder. • Create a MyCSS.txt in the same folder, use it as an external style sheet file. • In the MyCSS.txt, change the styles for the following elements: • Body: color, font-family • Background: place an image in the middle of the display area, no repeat • Choose different font size and colors for <p>, <h1>, <h3> • Specify the font style, color, and background color for <blockquote> • Change the default hyperlink appearance: link, active, visited, and hover. • Choose a bulletin image for the unordered list. • Create a box that contains the “Featured Chemistry Products” (title and list), specify the border color, border width, and background color. 25

Multimedia and the World Wide Web