Introduction to Multimedia - no-carrier.com · Introduction to Multimedia MMP100 - Fall 2011...

Introduction to Multimedia

MMP100 - Fall 2011Professor Miller

09/15/11

Thursday, September 15, 2011

Homework

• We’ll start off today’s class by looking at a few homework examples that did the following:

• one image, in another folder

• two links, one list

• CSS properly linked and used


Review

• Let’s take a look at a few things from our last meeting...


Troubleshooting - AGAIN!

• Check your tags! Do you have start AND end tags? Does everything match?

• Check your syntax! Any mistakes?

• Check your file names! Any spelling errors, spaces, or weird characters?

• Check your file paths and extensions! Are your files there? Are they the right type?

• Did you save your most recent changes?


CSS

• CSS = _________________

• Two different documents, but linked together!

• For example: mybio.html and style.css

<link rel= “stylesheet” type= “text/css” href= “styles.css”>


Cascading? Huh?1. The linked style sheet is

applied first.

2. The embedded style sheet is applied next, taking precedence over the linked style sheet.

3. The inline style is applied last and takes precedence over the embedded and linked style sheets.


CSS, not HTML!

• In the stylesheet, you write CSS - which is different than HTML.


CSS Separators

• Don’t forget - very important! Watch out for typos.

body {margin: 15px; background: #FFF000; }


Margins, Borders,and Padding


Margins: one, two,or four

• One number: all the way around (like last class)

• margin: 10px;

• Two numbers: one of top and bottom, one for left and right:

• margin: 10px 20px;

• Four numbers: one for each, clockwise from top:

• margin: 10px 20px 30px 40px;


Moving On...

• Today we’re going to learn about:

• div (id specifically)

• fonts (with an emphasis on font-families)

• Then we’ll put it all together to create a unique page!


<div>

• The <div> tag defines a division or a section of an HTML document.<div id="special">

<h1>Special division</h1>

<p>Your ID should be unique, and only used once on the page, for a section

that is special and unlike any other. </p>

</div>


<div> and CSS

• That was HTML, but you need to use CSS to style your <div>, like this:

• #special {background: #00FF00;}


Fonts and font families

• Font = artistic representation of characters

• You can specify fonts, but...

• The font-family property specifies the font for an element.

• The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.


Serif and Sans-Serif


Font Family

• In CSS, the font family of a text is set with the font-family property.

• The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

• 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.

• Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman".


Font Family

• More than one font family is specified in a comma-separated list:

p{font-family:"Times New Roman", Times, serif;}


Fonts - tips!1. Don't use more than 3-4 fonts on any one

page.

2. Don't change the font in mid sentence unless you have a very good reason.

3. Sans serif for online, serif for print.

4. Monospace for typewriter and code.

5. Script and fantasy for accents.


Comic Sans


Hahaha!

• One of my favorites!


Example CSS file... getting even more complex!

body {margin: 5px 10px 5px 10px;background-color: #00FF00;font-family: “Gill Sans”,Helvetica, Arial, sans-serif;}

h1,h2 {color: #FF00FF;font-weight: bold;font-family: “Times New Roman”, Times, serif}

p {background-color: #AABADD; margin: 25px}

#special {background-color: #000000; color: #FFFFFF}


Rocks rock?


Rocks rock!

• Today we’re going to practice everything we’ve learned so far!

• We’ll transform a text document and a bunch of pictures into an HTML webpage styled with CSS!


Don’t forget!

• Check your tags! Do you have start AND end tags? Does everything match?

• Check your syntax! Any mistakes?

• Check your file names! Any spelling errors, spaces, or weird characters?

• Check your file paths and extensions! Are your files there? Are they the right type?

• Did you save your most recent changes?


Homework

• Homework will be posted on the blog!


Introduction to Multimedia - no-carrier.com · Introduction to Multimedia MMP100 - Fall 2011...

Documents

Transcript of Introduction to Multimedia - no-carrier.com · Introduction to Multimedia MMP100 - Fall 2011...