• Abstract and Figures
• Public Full-text

:: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

CLASS :: 09

11.09 2015 3 Hours

AGENDA

NECESSARY STYLE REVIEW :: What is CSS? :: The Box Model :: The 3 Style Methods :: Code Hints Handout

INLINE STYLE METHOD :: Syntax :: Background Colors, Borders, and Images :: Element Size & Layout :: Style Text (font, color, size, spacing, etc.) :: Create an HTML Email using Tables & Inline Styles

SINGLE DOCUMENT STYLE METHOD :: Syntax

1 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

NECESSARY STYLE

:: What is CSS? [ recap ] CSS stands for Cascading Style Sheet.

To make HTML elements less boring, you must give them style. Styles change the default appearance of elements on your webpage. Styles may be applied to the majority of HTML elements ( including divs, spans, and images )

The basic syntax for applying a basic style includes an element, property, & value:

AN ELEMENT PROPERTY VALUE Body { background-color : #000000 ; } This is an example of how you would code the style for the body element:

1. Type the element you want to style 2. Followed by an opening curly bracket 3. Type the body’s property you wish to change 4. Followed by a colon 5. Type the value you want the property to be (#000000 = black) 6. Followed by a semicolon 7. Followed by a closing curly bracket

:: The Box Model [ Using “div” Elements & The Inline Style Method ]

What is a DIV?

By default a div (short for division) groups content within a box and extends 100% across the browser screen OR 100% within the element it exists within. It auto expands to fit content (unless assigned a style affecting its default actions, i.e. width, height, overflow, etc.). A div may rest within another div. The tag used for div is:

to open the element and

to close the element

The Box Model Box Model Exercise [ Using “div” Element ]: A method used to demonstrate the behavior of an HMTL SINGLE DOCUMENT or element and how EXTERNAL STYLESHEET styles (mainly size & position) work div { width:260px; This method may be height:45px; used on other tags: padding:20px;

,

, ,

, }

,

, etc. INLINE STYLE::

When…

WIDTH: left-padding(20px) + div width(260px) + right-padding(20px) = total div width (300px) HEIGHT: padding-top(20px) + div height(45px) + padding-bottom(20px) = total div height (85px)

2 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

:: The 3 Style Methods

The 3 Methods of applying styles are: Inline, Single Document, and External Stylesheets.

The following examples give the browser instruction to change the appearance of the body of a web page. The properties changed will be the background color AND text color:

TRY CODE FOR EACH METHOD: a. Inline Style (Only affects the element/within the tag):

…

1. body is the element 2. style is the attribute (of the body) 3. background-color is the first style property (changes page background color) 4. black is the value for the background-color property (page color is black - #000000 ) 5. color is the second style property (changes the text color) 6. white is the value for the color property (text color is white - #ffffff )

A semi-colon must be used to separate multiple style property and value sets. A semi-colon is also required to end a single propery/value set for an element.

b. Single Document (Only affects the current page):

c. External Stylesheet (Affects the entire site and REQUIRES .html file to be linked to a .css file): 1. HTML FILE 2. CSS FILE body {background-color:#000000; color:#ffffff;}

:: Code Hints Handout [ SOURCE URL: http://iris.nyit.edu/~dmyrick/DGIM601-W01/docs/code-corrections.doc ]

3 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

INLINE STYLE METHOD

:: Syntax

…Content…

Inline styles are coded inside the desired element tag & only effects the element. Inline styles are preferred for operations that commonly strip ,

…Content…

…Content…

…Content…

NOTE:

You will rely heavily on styling divs & other HTML5 elements to achieve your web layout & functions.

In the next exercise you will style divs using the Single Document Method. This method will allow you to assign property:value; sets to all divs (using a class name) OR assign custom property:value; set(s) to specific divs (using a unique id name). A div & other HTML5 elements may have both a class name and a unique id name.

LET’S BEGIN!

When assigning div id OR class names, be sure to assign a name that is intuitive to the tag/element’s purpose. In the example to follow,

is a div with the id name of container. Only one div with the id name of container may exist per .html page. Its function is to contain a series of elements on a page, hence the name container. Many designers will name the mother of all divs container or wrapper, but you may also call it motherofalldivs. Here’s the HTML…

The name of a div is up to you, so long as you, 1. Know the div’s purpose on your page, and 2. The name corresponds with the CSS code.

Here’s the respective CSS for the above HTML… #motherofalldivs {property:value;}

6 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

For styles you wish to have repeated on a page, a class name is applied to the elements. In the example to follow, the parent div named container contains 3 child divs named grayboxes. All divs named grayboxes will share the same styles such as height, width, background, etc. The content within each grayboxes div may change. (Create Code Example)

CREATE A NEW HTML5 DOCUMENT ////////////////////////////////////// :: [ TYPE THE FOLLOWING CODE VER BATIM ] :: ////////////////////////////////

WHITE H1 COLOR @ 24px

LEFT BOX

div id’s are referenced by a # and id name of your choice.

id names should be relative to its function AND not have spaces.

div id’s are only assigned to one unique element on a webpage

MIDDLE BOX

div classes are referenced by a period and class name of your choice.

class names should be relative to its function AND not have spaces.

div classes may be assigned to multiple elements on a page

RIGHT BOX

On this page, 3 divs are styled by the class grayboxes.
In CSS code it will appear like this: .grayboxes {property:value;}
For a series of values, developers will stack and indent the properties for readability (as noted within the above styles for .grayboxes

////////////////// ADD THE FOLLOWING

NOTE: If all divs within their parent element have the same properties, you may remove the class name and assign all divs the same 7 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES properties:values by changing the CSS to #container > div { … list of properties and values … }

8 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

:: HTML 5 Elements

Long, long, ago, web designers used tables, frames, clunky buttons, forced spaces, horizontal lines, and break tags to layout a webpage. View Apple’s 1997 Website Here. Later, in the web universe, designers used tables and other designosaurs to ONLY display and process data. View Gas Appliance Guide(UK). Style, layout, and presentation now belong to The Elite: HTML Structural elements such as the ones below::

HTML 5 MARK UP HTML5 DESCRIPTION ELEMENT Open tag Close tag header

Typically appears at top of web page. May contain navigation, a header image, or both nav

Used to contain menu/navigation links section

Used to organize sections on your web page. Typically used for vertical scroll pages aside

Used to contain a sidebar or text. Typically appears on one side of a webpage. footer

Typically appears at bottom of webpage. May contain footer links, logo, copyright information, terms and use, etc. REFERENCE:: HTML 5 Elements http://www.w3schools.com/html/html5_new_elements.asp

Styles may be applied to HTML5 elements in the same way as the div elements you styled before… For a list of CSS rules, please view here: http://www.w3schools.com/css/default.asp

HW-7 Homework 9 :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

DUE :: 11.16

REVIEW ::

1. Class Notes

2. List of CSS Examples Available for Your Webpage SOURCE URL: http://www.w3schools.com/css/css_examples.asp

3. Watch HTML5 & CSS Web Design [ 107 ] HTML5 Page Layout SOURCE URL: http://youtu.be/-sUKfvwfWaY

4. Watch HTML5 & CSS Web Design [ 108 ] HTML5 Page Layout SOURCE URL: http://youtu.be/Sk6NYOW7_do

5. Watch HTML5 Tutorial For Beginners [ 6 of 6 ] - CSS Page Layout SOURCE URL: http://youtu.be/CPcS4HtrUEU

DO ::

 Print out your homepage mock-up  Mark up your document with the proposed element names & proper measurements

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING :: HW-6

1 Print Out of Mock-Up [ with proposed HTML5 elements ]

10

Load more

  10

Copy Link