Multimediaweb Designclass Notes

MULTIMEDIAWEB DESIGNCLASS NOTES

CLASS:: 09

04.06
2018

3 Hours

AGENDA

HTML5 ELEMENTS
:: Overview
:: Your Homepage Structure
NECESSARY STYLE
:: What is CSS?
:: The Box Model
:: The 3 Style Methods
:: Common Style Rules
EXTERNAL DOCUMENT METHOD
:: Setting Up HTML & CSS File
:: HTML5 Layout Elements & Styling [ html, body, header, sections, footer ]
VIDEO TUTORIALS
:: Steps 1-3:
URL:
:: Ensure Your Folder Structure is Correct

HTML5 ELEMENTS
Today you will style some of the elements introduced in HTML5.
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 HTML Structural elements (some shown below) partnered with Cascading Style Sheet(CSS) syntax::
HTML5 ELEMENT / HTML 5 MARK UP <tag> / DESCRIPTION
Open tag / Close tag
header / <header> / </header> / Typically appears at top of web page(or top of article). May contain navigation, a header image, or both
nav / <nav> / <nav> / Used to contain menu/navigation links
section / <section> / </section> / Used to organize sections on your web page. Typically used for vertical scroll pages
figure / figure / </figure / Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
figcaption / figcaption / </figcaption / Defines a caption for a <figure> element
footer / <footer> / </footer> / Typically appears at bottom of webpage. May contain footer links, logo, copyright information, terms and use, etc.
REFERENCE:: HTML 5 Elements /
NECESSARY STYLE
:: What is CSS?
To make HTML elements less boring, you must give them style.
Styles change the default appearance (size, color, layout, etc.) of elements on your webpage
Styles may be applied to the majority of HTML elements (including divs, spans, and images)
Before we style the HTML5 elements, let’s examine the language responsible for applying styles: CSS.
CSS stands for Cascading Style Sheet.
The syntax for applying Single Document Style Method and External Stylesheet Method includes:
AN ELEMENT / PROPERTY / VALUE
body / { / background-color / : / #000000 / ; / }
This is an example of how you would code the style for the body element:

Type the element you want to style
Followed by an opening curly bracket
Type the body’s property you wish to change
Followed by a colon
Type the value you want the property to be (#000000 = black)
Followed by a semicolon
Followed by a closing curly bracket

PLACEMENT OF CODE:
The style code, as shown above, may be applied using the single document and external
stylesheet method. Another method, not shown above, is the inline style method (widely used for HTML E-mails and Blog posts).
ALL methods for applying styles to elements are as follows…
::The 3 Style Methods
REFERENCE FOR PROPERTIES:
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:
INLINE STYLE METHOD [ HTML E-mails/Blog Posts::Only affects the element/within the tag ]
<body style=”background-color:#000000;color:#ffffff;”>…</body>
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 ( font 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 property/value set for an element.
SINGLE DOCUMENT [ INTERNAL CSS ] METHOD
[ Development or Override Extermal CSS :: Only affects the current page ]
<!DOCTYPE html>
<html lang=”en”
<head>
<title>Untitled Document</title>
<style>
body {background-color:#000000; color:#ffffff;}
</style>
</head>
<body>
</body>
</html>
EXTERNAL [ CSS ] STYLESHEET METHOD
[ Affects multiple pages in a website and REQUIRES .html file(s) to be linked to a .css file]
1. HTML FILE:
<!DOCTYPE html>
<html lang=”en”
<head>
<title>Untitled Document</title>
<link href=”style.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
</body>
</html>
2. CSS FILE:
body{background-color:#000000;color:#ffffff;}
THE BOX MODEL
:: The Box Model
A model used to demonstrate the behavior of an HMTL element and how styles (mainly size & padding in this exercise) work. This model may be used on numerous elements to include:
header, nav, section, figure, figcaption, footer, p,a, h1, h2, etc.
In the example below, we will use an element called “div”
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 its parent element. It auto expands to fit content (unless assigned a style affecting its default behaviors, i.e. width, height, overflow, etc.). A div may rest within another div.
The HTML markup used for div is the opening tag of<div>to open the element and the closing tag of </div> to close the element.
EXAMPLE:
HTML / CSS
<div>
When the div property padding is introduced, the total amount of padding should be subtracted from the width and height.
</div>
NOTE: padding is used when designers want space to exist between the edge of the element and content (text or images) / div {
width:260px;
height:45px;
padding:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
}

THE MATH EXPLAINED
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)
COMMON STYLE RULES
[ You May Practice with The Box Model Using the Single Document Method]
:: … For Text (font, color, size, etc.)
NOTE: Example is changesall h1 element(s)
h1{
color:red;/* OR color:#FFFFFF; */
font-family:san-serif;
font-size: 24px;
letter-spacing: 1px;/* space between each character */
line-height:30px;/* space between each line of text */
}
:: … ForHyperlinked Text (font, color, size, etc.)
NOTE: The a pseudo class (represented by a:) must be listed in order shown below:
a {text-decoration:none; font-family:san-serif;}
/* text-decoration:none; removes the default underline applied to hypertext links */
a:link {color:green;}
a:visited {color:gray;}
a:hover {color:cyan;}
a:active {color:yellow;}
}
:: … ForHyperlinked Image
a img{border:none; outline:san-serif;}/* removes default line applied to linkedimages */
:: … ForBackgrounds
background-color: yellow;
background-color: #FFCC00;
View Hexadecimal Codes:: SOURCE URL:
background-image: url(images/yourimage.jpg);/* for background image */
background-repeat: no-repeat;/* to keep background from repeating */
background-repeat: repeat-x; /* repeat background image in x direction only */
background-repeat: repeat-y; /* repeat background image in y direction only */
background-position: 0% 0%; /* image position starts at 0% from left (X) & 0% from top (Y) */
See How it Works
SOURCE URL:
background-size: cover;
/*Covers the background of your browser, plus resizes with your browser window*/
background-attachment: fixed;
VIEW MORE OPTIONS
SOURCE URL:
SETTING UP YOUR HOMEPAGE
[ External Stylesheet Method ]
:: Setting Up Your index.html and style.css file
GOAL:
In this exercise, you will set-up the parent elements for your homepage.
You will create the basic structure of your page using a .html document
You will change the default behaviors [appearance/layout] of the page using a .css document.

index.html
TASK:
Create a new .html document with the following HTML5 Elements:

header element [ For your future logo, navigation and hero (image, animation, or slideshow) content ]
section element [ For your future works (thumbnails with captions, OR slideshow) ]
section element [ For your future about me information (background picture, bio, and social media buttons) ]
footer element [ For your footer logo, copyright, site links, and contact form ]

STEP / DESCRIPTION / ACTION / SHORTCUT KEY
[Win] / [Mac]
1 /
Open a New HTML5
Document /

Open Adobe Dreamweaver CC
Ensure Your Site is Defined [Follow steps at below URL if needed]
URL:
Go To Menu Bar > File > New
Change Webpage Language to English [LINE 2]: html lang=”en”

2 /
Save Document / Save Document as index.html inside of your root folder [ Your root folder is public_html, NOT code_snippets ]
/ [Ctrl+S] / [cmd+S]
3 /
Change title element / Change <title>Untitled Document</title> to
Your page title of choice ( i.e. &clubs;Seven59.com&clubs; )
NOTE: Editing the <title> changes the text in the browser tab:

4 /
Add link element /
In order to link this index.html to its future style sheet, a link element
must be created… type (DO NOT COPY/PASTE FROM WORD) the following code after the title element:
<link href=”style.css” type=”text/css” rel=”stylesheet” />

NOTE: The link element is self-terminating (Doesn’t require a closing tag)
STEP / DESCRIPTION / ACTION / SHORTCUT KEY
[Win] / [Mac]
5 /
Add HTML5 formatting elements
[Along with Comments] /

After the opening <body> tag, ADD the following:

style.css
TASK:
Create a new .css document with style rules for the document and HTML5 Elements:
STEP / DESCRIPTION / ACTION / SHORTCUT KEY
[Win] / [Mac]
1 /
Open a New CSS
Document /

Go to Menu Bar > File > New
Choose New Document > Click CSS for the Document Type > Create

2 /
Save Document /
Save Document as style.css inside of your root folder [Same folder as index.html, Your root folder, public_html, NOT code_snippets ]
/ [Ctrl+S] / [cmd+S]
3 /
Create Style Rules to remove default margins and padding from
all elements / In browsers, the html, body, & many block elements (h1, figure, ul, li, etc.) display with a default margin & padding. You will use code to remove default margins and padding
1.In your .css document, ADD the following code to Line 4:
The * is the selector. The *selects all elements. It is followed by curly brackets + the property and value declarations needed to remove default margins and padding from all elements…
STEP / DESCRIPTION / ACTION / SHORTCUT KEY
[Win] / [Mac]
4 /
Set Width and Height for the html and bodyelement /
Your website will have 4 elements [1header, 2sections, 1footer] that will each be the full width and height of the browser window.
In order for those 4 elements to have a width and height of 100%, all of the elements ancestors (html and body) must also have a specified height of 100% or more…
1. ADD the following style rules to your css document:

NOTE:In order to style two elements with the same rules, type the element selectors and separate themwith a comma.
NOTE:The footer is the last element selector;DO NOT add a comma after it
5 /
Set-Up Styles for:
header, 2 sections, and
the footer element / 1. ADD your background colors of choice to the header, section 1,
section 2, and the footer:
NOTE:LINE 11 shows a pseudo-selector.
:nth-of-type(2)is the pseudo selector used to select the second section
located in your .html document
6 /
Save Document and Preview in the Browser /
Go to File > Preview in Browser (Chrome or Firefox) > Save Document and View the page in the browser.
Scroll and check to see if each element displays with its own block of color…
/
[Ctrl+S] /
[cmd+S]
HW-9 / Homework
DUE :: 04.13
REVIEW::

Class 9 Notes
VIDEO TUTORIALS: Steps 1-3
URL:

DO ::

Print Out Photoshop Mock-Up
[You will use the print out to create coding notes for webpage]
Complete Steps 1-3 of The Video Tutorials
Watch CSS Tutorials
CSS Basics [DevTips]:
CSS Selectors [DevTips]:
CSS Properties & Values [DevTips]:

SEE HOMEWORK PAGE FOR COMPLETE DETAILS
BRING ::HW-9
1 / Class 9 Notes
2 / Photoshop Mock-Up
Print Out
3 / USB/Flashdrive